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

Name: Create a web app with React, MongoDB, Express and Nodejs
Rating: 4.5 (16 reviews)

Learn full-stack MERN is a few hours

Created byAmazing Tutorials

Last updated 12/2019

English

What you'll learn

Understand how to create a web application with the MERN stack.
Create a database with MongoDB and store it in the cloud.
Create a REST API with Nodejs and Express.
Get information from the web server by using javascript promises.
How to configure React by using Webpack from scratch.
How to use a REST Client
How to add CSS styles to React applications.
How to set up a router with React from scratch
How to create your own React components from scratch.

Course content

3 sections • 80 lectures • 15h 20m total length

'Hello World' web app with Nodejs13:56
On this lesson the application is set up and a 'Hello World' web app is created.
Configure an static web server with Nodejs and Express5:33
Configure an static web server with Nodejs and Express.
Create the REST API routes13:56
Create the REST API routes with Nodejs and EXpress.
Set up a database with MogoDB10:47
Create a database with MongoDB.
Connection to MongoDB with Nodejs and Express13:33
Connect the web app to MongoDB.
Creating a Mongoose Model11:24
Create a Mongoose model by defining a schema with required fields such as name, address, customer details, date, and an items array, then export the model for a MongoDB collection.
Body Parser5:10
Add bodyParser to the web app.
Installing the REST Client4:35
Learn what a REST Client is used for.
Configure REST API : creating an invoice13:30
Learn how to save information to the database with a REST API.
Testing REST API : save information into the database6:53
Testing whether the REST API can save information.
REST API : read all information from the database13:33
Configure the REST API to read all the infromation from MongoDB.
Configure REST API : read one invoice8:47
Make the REST API read one invoice from the database with Nodejs and Express.
Testing REST API : read one invoice13:33
Testing whether the REST API is able to read a single invoice.
Nodemon7:00
Lerning to use Nodemon
Configure REST API: delete information11:38
Make the RESt API delete information from MongoDB.
Configure REST API: update infromation12:35
Make the REST API update the information saved into MongoDB.
Testing REST API: update information7:36
Testing whether the REST API can update information.

Create your first web app using React13:16
Create your first web app using React.
Create a router with React14:43
Configure a router with React
Testing Router14:49
Testing the router created with React.
Saving Components into different files8:31
Learn how to organize components created with React.
Setting up and testing React Bootstrap8:04
Setting up and testing React Bootstrap.
Creating a text field with React9:59
Creating a text field with React.
Create a custom text field with React14:34
Create a custom text field with React.
Testing the text field for the seller's name7:31
Testing whether the text field created with React is working.
Setting up more text fields created with React12:14
Add more text fields by using the custom component created with React.
Testing four text fields created with React14:15
Testing four text fields created with React.
Creating a textarea with React13:33
Creating a textarea with React.
Testing whether the textarea works7:48
Testing whether the textarea created with React is working.
Creating another textarea with React9:20
Creating a another textarea with React.
Display items and prices with a React component11:30
Make a custom component that displays a listing of items and prices.
Testing the component that displays items and prices8:35
Testing the React component that displays the items and prices listing.
Create a React component that diplays the final price14:32
Create a React component that displays the final price.
React component for adding new item and price12:52
Creating a React component for adding a new item and price.
Create a React component for adding a new item and price13:10
Creating a React Component for adding a new item and price.
Testing the React component for adding a new item12:32
Testing the React component for adding a new item.
Adding a button to create an invoice12:14
Create a button with React to save an invoice into the MongoDB database.
Storing the information into an object10:01
Calculate the final price by iterating over the copied current items and summing their prices, then create a sales invoice object with items, price, and invoice description for database storage.
Saving invoice into MongoDB14:19
Saving invoice into MongoDB.
Setting up dialog box with React13:28
Setting up adialog box with React.
Testing the dialog box created with React12:01
Testing the dialog box created with React.
Creating a layout with React13:39
Creating a layout with React.
Custom Card component13:37
Custom Card with React
Last improvements to the layout7:22
Last improvements to the layout
Reading information from MongoDB12:51
Reading information from MongoDB.
Getting Ids and Descriptions of the invoices13:58
Getting ids and descriptions of the invoices.
Creating a listing of invoices with React14:01
Creating a listing of invoices with React.
Testing the invoices table13:53
Testing the invoices table
Deleting invoices from the database12:55
Deleting invoices from the database
Testing how to delete an invoice14:36
Testing how to delete an invoice.
View Invoice Button13:32
Creating a button with React to View an invoice.
Passing parameters to the routes14:27
Passing parameters to the routes created with react-router.
Display a single invoice with React10:26
Display a single invoice with React
Creating the layout of a single invoice14:28
Creating the layout of a single invoice
Reading information from MongoDB using Javascript12:58
Reading information from MongoDB by using javascript promises.
Handling errors with javascript promises and React10:01
Handling errors with javascript promises and React
Completing the invoice layout14:09
Completing the invoice layout
Completing the invoice webpage8:34
Completing the invoice webpage
Adding a navigation button with React10:36
Adding a navigation button with React
Improving the layout of the invoice12:53
Improving the layout of the invoice
Creating Update Invoice button with React11:32
Creating a navigation button with React
Testing the update button created with React6:26
Testing the update button created with React.
Creating the Update Invoice Form with React10:36
Creating a form to update a single invoice.
Handle errors with React14:51
Handle error with React
Saving information into state variables6:06
Saving information into state variables.
Completing the form used to update information13:40
Completing the form created with React to update an invoice.
Update invoice form created with React14:36
Update invoice form created with React.
Adding information to the form dinamically14:29
Adding information to the form dinamically with React.
Last improvements to Update Invoice form4:13
Last improvements to Update Invoice form
Updating information by using a javascript promise14:29
Updating information by using a javascript promise.
Set up a dialog box by using React14:35
Set up a dialog box by using React
Completing the Update Invoice form14:18
Completing the Update Invoice form
Adding navigation button with React6:13
Adding navigation button with React
Creating a Homepage with React14:37
Create a nice homepage with React
Adding more navigation buttons13:52
Adding navigation buttons with React
Creating the production code6:05
Create the production code with Webpack
Testing the web application9:41
Testing the web application

Requirements

Basic knowledge of HTML, CSS and Javascript is required.
Google Chrome installed on your PC
Windows installed on your PC

Description

This course shows you how to create a web application using full-stack MERN from scratch. This course is intended for developers who want to learn MERN stack by doing a web app instead of by reading tutorials or ebooks. You will create the backed of the web application with Nodejs, Express and MongoDB. The frontend will be created with React. React will be configured using Webpack. All the lessons are clear and easy to understand!!! Enroll today!!!

Who this course is for:

Beginner web developers
Beginner web designers
Beginner Nodejs developers

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

What you'll learn

Explore related topics

Course content

Creating the BACKEND17 lectures • 2hr 54min

Configure React using Webpack3 lectures • 34min

Creating the FRONTEND60 lectures • 11hr 53min

Requirements

Description

Who this course is for: