Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

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

via Skillshare

This course may be unavailable.

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

Taught by

Raymundo CH

Reviews

Start your review of Create a Web App with React, MongoDB, Express and Nodejs

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.