Build a COMPLETE Fullstack Responsive MERN App with Auth, Likes, Dark Mode | React, MongoDB, MUI
Links:
Material UI: https://mui.com/material-ui/getting-started/installation/
Redux Toolkit: https://redux-toolkit.js.org/introduction/getting-started
React Router: https://reactrouter.com/en/v6.3.0/getting-started/installation
Redux Persist: https://github.com/rt2zz/redux-persist
React Dropzone: https://react-dropzone.js.org/
Node: https://nodejs.org/en/download/
Nodemon: https://github.com/remy/nodemon
NPX: https://www.npmjs.com/package/npx
VsCode: https://code.visualstudio.com/download
Dotenv: https://github.com/motdotla/dotenv
MongoDB: https://www.mongodb.com/
Mongoose: https://github.com/Automattic/mongoose
JsonWebToken: https://github.com/auth0/node-jsonwebtoken
Multer: https://github.com/expressjs/multer
GridFS-Storage: https://github.com/devconcept/multer-gridfs-storage
Google Fonts: https://fonts.google.com/
Formik: https://formik.org/docs/overview
Yup: https://github.com/jquense/yup
Code
completed code: https://github.com/ed-roh/mern-social-media
assets file: https://github.com/ed-roh/mern-social-media/tree/master/server/public/assets
input data file: https://github.com/ed-roh/mern-social-media/blob/master/server/data/index.js
theme file: https://github.com/ed-roh/mern-social-media/blob/master/client/src/theme.js
———————————
Subscribe to my channel: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1
for more web development and web 3.0 blockchain tutorials!
———————————
Who is EdRoh? I’m a lead engineer for a publicly traded company and have been developing for a decade now.
I’m here to provide you in-depth tutorials by simplifying difficult concepts and more importantly, getting your hands dirty by building production level projects with ease to impress your future/current employer or clients.
======
Chapters:
0:00 Build a Fullstack MERN React Responsive Social Media Application from Scratch
5:07 Backend Installation of Node, Visual Studio Code, and Backend Packages
7:44 Backend Configurations and Middleware Setup
16:06 MongoDB Registering, Installation and Setup
21:31 Data Modeling and ERD Diagrams
26:08 Authentication and Authorization in Node
59:07 User Routes Setup
1:13:33 Post Routes Setup
1:36:20 Backend Data Add and Demo
1:42:20 Frontend Installation and Setup
1:48:34 React Redux File Folder Architecture and React Router
1:56:10 Redux and Toolkit Installation and Setup
2:10:56 Color, Theme, Dark Mode, and Styling Setup
2:26:16 Navbar
2:48:37 Register, Login Pages, and Form
3:34:44 Home Page and Widgets
4:04:17 Posts and Post Widgets
5:19:41 Profile Page
5:27:08 Full Stack MERN React Application Complete