MERN Stack Project Course - Build Fullstack React App

Also use NPX for faster installation of React with necessary libraries

Install React Router Dom 6 for routing

Route matches particular url with a page we want to load. Also get familiar with dynamic parameters in url address

Like User Profile Page, Orders Page etc. Also simulate login functionality

For example, chats page, page for creating a new product, etc

Header and Footer are the common parts of every subpage of our app

This component will be visible only for regular users, not for an admin

We are not going to use Bootstrap directly. Instead we will use excellent package for React – React Bootstrap to speed up creating React Components

Copy necessary elements with HTML from React Bootstrap

Add icons for searching, for cart and other elements for the header

Add custom css and make the footer sticky

Carousel will hold best sellers and card will hold product category data

Add example categories to see how our app is going to look like

Get icons for opening and closing chat state from Bootstrap Icons

Apply some css styles to make visual effects like transition of the chat popup

In the message field a user can write a chat message and submit it using the button

Create example chat history and style it using CSS from Bootstrap

Copy necessary elements like Cards, Pagination from React Bootstrap

Install additional package for Star Rating System. A user can rate the product

Instead of dealing with raw HTML we will utilize React Bootstrap components

Make some css styling to it like cursor pointer, margins etc. Also generate dynamic example categories using JavaScript

A user can filter products. For example by color, RAM memory etc.

Generate some dummy data for product list using JavaScript inside html (JSX)

Modify a little pagination component copied from React Bootstrap

When a user visits categories page and clicks specific category with the list of products then the scroll bar should go at the top of the page to make better user experience

Create rows and cols structure for product details page

Develop alert for the message that a product was added to the cart. Use useState React hook

After a user adds a product to the cart he will see the message with two buttons: go to cart, and go back to the list of products

Make text bolded and other css styling

Generate some dummy reviews using JavaScript

User special js package for mouse hover effect functionality

Create rows and columns structure for the cart page

But we are preparing only template for now. The page is not dynamic

Create rows and cols structure. Use useEffect React hook to handle client side validation of register page

Password should have at least 6 characters for user registration

Compare two passwords, both should match and have at least six characters

Copy register page and modify it to create login page

Copy register page and modify it to create user profile page

Use Table component from React Bootstrap to present orders of a user

But this is static content only with some dummy data generated by JavaScript. We are building the template only for now

Prepare cols and rows structure for the page responsible for displaying user order details page

Copy necessary elements from React Bootstrap like alerts, select list, etc

Very similar page to user order details page

It is similar to user’s orders page but there is an additional column on the left side to show admin links

We use separate component for admin links because it will be used in many admin subpages

The page will be similar to user order page

Generate some dummy data for products using pure JavaScript

Use ready made elements from React Bootstrap like form fields (textarea, text fields and others)

Add select lists for categories and product attributes

We are building only template right now (html and css). Our app is not able to interact with an api yet

An admin will be able to edit, delete users

To do that copy and paste orders page to save time

For now prepare only basics structure of columns and rows for storing necessary content

Generate some dummy data for chat conversation to see how it is going to look like on the finished dynamic project

Install Recharts library for dynamic charts

We have just finished creating template for our app. Next is too create an API

Make sure you have Node.js installed and then install Express and Nodemon

Get familiar with middlewares – special Express functions that handle routes and other things

Create main file for API requests to make code cleaner

Inside controllers we will write database queries and business logic if required

Synchronous and asynchronous code in Express require proper error handling

Express has his own middleware to handle errors but we will create our own

Create free account in MongoDB. We will use this database for storing data for e-commerce app like products, users, orders, etc.

We are not going to use directly MongoDB. Instead we will be using Mongoose framework for MongoDB to simplify database queries

Make database query using Mongoose model

Add additional properties to Product model like description, count in stock and others

One to many database relationship – a product may have many reviews written by users

Types of MongoDB schema relationships and when to use them

Indexes speed up searching through database

When to use compound index and when single field index

It will be used for storing categories collection in MongoDB database

Define fields like user name, password, etc

