React Social-Net App

MERN project - a multi-page social-net app. The application receives data through rest api requests. The social network receives a list of users and information about users. Message exchange is implemented via a web socket.
This course is on the YouTube channel it-kamasutra.

Front-End (REACT-REDUX)

Technologies used

• React single page application
• TypeScript - a strongly typed programming language
• Routing done using React Router
• Hooks
• API via Axios and WebSocket
• Store: Redux, Redux-Thunk, Reselect
• Design: Ant Design
• ... [other technologies]

Setup

1. Clone the repository and install the dependencies

yarn install

2. Start the frontend application locally

yarn start

3. For Login use this:

Email: free@free.com Password: 12345

Testing

The testing strategy for this project is based on Jest: test runner developed by Facebook, it ships with create-react-app. It is also used to mock some of the modules that are required on the tests.

The more your tests resemble the way your software is used, the more confidence they can give you.

How to run tests

To start watch mode, just do:

yarn test

It is suggested that you keep your terminal opened while in watch mode. As you edit your code, your tests will be automatically re-run. Look at the terminal for more instructions on the watch mode usage.

Routes

This project is using react-router-dom.

There are several routes to navigate to different pages of the app:

• Profile - user info page.
• Friends - users list with sorting
• Chat - websocket public chat

State management

Redux whith Redux-thunk middleware.

This app was bootstraped based on the template provided by create-react-app

---

Back-end (NODE.JS, EXPRESS, MONGODB)

It contained register page also

Technologies used

• Node.js JavaScript Runtime
• TypeScript - a strongly typed programming language
• Express - web framework for Node.js
• Mongoose - elegant mongodb object modeling for node.js
• Multer, Sharp - save and compress images
• Jsonwebtoken - decode, verify and generate JWT
• Cloudinary - Image and Video API
• Http-errors - handle all errors
• ... [other technologies]

Authorization

JWT token in header

Test deployment

The clientSN branch deploys to https://snoapp.netlify.app
The serverSN branch deploys to https://snoapi.herokuapp.com