Social App

React Responsive, Fullstack, Social App. We will be using MongoDB, Express, node, React, Material UI, Formik, Yup, and Redux Toolkit to build this entire application. This application will allow you to created you user, login with a token validation and post, add friends, like post, and see other posts.
Explore the site »

View Demo · Report Bug · Request Feature

🌟 About the Project

Engage with friends, share posts, and interact through comments and likes within this social app.

Project Technological Stack:

• MongoDB: A NoSQL database used for storing and managing data efficiently.
• Express: A backend web application framework for Node.js, aiding in server-side development.
• Node.js: A JavaScript runtime for building scalable and robust server-side applications.
• React: A frontend library for crafting responsive and dynamic user interfaces.
• Material UI: A UI framework offering pre-built components for a consistent design.
• Formik: A library for handling forms and form validation in React applications.
• Yup: A schema validation library used in conjunction with Formik for form validation.
• Redux Toolkit: A state management library ensuring predictable state updates and application-wide data handling.

Features:

•  Authentication: Secure logins with token-based authentication.
  

•  Post Interactions: Create, like, and comment on posts.
  

•  Friend Management: Add, remove, and manage friends.
  

•  Form Handling & Validation: Seamless form management and validation.
  

•  Responsive UI: Visually appealing and responsive design across devices.
  

•  State Management: Predictable data handling with Redux Toolkit.
  

•  Backend Development: Scalable backend built on Express with Node.js.
  

•  Database Management: Efficient data storage using MongoDB.
  

Getting Started

Prerequisites

**Note**: This app requires API key from MongoDB Account

1. Download Node.js and npm (follow instructions here)

2. Git clone and cd into the repo folder:

https://github.com/Carlosaj18/Fullstack-React-Social-App.git && cd sicial-App-clone

3. Install all dependencies

npm install

4. In root directory of the server, create a .env file

.env

5. In the .env file, create following environment variables:

PORT = 3001
MONGO_URL = YOUR_MONGO_API_KEY
JWT_SECRET = YOUR_JWT_SECRET

6. Run the server

npm start
#for deployed version

npm run dev
#for deployed version

7. Run the client

npm start
#for deployed version

npm run dev
#for deployed version

8. Access the project in your browser at http://localhost:3000/

Demo & Showcasing:

📷 Screenshots

SocialApp.mp4

Data Model

Live Site

• Social App is a responsive web app can be viewed on any device.

Contact

(back to top)