search

zohaibshahzadkhan / SocialVibe-React-App

0 stars 0 forks source link

readme

SocialVibe

Logo

Project Goal

The goal of SocialVibe is to create an innovative social media platform that fosters meaningful connections and engaging interactions among users. By integrating modern web technologies and user-centric design principles, SocialVibe aims to offer a seamless and enjoyable experience for sharing content, building communities, and staying connected with friends and family. This platform emphasizes user accessibility, and a feature-rich environment to cater to diverse social networking needs.

Live Site

You can visit the live site here: SocialVibe

Aim

The aim of SocialVibe is to:

Currently, SocialVibe allows users to:

In the future, I plan to enhance the platform by adding:

User Goals

SocialVibe aims to help users achieve the following goals:

User Experience

Target Audience

Design Details

Colors and Fonts Used

Font: Utilizes a readable font for the interface with appropriate fallbacks for different platforms.

Colors:

User Stories & Epics

All user stories were entered as issues in a GitHub Kanban project. Follow the link to see the project: Project Link

Epic 1: User Registration and Authentication

Epic 2: User Profile Management

Epic 3: Social Networking Features

Epic 4: Content Interaction

Epic 5: Future Enhancements

Design

ERD

Entity Relationship Diagram ERD

Wireframes

Home Page home screen
Login Page login page
Signup Page signup page
Edit Profile Form edit profile page
Profile Page profile page
Search Page search page
Friends Page friends page

Features

User Registration

Signup Desktop Signup desktop page
Signup Mobile Signup mobile page

User Login

Login Mobile login mobile page

Feeds

Feed Mobile feed mobile page

Profile Editing Form

Edit Profile Form Desktop edit-profile desktop page
Edit Profile Form Mobile edit-profile mobile page

Profile Page

Profile Page Desktop profile desktop page
Profile Page Mobile profile mobile page

Friend Management

Friends Page Mobile friends mobile page

Comment and Like Posts

Comment and Like Post Desktop search desktop page
Comment and Like Post Mobile search mobile page

Search Functionality

Search Page Desktop search desktop page
Search Page Mobile search mobile page

Future Features

Trends

Chat

People You May Know

FlowChart

SocialVibe Flow Chart Flow Chart of Social Vibe App

Generated by Lucidchart

Description

  1. Home Page: The starting point of the app.
  2. Login Page: Users can log in here.
  3. Signup Page: New users can create an account.
  4. Profile Page: Users can view and manage their profile.
  5. Edit Profile Page: Users can edit their profile details.
  6. Search Page: Users can search for friends and other content.
  7. Friends Page: Users can view their friends list.
  8. Feed Page: Users can view the latest updates and posts from their friends and connections.

Project Structure

This project utilizes Vite for fast development and React for building user interfaces.

React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It allows for the creation of reusable components which manage their own state, making it easier to develop and maintain complex UIs.

Reasons for using React:

Reusable Components

These components are created and reused across multiple pages of this application.

Pages

Contexts

Providers

All contexts are wrapped in the AppProviders component to provide global state management.

Bug

Issue Description

When a user manually types the URL of a feed in the browser without being authenticated, the feed form is visible, but the user cannot make requests due to the lack of authentication token.

FeedForm bug feed form bug

Proposed Solution

To address this issue, we can we either return null or a form based on the user's authentication status. The isAuthenticated flag is already available in the UserContext, which manages user authentication state throughout the application.

Implementation Steps

  1. Context Integration: Ensure isAuthenticated is properly managed in UserContext and accessible throughout the application.

  2. Conditional Rendering: Modify the rendering logic for the feed form component (<FeedForm />) to check the isAuthenticated flag before displaying the form.

    Solution:

    
import { useContext } from 'react';
import { UserContext } from './UserContext';

const FeedForm = () => {
 const { isAuthenticated } = useContext(UserContext);

 return isAuthenticated ? (
   <div>
     {/* Render feed form content */}
   </div>
 ) : (
   <></> // Render nothing or a placeholder if user is not authenticated
 );
};

export default FeedForm;

Technologies Used

Languages

Frameworks and Libraries

Tools & Programs

Agile Development

About

Agile development is adopted to efficiently manage the development process of the project, ensuring flexibility and iterative improvements.

User Story Template

Using GitHub issues, a user story template was created to define features and tasks for the project. The template categorizes tasks into three labels: must have, could have, and should have.

Userstory Template user story template

Kanban Board

The project's progress and task status are visualized through a Kanban board. Each task is represented as a card that can be moved across columns indicating its current status—todo, in progress, and completed.

Kanban Board

Example Kanban Board Example Kanban Board

MoSCoW Prioritization

MoSCoW prioritization technique is employed to prioritize project requirements based on their importance and urgency. This ensures that essential features are addressed first, followed by those of lower priority.

MoSCoW Prioritization Example MoSCoW Prioritization Example

Milestones

Milestones are set to mark significant stages or deadlines within the project timeline. Each milestone is linked with relevant issues and tasks to ensure alignment with project goals and deadlines.

Example Milestones Example Milestones

Testing

A separate testing document has been created as Testing.md

Deployment

Deploying the SocialVibe App on Heroku

Steps to Deploy:

  1. Login to Heroku:

    • Create an account or log in to Heroku at Heroku.

  2. Create a New App:

    • Click on New > Create new app in the Heroku dashboard.
    • Choose an app name and select the region.
    • Click on Create app.

  3. Configure Environment Variables:

    • In the app dashboard, navigate to the Settings tab.
    • Click on Reveal Config Vars.
    • Ensure all necessary environment variables are sets if needed.

  4. Add Buildpacks:

    • Go to the Settings tab.
    • Scroll down to Buildpacks and add the following buildpacks:
      • Node.js (if applicable)

  5. Deploy from GitHub:

    • Navigate to the Deploy tab.
    • Choose GitHub as the deployment method.
    • Connect to your GitHub account if prompted.
    • Search for and select the repository you want to deploy.
    • Click Connect to connect the repository.

  6. Automatic and Manual Deployment:

    • Choose whether you want to enable automatic deployments (from a selected branch) or manual deployments.
    • Click on Deploy Branch to deploy manually.

Cloning & Forking

Fork

  1. On GitHub.com, navigate to the zohaibshahzadkhan/SocialVibe-React-App repository.
  2. In the top-right corner of the page, click Fork.
  3. By default, forks are named the same as their parent repositories. You can change the name of the fork to distinguish it further.
  4. Add a description to your fork.
  5. Click Create fork.

Clone

  1. Above the list of files click the button that says 'Code'.
  2. Copy the URL for the repository.
  3. Open Terminal. Change the directory to the location where you want the cloned directory.
  4. Type git clone, and then paste the URL
  5. Press Enter.

Local Deployment

  1. On GitHub.com, navigate to the zohaibshahzadkhan/SocialVibe-React-App repository and clone it.
  2. Once you clone the repository you will need to install the node packages, you can do this by typing npm install into the terminal from root directory of the project.
  3. Run npm run dev from the root of the project folder to start local deployment server.

Credits

Learning Resources

Problem Solving

Design and Assets

Design Tools

Styling

This project wouldn't have been possible without the valuable resources and support from these platforms and communities. Thank you!