myspace🚀

A social media web app.

Table of Contents

• Getting Started
• Live link
• About
• Technologies used
• Features
• Screenshots
• Connect with me

Getting Started

• Clone the repository on your local machine with the command below in your terminal, and cd into the evolt-social folder

https://github.com/rohanmathur91/evolt-social.git

cd evolt-social

• Install dependencies (if you are using yarn then do with that)

npm install

• Create a .env file at the root level of the directory (at the level of package.json) and create a environment variables

REACT_APP_TEST_USERNAME = rohanmathur
REACT_APP_TEST_PASSWORD = rohanmathur@123
REACT_APP_JWT_SECRET = <JWT_SECRET_KEY_OF_YOUR_CHOICE>
REACT_APP_CLOUD_NAME = <YOUR_CLOUD_NAME_FROM_CLOUDINARY>
REACT_APP_UPLOAD_PRESET_NAME = <YOUR_UPLOAD_PRESET>

• Start the server🚀

npm start

Live link

https://evolt-myspace.netlify.app

About

• myspace is a social media web app for people to connect with each other.
• Users can share pictures with others, upload, like, comment, and bookmark the posts. Follow each other and be connected.

🛠 Technologies used

• ReactJS
• Redux Toolkit
• React Router
• Tailwind
• Mockbee for backend

Features

User/Home Feed:

• User will able to see all his posts and post of the people he/she follow.
• Feed can be sort based on recent and trending posts.
• User/Home and Explore feed has infinite scroll.

Explore Feed

• All the new users posts will be shown over here.

Search

• User can search other users and follow them if not followed.
• Implemented debounce for search.

Post

• User can add, like/unlike edit, delete, and bookmark a post.
• Each post can be viewed on single page where user can comment and can edit or delete the comment.
• Post can consist of text, image or gifs.

Profile

• User can view there profile or any other users profile.
• Each user can edit there profile.
• From someones profile logged in user can follow there following or follower users.

Authentication

• myspace has login, signup and logout feature.
• A new user can also login using test credentials.
• For Signup, form validation is done for all the fields.

Dark mode

• Has light and dark mode.

Screenshots

👨‍💻 Connect with me