Now is the best time to learn programming. You can choose from numerous learning resources, reference guides, or tutorials. Once you are familiar with the core principles and syntax, the next step is to build your own web application. However, at this point, the knowledge that you've acquired is fragmented. You've learned pieces of information here and there, but you haven't seen all that information used in one application. And here we are.
This is a documentation of how to create a middle-level web application in MERN stack from scratch. We cover every step in detail and walk you through the entire process starting from 0 lines of code and end up a couple of thousand lines of code. In the end, you will have a big example that helps you connect all of your knowledge together, and also hopefully inspires you to build your own app based on this app.
A demo is worth a thousand words: Demo App
- User management and login flow
- State management with redux
- CRUD for blogs, reviews and emoji reactions
- Error handling and notification
- Relationship between users (managing friends)
- Chat room (global room and individual chat)
- Email Template and settings
- And more..
We will use a already deployed backend API which you will learn soon (the server side):
https://social-blog-cs.herokuapp.com
Let's get started:
Project setup
Basic Features
- User can see a list of blogs in the home page
- Redirect on successful async redux action
- User can register a new account
- User can log in with an account
- User can log out
- Persist login state on refresh
- The Blog Detail Page
- User can write review to a blog
- User can give an emoji reaction to a review or a blog
- Authenticated user can create/edit/delete blogs
Project setup
- Setup with express-generator
- Project structure
- Design the endpoints
- Design database schema
- Adding Mongoose middlewares
- Create Postman collection
Basic Features