ChapChap Social app v2

-- NB: This project is an assessment for a job, didn't start as so but became so.

This project was built on MERN stack (Vite React amd Express)

How to run locally

Requirements: Node@v16, NPM@v8

Clone the project locally to your system. Open the cloned folder in your code editor of choice and run npm install in the root folder and 'client_v2' folder to install the project dependencies for both frontend and backend.

Available Scripts

In the project directory, you can run:

npm run dev

Runs the app client and server concurrently in the development mode on ports :5147 and :8800 respectively.
send requests to http://localhost:port to communicate with API.

npm run server

Runs the app server in the development mode.
send api requests to http://localhost:8800/api/ to view responses on client side.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run client

Runs the app client in the development mode.
send requests to http://localhost:5147 to view web app in brower.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Approach

This project was built as an almost full-fledged social application. Users can follow other users to see their posts, can create and join groups
see active users and receive messages in real-time. APIs use basic JWT authentication. Logic on the frontend are kept in the hooks out of the components as much as possible to avoid duplicating code.(Exceptions were made when it came to dealing with socket connection to avoid loops)

This project's frontend was started a long time ago using create-react-app and normal CSS for styling but was redeveloped using vite.

- Technologies used

• Frontend

  • Vite - React
  • Redux - for state management and data fetching caching and invalidation (since this could potentially be a big project, if not context API and react-query would have sufficed).
  • React-router-dom for routing
  • Socket-io for realtime messaging
  • Chakra-UI for styling.

• Backend

  • MongoDB for database
  • Mongoose as ORM
  • Express.js for server
  • JWT authentication

  ===== Heads-up: Sometimes you might have to refresh your page after logging it to get see active users(probably due to it timing out or disconnecting, not enough time to troubleshoot)

=======================================================

Future Features

• Real-time Notifications
• Email authentication
• Location posting