-
This course shows you how to create a web app by usign the MERN stack. This course is a great choice if you want to learn these technologies in a few hours. The videotutorial is split into small videos. All the videos are easy to understand. The next listing shows some of the topics that are covered during the course :
- Setting up React from scratch by using Webpack
- Making a connection to MongoDB with Nodejs and Express
- Creating a Model with Mongoose
- Handling forms with React
- Styling React app with React-Bootstrap
- Creating a Router
- Bundling code with React
- Creating a REST API from scratch
- Using Javascript Promises
- And much more...
Overview
Syllabus
-
- Welcome to the course on MERN stack
- Create a 'Hello World' web app with Nodejs and Express
- Configure an static web server with Nodejs and Express
- Creating the routes of the REST API
- Set up a database with MongoDB Atlas
- Connection to MongoDB Atlas
- Creating a model with Mongoose
- Body Parser
- Using a REST Client
- REST API : Creating an invoice
- Testing REST API : Creating an invoice
- REST API : Reading all invoices
- REST API : Reading one invoice
- Testing REST API : Reading one invoice
- Nodemon
- REST API : Deleting invoices
- REST API : Updating invoices
- Testing REST API : Updating invoices
- Webpack: Installing dependencies
- Webpack: Creating configuration file
- Webpack: Explaining configuration file
- React : Creating the first web app
- Setting up a Router with React
- Testing the Router
- Saving Components into different files
- Setting up and testing React Bootstrap
- Creating the first text field with React
- Creating a text field for the seller's name
- Testing seller's name text field
- Setting up four text fields
- Testing four text fields
- Setting up a textarea
- Testing textarea
- Create another textarea
- React Component: Displaying items and prices
- Testing React Component: Displaying items and prices
- React Component: Final Price
- React Component : Adding new item and price
- React Component : Adding new item
- Testing React Component : Adding new item
- React Button : Creating a new invoice
- Saving invoice's information into an object
- MongoDB: Saving information
- React : Setting up a dialog box
- React: Testing the dialog box
- React: Creating a table
- React : Custom Card Component
- Create invoice Layout
- MongoDB: Reading invoices
- Getting Ids and Descriptions
- Table of invoices
- React: Testing invoices table
- React: Testing how to delete an invoice
- React: Testing how to delete an invoice
- React: View invoice button
- React Router : Passing parameters to routes
- React: Single invoice component
- React: Single invoice layout
- MongoDB : Reading information
- Error Handling with React
- Crafting the invoice
- MongoDB: Displaying information
- React: Adding navigation button
- Improving invoice layout
- React : Creating Update Invoice Button
- Testing the Update button
- React Component: Update invoice
- Handling Errors: Updating invoice
- Using State Variables
- Crafting Update Form
- React : Updating invoice form
- Adding information to Form
- Fixing some errors
- Updating form: Fetch promise
- React : Dialog Box
- Updating invoice : Last improvements
- Navigation Button: Updating invocie
- Homepage
- Adding some navigation buttons
- Production code with Webpack
- Testing App