Create a Web App with React, MongoDB, Express and Nodejs

Go to class
Write Review

Free Online Course: Create a Web App with React, MongoDB, Express and Nodejs provided by Skillshare is a comprehensive online course, which lasts for 16 hours worth of material. The course is taught in English and is free of charge. Create a Web App with React, MongoDB, Express and Nodejs is taught by Raymundo CH.

Overview
  • 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...

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