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.
