Skip to content

araldwin/WeShareIt

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
.devcontainer
.devcontainer
 
 
.github/ISSUE_TEMPLATE
.github/ISSUE_TEMPLATE
 
 
images
images
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
.gitpod.yml
.gitpod.yml
 
 
Procfile
Procfile
 
 
README.md
README.md
 
 
TESTING.md
TESTING.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
tailwind.config.js
tailwind.config.js
 
 

Repository files navigation

We Share It - Social Media Platform

Welcome to We Share It - a dynamic social media platform designed for individuals who love sharing their experiences, interests, and inspirations through captivating photos and videos. This platform provides a visually immersive way to connect, explore, and engage with a diverse community of content creators.

The purpose of this Portfolio Project #5(Advanced Front-End Project), this is part of me achieving the Diploma in Full Stack Software Development at Code Institute. Image

View live website here

Table of content

  1. Project

  2. User Experience

  3. Features

    Future features

  4. Technologies Used

  5. Testing

  6. Deployment

  7. Credits

Project

Objective

The primary objective of "WeShareIt," our social media platform, is to connect people with similar interests, facilitate content sharing, foster online communities, support private and group communication, encourage user engagement, ensure a seamless user experience, and expand its global presence by accommodating diverse languages and cultures.

Site Users Goal

The site users' goal on "WeShareIt" is to connect, share, and engage within a diverse online community.

Site Owners Goal

The site owner's goal for "WeShareIt" is to provide a vibrant and user-friendly social media platform that fosters meaningful connections, content sharing, and community engagement while ensuring the platform's sustainability and growth.

Project Management

Gihub Project Board

Image Image

Database Schema

All the models have been set up in a separate DRF repository. Click here to view the repository or here to view the deployed API.

Back to top

User Experience

Wireframes

I used balsamiq to create wireframes for my project.

User Stories

As a Site User, I Want To:

  1. Sign Up and Log In

    • Sign up for a new account.
    • Log in securely to access my account and personalized content.

  2. Create and Edit My Profile

    • Create and customize my user profile with a profile picture and personal information.
    • Edit my profile details, including my name, bio, and profile picture.

  3. Discover Content

    • Explore photos shared by other users.
    • Discover trending and popular posts from different categories.

  4. Follow and Interact With Users

    • Follow other users whose content I find interesting.
    • Like, comment on, and share posts from users I follow.

  5. Create and Share Posts

    • Create or upload images to engage with the community.
    • Add hashtags and categories to make my posts discoverable by others.

  6. Search and Discover Users, Content, and Communities

    • Search for specific users using keywords and filters.
    • Discover new users, most like post , and vibrant communities of interest.

  7. Log Out and Secure My Account

    • Log out of my account to protect my privacy and security.
    • Reset my password in case of login issues.

  8. Access Across Devices

    • Seamlessly access the platform on various devices, including desktop, mobile, and tablets.

Back to top

Site Structure

The site structure for WeShare-It, the social media platform, encompasses various key sections, including a dynamic home page for user engagement, user profiles for personalization, content feeds for sharing and discovery, post creation capabilities, and a custom 404 error page, all designed to create an intuitive and engaging user experience.

Back to top

Design

WeShare-It boasts an elegantly crafted and user-centric design, seamlessly blending visually appealing aesthetics with intuitive navigation, ensuring an engaging and delightful social media experience for all users.

  • Typography

    typography screen shot

    In this project, I use font-family Roboto and Open Sans.

  • Color scheme

    color palette preview

    These colors are integral to the overall design and appearance of the website.

Back to top

