React Node CMS (Content Management System)
[Live Demo](https://mern-stack.com/)

> This course is in the making. New lessons are added daily.

- Suitable for all levels including beginners
- Each line of code explained
- Complete backend with full authentication including password forgot/reset emails
- Posts, categories, media library, user management, access control and so much more..
- React frontend with NextJs for better SEO and page speed
- Extensive admin dashboard (similar to WordPress CMS)
- Source code for almost each lectures
- Checkout the live demo to experience all features

Ryan Dhungel

Introduction

Project demo (front)

Project demo (dashboard)

Are you ready for this course?

Code editor

Using live demo as a guide


** Download Source Code from Github **

Before you start coding, I recommend you to download source code from Github. Almost all lectures have source code. 

Which means you can always checkout the source code while coding and see/compare with ours to figure out any issues. 

You can also copy paste code snippets whenever necessary. You can click to download as ZIP file or use git clone to clone it into your computer.

The source code is divided into 3 different repository.

Code from Lecture 10 to Lecture 43
[https://github.com/kaloraat/merncms-code1](https://github.com/kaloraat/merncms-code1)

Code from Lecture 48 to Lecture 136
[https://github.com/kaloraat/merncms-code2](https://github.com/kaloraat/merncms-code2)

Code from Lecture 137 to Lecture 185
[https://github.com/kaloraat/merncms-code3](https://github.com/kaloraat/merncms-code3)


DOWNLOAD SOURCE CODE

Initialize a project using npm

React NextJs project setup

Ant design and custom app component

Trying ant design component

Global context theory

React hooks

Accessing context

Toggle theme context

Static folder for css files

Menu component

Next link to navigate between pages

Layout component

Sidebar class to functional component

Admin menu

Menu icons

Set current url

Set active link

Auto collapse menu based on window width

Ant design form theory

Understanding grid and columns

Signup form

Signin form

Generate auth server

Understanding server and get requests

Understanding server and post request

Signup to mongo atlas

Signup to sendgrid

Axios post request and debugging

Save user in database

Toast notifications and loading

Auth context

Using context and local storage

Env file and axios configuration

Signin backend

Signin frontend

Signout

Conditional rendering and reset fields

How forgot password works (theory)

Forgot password request

Forgot password response

Implement reset password

Trying reset password

Admin categories page

Category create form

Category schema

Category route and controller function

Middleware explained

Request headers

Require signin middleware

Create category

isAdmin middleware

Role based redirect

Protecting admin pages

Loading state

Current admin endpoint

Protecting page based on server response

Categories list server

List of categories client

Ant design columns layout

Delete category

Update category server

Using modal component

Updating category on modal

Complete category update

Editor preview and posts page

Installing rich markdown editor

Styling editor

Post title and content in local storage

Load categories

Multiple select

Rich text editor upload image

React image resize and resolve editor issues

Using cloudinary

Uploading image

Post preview

Handle publish

Post route and schema

Save post in database

Creating posts

All posts server

List posts client

Why we need post context (theory)

Lifting state posts

Lifting state categories

Wordpress inspired media library

Featured image modal

Media components

Upload component

Sending image as form data

Save media in database

Drag drop multiple upload

Media context

Uploaded image preview

React Node CMS (Content Management System)

Building IOS and Android apps with React Native from Scratch. This course will have everything you want to learn before being able to build real world apps for IOS and Android.

### Some of the topics covered:
- Basics to advance react native
- Learn authentication, reset password, image uploads, UI design, flexbox, navigation, scrolling, keyboard inputs, styling and more
- Build your own backend API using Node.js
- Practical real world project that covers almost everything you need to know to comfortably start developing your own native apps

Project demo

About the course

Expo, IOS and Android simulators

Installing react native and trying in simulators

All the lecture's source code is available in Github. Please download the ZIP file or clone the repo from the following link:

[https://github.com/kaloraat/react-native-nodejs-mongodb](https://github.com/kaloraat/react-native-nodejs-mongodb)

Download source code from Github

Understanding native components

Flex layout and positioning

Components, props and destructuring

Splash screen logo

Webview

Starting the project

Text component

Input component

Reusable component

Updating the state

Customize text input

Button using touchable opacity

Using axios

Image component

Scroll view

Signin screen

Navigation

Navigator options

Kaloraat auth API generator

Understanding authentication server

Successful  signup and signin

Localhost on the web for trying on the actual device

Error messages

Async storage

Update context and configure axios

Footer tabs

Font awesome icons

Root navigation

Protecting screens

Sign out

Account screen

Post and links screens

Active screen tab

Display user info

Setup account screen

Reusing circle logo component

Image upload icon

Display image and upload icon

Signup to cloudinary

Access image library using expo image picker

Sending image to server for uploading

Axios headers with token

Include token in axios headers by default

Handling expired token

Upload image to cloudinary

Save user image in database

Updating user in context and async storage

Password update client

Password update server

Forgot password screen

Send password reset email

Allow user to login with new password

What's next?

Post link page

Text input for post link

Text input for post title

Open graph web scraping client side

Url preview

Preview card image

Preview card title and description

Link model and schema

Post link route and controller

Post request to create post link

Link context

Recent links

Route params (optional)

Link view

React native webview

Open webview on press

Implement view count

View count icon on preview card

View increment client side

Like unlike server

Like unlike client

Icon set component

Applying shadow

Date and user icons

Public profile with route params

Profile screen

Background image

Default preview image

Get user public profile

User profile and user links response

User info on user profile

Render user links on profile

Links screen

Allow delete link

Delete link and update local and global state

Signout feature in account screen

React Native IOS & Android Apps with NodeJs and MongoDB

Your Developer Journey Starts Here..

React Node CMS (Content Management System)

React Native IOS & Android Apps with NodeJs and MongoDB

React NodeJs SocketIo Realtime Chat App with Public and Private Rooms

Creating Apps w/Node.js & MongoDB

React Image Slider (Carousel) App

Build E-learning Marketplace like Udemy with Next.js React Node MongoDB and Stripe

React Blog App for Beginners