So far, we have learned the following concepts:
- What is React, and Why do we need it?
- What is a Component in React?
- How to use JSX to write Components?
- How to pass Props to a Component?
- How JSX gets converted to JavaScript?
- Limitations of JSX
We have also seen how to spin up a simple React application using create-react-app
.
Now, let's dive deeper into React by building a simple e-commerce website. Let's name it SmileCart.
Here is a quick overview of what we are going to build.
The SmileCart application consists of the following pages:
- Checkout page: Collects the contact information and shipping address from the user. Additionally, the page will display the total bill amount, and users will be able to place their order by clicking the Confirm order button.
Fork the template repo
To get started with the project, we've set up a React app with the necessary packages and configurations for you. You can fork the smile-cart repository to begin working on the project.
VSCode recommended extensions and settings
To improve the coding experience and enhance productivity, we recommend using the following VSCode extensions:
Tailwind CSS IntelliSense: Provides autocomplete, syntax highlighting, and linting for Tailwind CSS.
EditorConfig for VS Code: Overrides user/workspace settings with settings found in .editorconfig
files.
ESLint: Integrates ESLint into VSCode, displaying errors and warnings while coding.
Code Spell Checker: Catches common spelling errors in code and documents.
GitLens: Integrates multiple Git features into VSCode.
To ensure a consistent development environment for everyone contributing to the project, we have included the list of recommended extensions in the .vscode/extensions.json
file.
Go to the root of the forked repository and create the .vscode/extensions.json
file with the following commands:
Copy the list of recommended extensions into the .vscode/extensions.json
file:
Additionally, we have saved the following VSCode settings to automatically format your files. Create a .vscode/settings.json
file and copy the following contents:
Backend APIs
Given that this is a frontend course focusing on React, we've provided a set of APIs available through https://smile-cart-backend-staging.neetodeployapp.com as the backend. It supports the following endpoints:
List products
To get a list of products, make a GET
request to /products
. By default, this API returns 10
products. However, you can obtain a maximum of 50
products by including the page_size
parameter in the request.
The API supports searching and pagination. To search for a specific product by name, you can use the search_term
parameter. For pagination, utilize the page
and page_size
parameters.
Here is an example with search and pagination parameters: https://smile-cart-backend-staging.neetodeployapp.com/products?search_term=shirt&page=1&page_size=10.
Get product details
To retrieve the details of a specific product by its slug, make a GET
request to /products/:slug
.
Example: https://smile-cart-backend-staging.neetodeployapp.com/products/infinix-inbook-2.
Place an order
To place a new order, make a POST
request to /orders
.
The /orders
endpoint doesn't enforce data schema validation or data preservation. It simply returns a success status code without further processing.
List countries
To get an array of country objects with their names and codes, make a GET
request to /countries
.
List states of a country
To get an array of state objects with their names and codes for a selected country, make a GET
request to /states
with country_code
as the request parameter. You can obtain country_code
by looking into the response of the /countries
API.
For example, to get a list of states of India, make a GET
request to https://smile-cart-backend-staging.neetodeployapp.com/states?country_code=IN.