Features

  • A Simple, Easy to Remember URL:WeShare-It

  • Navigation

    The navigation bar adapts its functionalities based on the user's authentication status, providing different options for logged-out and logged-in users. It also ensures responsiveness for mobile and tablet devices.

    Logged-Out State

    • Logo and Navigation:
      • WeShare-it logo on the left
      • Home icon
      • Login/Authenticate page on the right
        Logged-Out State Preview

      • Mobile Responsiveness View
        • Hamburger icon to reveal dropdown menu for navigation options
          Mobile Preview

    Logged-In State

    • Logo and Navigation:
      • WeShare-it logo on the left
      • Create Pin icon
      • Functionalities: Home, Feed, Loved, Logout, Profile icons on the right
        Logged-In State Preview

      • Mobile Responsiveness View
        • Hamburger icon to reveal dropdown menu for navigation options
          Mobile Preview

  • Authentication

    Users can log-in, and log-out using the options provided in the navigation bar.

    Sign up process

    • New users who wish to create an account on WeShare-it can follow these steps:
      1. Click on the Sign-up menu option in the Log-in Page.
      2. Follow the user account sign-up process provided through dj-rest/auth/registration.
      3. Enter necessary details to create a new user account.
        Sign-up Preview

        Desktop/Laptop Sign-up Preview

        Mobile Sign-up Preview

        Tablet Sign-up Preview

    Log In process

    • Existing users with a WeShare-it user account can sign in by:
      1. Clicking on the Log-in icon menu option in the Navigation Bar.
      2. Providing their credentials (username and password) through the authentication process.
        Log in Preview

        Desktop/Laptop view

        Mobile Sign-up Preview

        Tablet Sign-up Preview

    Log out process

    • Once logged in, users can log-out by:
      1. Clicking on the Log-out icon visible in the Navigation Bar.
        Log-out icon Preview

        NavBar view

        Log-out icon

        Mobile Log-out Preview

        - Select burger icon to see the log-out icon.

  • Home page

    The three main components of the WeShare-It home page, highlighting the functionality and layout of each section.

    1. Most Followed Profiles

      The Most Followed Profiles component showcases the top four users with the highest follower count. The layout and interaction differ based on device views (desktop/laptop vs. tablet/mobile).

      • Displays avatars and usernames of the most followed profiles for logged-out users in desktop/laptop view.

        Preview

        Desktop/Laptop view

      • Shows the top four most followed profiles for logged-out users in tablet/mobile view.

        Preview

        Mobile view

        Tablet view

      • Logged-in users (desktop/laptop view) can follow/unfollow profiles directly from this component.

        Preview

        Desktop/Laptop view

      • Clicking on an avatar redirects to the full profile page of the respective user.

    2. Created pins

      The Created pins component displays all pins created through the WeShare-It platform. Pins are ordered by the created date, with the most recent ones appearing first.

      • Masonry layout on desktop/laptop/tablet view for optimal pin display.

        Preview

        Desktop/Laptop view

        Tablet view

      • Infinite scroll method for mobile view to handle the pins' presentation.

        Preview

      • Information displayed: user who posted the pin, date, title, description, pin image, love (like) counts, comment counts.

      • User-specific interactions: Love/unlove functionality for logged-in users (excluding their own pins), comment functionality.

    3. Search and Filter

      The Search and Filter component allows users to search for specific pins by Title, user name, description, or categories.

      • Enables users to search for pins based on various criteria.
      • provides a filtering mechanism for a refined search experience.
        Search and Filter Preview

  • Feed

    The Pins Display in the Feed page showcases all pins posted by users that the currently logged-in user is following or has followed. It filters and displays only the pins created by users that the logged-in user is following.

    • Fetches pins from the API but filters to show only those posted by users followed by the logged-in user.
    • If the logged-in user is not following any users or is new, a "No results found" message is displayed inside the Feed component.
    • Similar layout and functionality as the homepage's Pins component, displaying followed users' pins.
    • Access to the Feed is restricted when the user is logged out.
      Feed Page Pins Display

  • Love

    The Pins Display in the Love page showcases all the pins that the currently logged-in user has loved across the platform. It exclusively displays the pins that the logged-in user has interacted with positively.

    • Fetches pins from the API that the logged-in user has loved.
    • Only displays pins that have been loved by the logged-in user.
    • Access to the Love page is restricted when the user is logged out.

  • Create pin

    The Create Pin page allows logged-in users to share new pins with the community. It comprises essential fields required for pin submission, including Upload Photo, Title, Pin Description, Destination Link, and Choose Pin Category.

    • Mandatory Fields: Upload Photo and Title are mandatory fields for successful pin submission.
    • Optional Fields: Pin Description, Destination Link, and Pin Category are optional but enhance the pin's details.
    • Successful submission redirects the user to the newly created pin's details page.
    • Each pin shared incrementally increases the user's pin count displayed on their profile page.
      Create Pin page preview

  • Pin Detail Page

    The Pin Detail page showcases comprehensive information regarding a single pin. Users can access this page by clicking on a pin image from the homepage or a user's profile page.

    • Displays detailed information related to a single pin, including the uploaded photo, title, description, destination link, and pin category.
    • Owner-specific actions: If the user is the owner of the pin, they can access edit and delete options represented by three dots in the top right corner of the page.
    • Edit functionality allows the owner to update pin details, redirecting them to a pre-populated Create Pin form.
      Edit Pin preview

    Comments and Love/Like Section

    Comments

    Below the pin details, users can view and post comments about the pin. If no comments exist, a message prompts users to be the first to comment. Logged-Out Users can read existing comments but cannot post comments without logging in. Owners of comments can edit and delete their own comments by selecting three dots to the right side of the comment section.

    Love

    Allows users to love a pin. Increases the pin's love count. Logged_In Users can love a pin but cannot like their own pins. Each comment or love action increments the respective counts for the pin. Loved pins are reflected in the user's Love component/page in the navbar.

    Pin Detail page preview

  • Profile Page

    Profile avatars across the site (most followed profiles, posted pins, comments) serve as links to view the full profile page of that user. Additionally, users can access their own profile page through the Navigation Bar.

    • Clicking on a profile avatar leads to the user's full profile page.
    • Navigation Bar includes a direct link to the user's own profile page.
      Profile page preview

    Profile Stats

    • User Information

      • Auto-Creation: Upon signup, a basic profile is auto-generated with a username, password, and default avatar image.
      • Updated Information: Profile usage stats include the number of pins posted, profiles followed, and followers.
      • About Container: Initially empty, users can edit their profile to add personal Bio.

    • Editing Profile

      • Editing Bio: Users can click on the three dots dropdown in their own profile to access the Edit Profile option.
      • Edit Profile Page: Redirects users to a form to add or change their avatar image and Bio.
      • Visibility: Profile details filled in here become visible to other users in the main profile stats container.
        Profile page edit preview

    • Follow Functionality

      • Follow/Unfollow: Each profile has a follow button within the stats container for other users to follow/unfollow.
      • Purpose: Not all profiles appear in the most followed component, enabling access to follow functionality.
        Other User's Profile preview

    Posted Pins Section

    Display of Pins

    Below the profile stats, all the pins posted by the viewed profile are displayed. Each pin is clickable to view its individual detail page, including comments (if any).

    Back to top

  • Future features

    Enhanced User Experience

    Pinterest-Style Interface

    • Photo-Centric Homepage: Display pins as images primarily in the homepage layout, mirroring the Pinterest style.

    Navigation Enhancements

    • Dropdown Menu: Create a dropdown menu within the navbar to encapsulate all site components for easier navigation and a cleaner UI.

    Functional Improvements

    • Delete Confirmation Component: Implement a confirmation component when deleting items to prevent accidental deletions.
    • Category Section in Homepage: Introduce a category section in the homepage to facilitate organized pin browsing.

    Profile Page Enhancements

    • Expanded Profile Editing: Include additional details such as First Name, Last Name, Website, and Username in the profile editing section for a more comprehensive user profile.
    • Download and Save Pins: Enable users to download and save their posted pins for personal use.
    • Private Messaging: Incorporate a messaging system to facilitate communication between users.

    Independent Development Support

    • Self-Reliance: Enable users to address development hurdles by incorporating more detailed guidance within the app itself, reducing reliance on external support systems.
    • Documentation Enhancement: Improve documentation within the app to provide comprehensive guidance on various functionalities and troubleshooting steps.

    Personal Development Efforts

    • Self-Training: Incorporate walkthroughs, tutorials, or guides within the app to assist in self-training and development efforts.
    • Resource Integration: Integrate resources within the app interface to assist in resolving coding issues or seeking guidance, reducing reliance on external sources.

