twipple

twipple is a Social Media App where you can share posts and learnings.

How to run the app locally?

$ git clone https://github.com/karthikgoud/my-social-media-app.git
$ cd my-social-media-app
$ npm install
$ npm start

Screens in this project

• User Feed / - Home Page
• User Profile
• Explore Feed
• Bookmark page
• Authentication
  • Sign-up
  • Login
  • Logout

Features

• Authentication using JWT for Login and Signup Pages. All the below features are present after login.
• User can create, edit and delete the post.
• Image, Video and Emojis can be added to the Post.
• User can like or unlike any post.
• User can add or remove post from bookmarks.
• Home Page where user can see their posts and the posts of friends followed by user. Trending and Latest Feature where user can sort the posts based on maximum likes and by date.
• Explore Page where all the posts will be visible.
• Infinite scrolling on Explore Page while fetching posts.
• Bookmarks Page where all the posts bookmarked by user will be visible.
• User can follow or unfollow other users.
• Profile Page where user can edit their profile. It contains details like Avatar, Bio and Portfolio URL. User can edit the profile.
• User can view the profile of other users as well.
• Search Functionality for users.
• Loader is shown while the posts are fetched.
• Alerts in the app to notify post is bookmarked or not.

Tech Stack and Tools

• React
• React Context API + useReducer
• React Router v6
• Vanila CSS : CSS module for styling
• Git For Version Control
• Netlify for Deployment
• Cloudinary for Image and Video Storage

Live Link

https://twipple.netlify.app/

Demo Video

https://www.loom.com/share/ea7e188c6d784cdc83d6af1e14db103b?sid=0d9a12fd-5796-4c11-bae4-ad70bbfdce80