One user may have many orders and one order belongs to one user (one-to-many relationship)

Thanks to seeders we can fill the database with some dummy data to see how our app will look like with this data. Seed categories collection

Create some dummy data for products collection in MongoDB database

Create some dummy data for reviews collection in MongoDB database

A product may have many reviews. Write a seeder for this

Install a package for hashing password for users

Create some dummy data for orders collection in MongoDB database

For now controllers return simple text, but later they will be performing database operations when particular api endpoint is hit

Get all of the categories from MongoDB database

Handle request body first. Configure Express app

Test adding a new category using Postman

Get familiar with the most used HTTP response status codes in this course

Also add some validation before deleting a category

Category may have attributes like color, RAM memory etc.

Use “limit” in the database query (needed for paginating products)

Use skip() function in database query – needed for paginated result of products

Count total results of products from the database

We can sort products by name, price etc.

Filter by price and rating

Category name will be the part of url address (for searching products from specific category)

We can search products from different categories at the same time

We can search for example computers by RAM size, color and other attributes

Use text searching from MongoDB

Also populate (add to search results) reviews for particular product

Use special MongoDB syntax like “match”, “replaceWith” and others

Sort database query results and select only specific fields for products because for example images are not needed for products list page for admin

First find product by id and then remove it

For now without uploading files for a product

Create another API endpoint: find a product by id and update it

Install necessary package for uploading files

Create separate service for image validation. Images must be one of the following: jpg, jpeg or png

Generate random name for the file being uploaded

Save files on the server using random names

We need to store the path of the image in the database. It will be used later for src attribute

In url address we need to have absolute path for the image we want to delete

Use special Mongoose syntax ($pull) to remove item from database collection

Exclude password field from database results

Save new user in the database but for now without hashing the password

Use bcryptjs package for hashing

Cookie will be needed to confirm that a user has access to restricted resources

In cookie we will store logged in user data but it should be encoded using jsonwebtoken

Write logged in user data in cookie

Compare hashed password with plain password written in a form field

Login system only is not enough. We also need to check if logged in user has privileges to access to a specific resource like list of users

In the previous video it was enough to check only if cookie is valid. But now we also need to check if isAdmin property of the user model is set to true

This is for regular user. Later we will also make API endpoint for updating user profile from admin panel

To edit the profile with ease first thing we should do is to fetch user data from database and fill form fields with this data (to see what we are editing)

Introduce new API testing tool: Insomnia instead of Postman

Calculate review and save it in products collection

A logged in user may review particular product only once

In one api request we write two collections: products and reviews. This operation should be atomic (save both or none of them)

Select only name, last name, email, and is-admin properties from the database. The rest of the fields like city, country are not needed for admin to update the user

Find the user by id and update it (API endpoint for admin panel)

Find the user by id and delete it (API endpoint for admin panel)

This route should be protected by login middleware

Populate user field for Orders collection. Exclude password field from database result

When creating an order we also need to update products collection (increase sales)

If a user buys something , then we should update is_paid property to true

Find the order by id and update it (API endpoint for admin panel)

Populate user field in orders collection, but exclude password property (for security reason)

An admin can analyze orders in real time

Install Concurrently package to run frontend and backend at once

Utilize command parameters

Use environment variable to control what errors to show. On production we should not show too much details about errors (for security reasons)

Install axios library and make example API call to fetch all products

Thanks to this we can easily test components in the future

Learn about local state for React and component life cycle

Without local state it would be difficult to show results from the API in React application

Useful to avoid memory leakage

Use created API endpoint and fetch users, then show them on the frontend

Use local state to update user list after deleting without the need to refresh the page

But first divide the code for two files: products page and products component to make testing easier in the future

Use local state to update product list after deleting without the need to refresh the page

But before divide the code to two parts for better maintainability and testability

In the previous video we got orders from api, and now we can loop through orders and show them in the view

For now only static content. Later we will make it dynamic

Use React hook to read the id of the order from url address

Use local React state to display results from database in the frontend. For now without cart items

Also control the behavior of select lists (automatically select the chosen amount of product from the database)