Back to top

Technologies Used

Languages

Frameworks Toolkit Software

  • Am I Responsive - online tool used to create mockup to present responsive design of this project.
  • Balsamiq - design tool used for creating wireframes.
  • Canva - used to create the WeShare-It logo.
  • Chrome DevTools - used to inspect the rendered HTML (DOM) and network activity of my pages. Used to troubleshoot ad serving issues.
  • Cloudinary - a service that hosts image files in the project.
  • Coolors.co - used to create color palette.
  • CSS Valitadtion - used to validate CSS code.
  • Fontawesome - where i import font icons for this project.
  • Favicon.io - generator i use to create favicon for this project.
  • Google Fonts - where i import and use font-style for this project.
  • Git - Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  • Gitpod - IDE used to code the project.
  • GitHub - GitHub is used to store the project's code after being pushed from Git.
  • Heroku - a container-based cloud Platform used to deploy, manage, and scale apps.
  • HTML Validation -used to validate HTML code.
  • JSHint Validation - used to validate JavaScript code.
  • Lighthouse - used to test site performance
  • React Bootstrap - use to build front-end framework.
  • Visual Studio Code for Windows - IDE used to code the project.
  • Windows Snipping Tool - used to save the screen shot.

Back to top

Libraries

Back to top

Testing

click here for more information about testing WeShare-It Frontend.

