Create a web app with React, MongoDB, Express and Nodejs

Course Curriculum

Chapter 1: Creating the BACKEND

Lecture 1: 'Hello World' web app with Nodejs

Lecture 2: Configure an static web server with Nodejs and Express

Lecture 3: Create the REST API routes

Lecture 4: Set up a database with MogoDB

Lecture 5: Connection to MongoDB with Nodejs and Express

Lecture 6: Creating a Mongoose Model

Lecture 7: Body Parser

Lecture 8: Installing the REST Client

Lecture 9: Configure REST API : creating an invoice

Lecture 10: Testing REST API : save information into the database

Lecture 11: REST API : read all information from the database

Lecture 12: Configure REST API : read one invoice

Lecture 13: Testing REST API : read one invoice

Lecture 14: Nodemon

Lecture 15: Configure REST API: delete information

Lecture 16: Configure REST API: update infromation

Lecture 17: Testing REST API: update information

Chapter 2: Configure React using Webpack

Lecture 1: Configure React with Webpack: installing dependencies

Lecture 2: Configure React with Webpack : configuration file

Lecture 3: Configure React with Webpack : explanation

Chapter 3: Creating the FRONTEND

Lecture 1: Create your first web app using React

Lecture 2: Create a router with React

Lecture 3: Testing Router

Lecture 4: Saving Components into different files

Lecture 5: Setting up and testing React Bootstrap

Lecture 6: Creating a text field with React

Lecture 7: Create a custom text field with React

Lecture 8: Testing the text field for the seller's name

Lecture 9: Setting up more text fields created with React

Lecture 10: Testing four text fields created with React

Lecture 11: Creating a textarea with React

Lecture 12: Testing whether the textarea works

Lecture 13: Creating another textarea with React

Lecture 14: Display items and prices with a React component

Lecture 15: Testing the component that displays items and prices

Lecture 16: Create a React component that diplays the final price

Lecture 17: React component for adding new item and price

Lecture 18: Create a React component for adding a new item and price

Lecture 19: Testing the React component for adding a new item

Lecture 20: Adding a button to create an invoice

Lecture 21: Storing the information into an object

Lecture 22: Saving invoice into MongoDB

Lecture 23: Setting up dialog box with React

Lecture 24: Testing the dialog box created with React

Lecture 25: Creating a layout with React

Lecture 26: Custom Card component

Lecture 27: Last improvements to the layout

Lecture 28: Reading information from MongoDB

Lecture 29: Getting Ids and Descriptions of the invoices

Lecture 30: Creating a listing of invoices with React

Lecture 31: Testing the invoices table

Lecture 32: Deleting invoices from the database

Lecture 33: Testing how to delete an invoice

Lecture 34: View Invoice Button

Lecture 35: Passing parameters to the routes

Lecture 36: Display a single invoice with React

Lecture 37: Creating the layout of a single invoice

Lecture 38: Reading information from MongoDB using Javascript

Lecture 39: Handling errors with javascript promises and React

Lecture 40: Completing the invoice layout

Lecture 41: Completing the invoice webpage

Lecture 42: Adding a navigation button with React

Lecture 43: Improving the layout of the invoice

Lecture 44: Creating Update Invoice button with React

Lecture 45: Testing the update button created with React

Lecture 46: Creating the Update Invoice Form with React

Lecture 47: Handle errors with React

Lecture 48: Saving information into state variables

Lecture 49: Completing the form used to update information

Lecture 50: Update invoice form created with React

Lecture 51: Adding information to the form dinamically

Lecture 52: Last improvements to Update Invoice form

Lecture 53: Updating information by using a javascript promise

Lecture 54: Set up a dialog box by using React

Lecture 55: Completing the Update Invoice form

Lecture 56: Adding navigation button with React

Lecture 57: Creating a Homepage with React

Lecture 58: Adding more navigation buttons

Lecture 59: Creating the production code

Lecture 60: Testing the web application