https://github.com/4x3l3r8/chapchap
Social Media Application with chat functionalities
https://github.com/4x3l3r8/chapchap
axios context-api css3 expressjs mern-stack mongodb mongoose node react reactjs real-time rest-api socket-io
Last synced: 2 months ago
JSON representation
Social Media Application with chat functionalities
- Host: GitHub
- URL: https://github.com/4x3l3r8/chapchap
- Owner: 4x3l3r8
- Created: 2022-08-24T03:02:57.000Z (almost 4 years ago)
- Default Branch: v2
- Last Pushed: 2024-06-26T19:11:55.000Z (almost 2 years ago)
- Last Synced: 2025-02-03T14:13:07.045Z (over 1 year ago)
- Topics: axios, context-api, css3, expressjs, mern-stack, mongodb, mongoose, node, react, reactjs, real-time, rest-api, socket-io
- Language: JavaScript
- Homepage: https://chapchap-social.netlify.app/
- Size: 3.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> # 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](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/](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](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