Back to top

Deployment

Deployment to Heroku

Prerequisites

  • Gitpod Workspace
  • Heroku Account
  • GitHub Repository

Steps

  1. Create Heroku App

    • Log in to your Heroku account.
    • Select "Create New App" and assign a unique project-related name.
    • Choose a region and create the app.

  2. Connect GitHub Repository

    • In the Heroku dashboard, navigate to the 'Deploy' tab.
    • Choose GitHub as the deployment method.
    • Find your project repository and connect it.

  3. Deploy Application

    • Select the branch to deploy.
    • Click 'Deploy branch' to initiate the build process.
    • Once build succeeds, click 'Open App' to view your application.

Connecting React Frontend to API Backend

Prerequisites

  • Deployed API Backend
  • Axios Library (for making HTTP requests)

Steps

  1. Heroku API Application Settings

    • Access the Heroku dashboard and locate your API application settings.
    • Add new Config Vars:

  2. Frontend Setup

    • In the Gitpod workspace, install the Axios library:

      npm install axios

    • Create an 'API' folder and inside it, create a file named 'axiosDefaults'.

      • Import Axios at the top of the file.
      • Define the baseURL as the unique URL of your deployed API project.
      • Set the content-type header to 'multi-part/form-data'.
      • Set 'withCredentials' to true to avoid CORS issues.

  3. Usage in App.js

    • Import the created 'axiosDefaults' file into App.js to utilize it across all pages.

Additional Notes

  • Regularly check and update the deployed URLs as they might change.
  • Ensure configurations and settings align between the frontend and backend for seamless communication.

Back to top

Credits

  • Moments - Code Institute walkthrough
  • Stack Overflow - used to solve bugs, and learn to understand more about what the code does and how it works properly.
  • JavaScript Mastery - Youtube tutorials i used to get ideas for my WeShare-It project.

Acknowledgements

  • Mr. Rohit to my mentor
  • Student Support team
  • Slack community
  • Code institute

Disclaimer

  • WeShare-It was created for educational purpose only.

Back to top

About

Portfolio Project no.5 (Advance Front end React)

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages