Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arthurdsant/mern.in
This application consists of a social network based on LinkedIn using stacks from the 'MERN' group (MongoDB | Express.Js | React | Node.Js). It has a responsive and dynamic layout, allowing the user to make friends, create posts and visit other profiles.
https://github.com/arthurdsant/mern.in
express expressjs javascript mongodb mongoose nodejs nodemon nodemon-express react react-router redux redux-store
Last synced: 6 days ago
JSON representation
This application consists of a social network based on LinkedIn using stacks from the 'MERN' group (MongoDB | Express.Js | React | Node.Js). It has a responsive and dynamic layout, allowing the user to make friends, create posts and visit other profiles.
- Host: GitHub
- URL: https://github.com/arthurdsant/mern.in
- Owner: ArthurDSant
- Created: 2024-06-15T03:20:42.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-04T19:29:02.000Z (5 months ago)
- Last Synced: 2024-10-31T09:42:41.986Z (19 days ago)
- Topics: express, expressjs, javascript, mongodb, mongoose, nodejs, nodemon, nodemon-express, react, react-router, redux, redux-store
- Language: JavaScript
- Homepage:
- Size: 8.65 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mern.In
This application is a fake social network with the purpose of studying Redux, React Router, Mui and MongoDB. With a simple design based on the Mui library, I was able to focus on business rules and structuring the project in Redux, which was my biggest challenge since it was my first contact with this library.
I was able to learn a lot about each of the technologies used and how to maintain good practices in a larger application compared to my old projects. I had my first contact with MongoDB as an application database and was able to learn how structuring works in a document-oriented database.
## Stacks
### Front End
    
### Back End
   
## Features
- Dark and light themes
- Responsive UX/UI Design
- Front End structured in React
- Back End structured in MondoDB and Node.Js
- For navigation between Login, Home and Profile screens using React Router
- Allow the browser to remember user login and visual changes such as theme using Reduce
- Adding friends and creating posts using Redux
- Mui used for assertive and agile styling based on library presets
- MongoDB used to structure the document-oriented database
- Express to scale the API that controls the Database
## Learnings
 How to manage the states of a scalable application, using its functionalities. Store, storing the application state centrally so that all components have access; Actions, to represent events or intentions making it possible to send data to the 'Store'; reducers,
which receive the state of the 'Actions' as an argument to return a new state without modifying the previous one. In this project I was able to learn how states are used and how a project is structured based on the Redux library.
 Material Design is a library developed by Google that includes pre-defined guidelines for typography, shadows, spacing, icons, or even entire components. In this project I had my first contact with this library that aggressively speeds up development, Many changes can be made in just a few lines of code, allowing a greater focus on business logic instead of reinventing the wheel countless times. The functions I used most were < Container > < Box > < typography > < InputBase > < IconButton > < Divider > < ThemeProvider theme={theme} > sx={{ }}
  How a document-oriented database is structured. The first difference is creating 'Collections' instead of 'Tables', allowing each document to have its own organization, making one different from another within the same 'Collection', although it is not ideal, it is interesting to know that this possibility exists.
MongoDB allows the creation of 'Schemas' which are sets of field rule definitions, their contents and validation of possible values, which makes more rigid use possible if necessary. Furthermore, MongoDB is supported by Node.Js, C#, Go, Java, PHP, Python...
And the use of 'Nodemon' to drastically increase productivity during development, automatically restarting the server whenever changes to application files are detected.
## Installation
### cd client
```bash
npm i react-router-dom
npm i react-redux @reduxjs/toolkit redux-persist
npm i react-dropzone
npm i dotenv
npm i formik
npm i yup
npm i @mui/material @mui/icons-material
npm i @emotion/react
npm i @emotion/styled
```
### cd server
```bash
npm i -g nodemon
npm i mongoose
npm i express
npm i body-parser
npm i bcrypt
npm i cors
npm i dotenv
npm i gridfs-stream
npm i multer multer-gridfs-storage
npm i helmet
npm i morgan
npm i jsonwebtoken
```
### Open server
```bash
(git bash)
cd server
nodemon index.js
```
## Screenshot
### Light Mode
### Dark Mode