An admin can mark the order as delivered if it is paid by the client

We use cart item component in many places and for now it does not work everywhere. Let’s fix that

Install Redux for managing global state for our application

Instead of previewing redux state in the console we will be doing this using special extension for Chrome

Also install Redux Thunk. Write something to the Redux state

Use useSelector hook to read data from Redux

First of all, divide the code to two parts: page and component to make our code maintainable and testable

Control the behavior of Spinner component and Alert (for showing current login process status)

Use useNavigate React hook to redirect after a user is successfully logged in to the application

We need this to read user data by other components, for example in the header (name and last name of currently logged in user)

After user is logged in, we need to store somewhere initial state for this user

Make authorization to prevent accessing admin area by regular users

When user logout from the app, we need to clear cookie, local storage and Redux data

Divide the code to the page and the component files to make it testable. Run POST type request to register new user

If I click register button then Spinner should show up (to inform us that the registration process is being done). Use local state for this

Display a message about not matching passwords in real time while typing in the register form

After a user is logged in to the application we display his name and last name in the header section

Make put API request to update user profile from regular user page

After we update the user profile we can show messages that the user was updated or provided email already exists

When editing a user he should provide a password and the same password confirmation

Fill all of the form fields for editing user with dynamic data from the database like name, last name, address, etc.

We store user data not only in the database but also in the redux state and local/session storage. So we need to update those places as well

Make api call for all of the products from the database to display them on the main page of our application

Use useEffect React hook to show content from the database

First let’s read id parameter from the url thanks to which we can fetch product by its id number

Divide the code into page and component to make testable component

Use local state management to store product id and chosen quantity

If a user clicks button for adding to the cart, first we need to fetch product data from the database

We need to make two different calculations: if the product being added to the cart is new or already exists in the shopping cart

If we add a product to the cart we need to calculate total price, quantity, etc.

If we refresh the cart page, redux state should persist, so we need to save initial values for the state in the local storage of the web browser

Show dynamically the number of products in the header and a message that new product was added to the cart

Divide the code into two parts (page and component) and prepare redux data

Also when changing quantity, then dispatch redux action to update the state

To remove a product from the cart we need to know id of the product, price and quantity because we need to update the state using this values

Update the state (redux) to show correct cart items number after removing the product

Divide the code into two parts: page and component

Handle removing items from shopping cart

Make api call for user info

If a user has no data written in the database (like phone number) then he is not able to click the button for placing an order

If a user has no address written in the database then a message about this is shown

Prepare order data to save in MongoDB database

Make POST type api request to save order data in the database

First divide the code into two parts: page and component

Make api call for user data

Make api call for order data

Use local state to show info about order status, for example “order is placed” or “pay for your order”, etc.

We will use the same component already used for listing cart details on cart page

First, our handler should provide correct messages, for example if a user chooses PayPal as payment method, show appropriate message for this

Install the package from npm and use it in our component

Use script installed in the previous episode and render buttons for making payments

We need to create methods for orders like approving, canceling an order etc.

First we need to pay for the order in the PayPal system, later update it in our MongoDB database

After the order is approved then we can update the database (order paid)

After the order is paid then update orders collection

Make api call for orders of regular user

After getting orders through api, display them on the page using useEffect React hook

We will need categories in one than one component that’s why Redux is needed

Get categories from Redux and give them to the select list on edit user page

Make api call to fetch edited product data. We need this to fill all of the form fields of edited product

It will be easier to edit a product if we first fill all of the form fields with current values from the database

Prepare JavaScript object with form field values. Later we will send them to the server

Make api request and edit product but for now without attributes and uploading images

Get attributes for a category that edited product belongs to

For example, for RAM attribute get 1 TB, 2 TB ,etc. Use useRef React hook

If we change category in the select list then new attributes should show up for this particular category

If we visit Edit Product Page we should display the table showing attributes for particular product (besides attributes for category the product belongs to)

We will be using the same function for editing and creating a product, so create a wrapper function in order not to repeat the code

If editing the product we can delete attributes that are assigned to it (use local React state for it)

