/buddy-zone

A Social Media web App built with ReactJs

Primary LanguageJavaScript


Buddy Zone Logo
Buddy Zone

Social Media Web Application

About Buddy Zone

  • Buddy Zone is a platform where you can connect to people and get updates from them and stay loved.
  • In this App, users can Signup/Login into their own account with right credentials and get connected with peope online.
  • Additionally we have implemented various main features such as Create post, Edit Post, Delete Post, Follow/Unfollow User etc.

Live Deployment: Buddy Zone

Desktop View

image

image

Mobile view

User Profile Page Bookmarks Page
image image

Features

  • Posts Feed Page (public page), with navigation bar, header image, and various Posts by users. User can easily navigate to the post they want and like, Comment and Upvote it.
  • Single Post Page (private page), Here the user can see the details of a single post like Comments and Upvotes/Downvotes and Likes/Dislikes .
  • Bookmarks page (private page) - from this page User can view all of his Bookmarked posts.
  • Profile Page, (private page), consists of all details like his Bio, Followers, Profile-picture and Cover-page of the user is logged In.
  • 404 Page - Added 404 Page Not Found.
  • Added Responsiveness for nearly all devices from 350px onwards 🎉
  • Loaders & Alerts: Loaders are added when products are fetching, React Toastify is used for alerts message
  • Note:- 'Public Page'- Opens without Authentication, 'Private Page' - Opens only if user is Authenticated otherwise opens Login Page.

Tech Stack and Tools

  • CHAKRA-UI for components and styling.
  • React JS
  • React Router v6
  • React Context API + useReducer
  • Backend setup using MockBee
  • Used Async Await and Axios for API Request Calls.
  • Netlify for Deployment
  • React Toastify for alerts.

Issues & Suggestions

  • If you face any issues while using the app, then you can surely raise issue on this repo.

  • You can also give your valuable suggestions/ feedback to improve this project via Twitter DM.

Connect with me: