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

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

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