If we select a category for a product being edited, we can manually write attributes for this category (form fields are active only if we chose a category)

On edit product page we can add an attribute to the product by pressing enter, but by default it sends the form. We need to disallow situation like this

If attribute key is empty in the form field then we should not save such attribute in the database, and vice versa (if value for key is empty, e.g. we type color but do not provide any value)

On edit product page we are able to both select attribute from the list or create a new one

When editing the product we can add attribute and this attribute is saved not only in the products collection but also in the categories collection

If we want to remove image we have to do two things, remove the path from the database and the image from the server

On edit product page, before saving the product changes, we can upload images

First let’s divide the code into two files: page and component

For now without uploading images

Get all of the form field values and send them to the backend to create a new product

We will have two upload options in our app: to local disk (on development) and to the Cloudinary cloud (on production)

After uploading an image to the cloud we get the image path as a response. We need to save that path in MongoDB database

If we click delete image button in the backend, we delete the path for this image saved before in the database

We use the same code when uploading images to local disk and to the cloud, so create separate functions to use by both pages (refactor the code)

First prepare Redux files for creating a new category

If we type category name in the form field and press enter then a new category will be saved in the database and this category will be automatically selected on the list

Make api call to the endpoint responsible for deleting categories. Use Redux to update the state of the application

In edit product page and create product page we use the same code for choosing category for the product

In both pages: edit and create product page, we have the same code for loading attributes based on chosen category. Refactor the code so that the code is not repeated

In edit product page and create product page we use the same code for creating the table with chosen attributes

We did this already for Edit Product Page, let’s do the same for product creation process

If we add new attribute it should be saved not only to the products collection but also to the categories collection (the same stuff as in edit product page)

Prevent reloading the page because we build single page application

Split the code into two parts to make code testable

Fill all of the form fields on edit user page (to see what we are editing)

Make api request to update the user. Then navigate to users page

Make api request to get product details using it’s id from url address. For now without images and reviews for the product

We have already paths for images from API (from previous step). Use them on the page

We have fetched reviews already from API. Display them on the page

Also deactivate form fields for reviews if a user is not log in to the application

Grab form fields for comment and rating (review), make api call and save the review in the database

After a user creates a review, move the scrollbar at the bottom to better see what comment he added for the review

First split the code into two parts: page and component

Display only main categories, for example instead of Laptops/Dell show only laptops

On product list page we have filtering options with many items. First get attributes for chosen category as one of the filtering options

If we filter product by clicking some attributes for example color, first we need to save chosen attributes to local state variable

Prepare array with selected attributes for sending to the server in order to make database query based on them (to filter products using attributes criteria)

After I choose filters, then button for resetting filters will show up. If I click it I’m redirected to the product list page without any filters applied

If we move the slider then price will change, we need to apply this to the filters array to later send to the server

We use checkboxes for selecting product rating, e.g. find all products with rating 4 and 5 stars

We use checkboxes for selecting categories, e.g. find all products from Laptops category

For example if we select Computers/Laptops checkbox, we should collect id of not only this particular category but also related categories like Computers/Laptops/Dell

Disable checkboxes with not related categories, for example if I select Computers/Laptops/Dell, then disable Monitors but keep Laptops/Computers/Lenovo and so on

If we click category checkbox we need to fetch and show attributes for this particular category

If we are on all product list then we show category checkboxes for filtering, but if we are on product list from specific category then we do not want to see category checkboxes

We can sort products by name, price, etc.

For paginated list of products we need total number of links for pagination and page number

Display correct number of pagination links below product list

Give necessary parameters to the api endpoint to make pagination work correctly

Make it finally possible to filter products, for example give all of the products rated 5 or 4

Display categories in the dropdown in the header

If we type something in the search form and press enter we should first assign written term to local state variable for later usage

For example if selected category is “All” we search through all products. If search query has something we search through products that match the query

On the main page and in the header, we have product bestsellers inside carousel

Assign bestsellers to local state variable and display them in the carousel

We can create our React components in smart way so that they are testable and maintainable