In todays age in technology it is important to always stay current and up to date in terms of development stacks. The MERN stack is an ever popular and growing stack which consists of MongoDB, Express, React, and NodeJS. While NodeJS is becoming more and more popular, JavaScript is starting to take a back seat in the industry to TypeScript. Unfortunately, setting up all the technologies of the MERN stack with TypeScript is not as cut and dry as it should be, which is why I came up with this tutorial to get beginner web developers a step in the right direction with modern technologies.
In this course we are going to gain a fundamental understanding of the MERN stack by building a full stack application that I call Library Management System. Unlike other courses on Udemy, we will be building something more powerful than a simple Todo Application and I am going to walk you through every step. Including setting up the NodeJS project with TypeScript, setting up routes on the server, creating the React application with TypeScript, setting up Redux and more. By the end of the course you should feel confident enough to not only put this project on your portfolio, but also expand upon the project with new features all by yourself from the experience gained.
-
1
IntroductionIntroducing myself and why I created this course, as well as where you can find more of my content paid and for free. Included in this course is the source code to the project we build to learn the MERN stack.
-
2
Project Demonstration
Walking through the project that we plan to build, and talk about each of the feature we will implement through the process.
-
3
Prerequisites
Walking through the prerequisite technologies and hardware that is needed to completed the project, as well as where and how to get any of the technologies needed for the project.
-
4
What is NodeJS
Learn the basics of what NodeJS is and how write and run a simple NodeJS project.
-
5
What is TypeScript
Learn the basics of TypeScript, including variables, interfaces, types, how to compile and run programs.
-
6
What is MongoDB
Learn the basics of MongoDB and why it is a popular choice for projects like this.
-
7
Basic Project Setup
Setup the NodeJS project structure with TypeScript.
-
8
What is Express
Learn what what ExpressJS is, and how to setup a basic Express server.
-
9
What is Mongoose
Learn the basics of Mongoose as a ORM, and how to setup a database connection to the NodeJS application.
-
10
Project User Stories
Walk through the proposed project user stories.
-
11
Setup User Model
Write the model that represents the users that will be using the application and to be stored in our MongoDB database.
-
12
Posting a User
White the code that allows us to create and store a new user on the backend.
-
13
Logging in a User
Write the code that allows us to get a user by their email and password and log them into our system. This allows the user to use the application.
-
14
What is React
Learn the basics of React with TypeScript. Including how to create a project, how to create components, how to style the components, and more.
-
15
What is Redux
Learn the basics of Redux and how to setup the state management system.
-
16
Login and Register Modal
Write the code on the frontend that creates a popup modal for the user to choose to login or register an account.
-
17
User Registration
Write the code on the frontend that allows users to register an account.
-
18
Complete User CRUD
Finish writing the code on the server side for Creating, Reading, Updating, and Deleting user models.
-
19
React Routing
Install React Router Dom and setup routing to different pages in the application.
-
20
Profile Page
Write the code to display the the users profile page on the application.
-
21
Book Functionality
Write the server side code that allows for books to be created, read, updated, and deleted from the database.
-
22
Home Page
Write the frontend code to display the applications home landing page.
-
23
Loading Book Data
Manually load book data into the database so we have more information to use in our application.
-
24
Catalog Overview
Write the code for the Catalog overview page of the application.
-
25
Querying Books
Write the code on the server side to be able to query a book based off of many of its different properties.
-
26
Catalog Search
Write the code to search the book catalog on the frontend application.
-
27
Server Side Library Card Functionality
Write the code which implements the library card logic that allows patrons to create and retrieve their library card on the server side.
-
28
Library Card Modal
Write the code that allows patrons to create and retrieve their library card information on the frontend.
-
29
Server Side Book Loaning Functionality
Write the code that allows employees to loan and check in resources to patrons on the server side.
-
30
Item Loan Modal
Write the code that lets the employees check out and check in a resource to a patron on the frontend.
-
31
Resource Page
Write the code to create the resource page which displays information about the selected book.
-
32
Profile Records
Write the code to display the patrons loan history on their profile page.
-
33
Debugging Profile Page
Investigate and fix a bug that popped up in the profile page during development of the application.
Lessons:
