A MERN full stack social media web application that uses redux In this project, I explored how to fully build a MERN stack web application. MERN stands for MongoDB, Express, ReactJS, and Node.JS. Along with the above technologies, i also used redux to enable my application to scale well in the future, if i decide to add additional functionality.

The above shows an initialized cluster on the MongoDB atlas platform. This is very convenient as there is no need to host a local MongoDB database on a server and deploy it.

Routes used:

router.get('/', getPosts)
router.post('/', createPost)
router.patch('/:id', updatePost)

The above use the CRUD model.

Controllers corresponding to the routes:

Note

async  await

are used as database accesses are asyncronous and we cannot guarantee timing

.
├── App.js      
├── actions     
│   └── posts.js
├── api
│   └── index.js
├── components       
│   ├── Form
│   │   ├── Form.js  
│   │   └── styles.js
│   └── Posts        
│       ├── Post     
│       ├── Posts.js 
│       └── styles.js
├── images
│   └── ShareIt.png  
├── index.css        
├── index.js
├── reducers
│   ├── index.js     
│   └── posts.js     
└── styles.js

Structuring this way is done due to redux. By following the actions, reducers, api, and components structure, adding additional features are straighforward. This promotes scalability

#Client - Actions and Reducers

reducers

actions