This is a web application built with React.js and Tailwind CSS that serves as an e-commerce platform for users to purchase items. The app uses useState, Redux for managing state, and was built using create-react-app and https://dummyjson.com/docs/products as the Back-End API.
- Clone the repository to your local machine.
- Ensure you on the lts version of Node.
- NB: Use NVM to switch to latest version $
nvm use lts.
- NB: Use NVM to switch to latest version $
- navigate to the relevant folder named by day. $
cd day-1-initial-project-start- NB: VS Code users can save each day as a project.
- Run $
npm installin the root directory to install the required packages.
- Production deployed Website
[TODO: As an End-user I want to know how to deploy my fork]
Vercel deploys the static content of day [TODO: As an End-user I want to know how to deploy my fork]?.
*You will need to request changes to add environment variables for the deployed dashboard.
To add an item to your cart, click on the Add to Cart button on the product page. To view your cart, click on the shopping cart icon on the navigation bar. You can update the number of items in your cart or remove items from your cart. To check out and purchase items, click on the Checkout button in your cart.
To search for products, enter a keyword in the search bar on the navigation bar. Select the appropriate option from the dropdown menu on the product listing page to sort products by price or rating.
1.React.js 2. Tailwind (CSS) 3. Dummy JSON: https://dummyjson.com/docs/products 4. create-react-app? 5. Redux
In the project directory, you can run:
It runs the app in development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.\
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
This project is licensed under the MIT License - see the LICENSE file for details.
These examples are related to React JS and each folder is structured with the naming convention of "day-1-start" and "day-1-end", for instance. The "start" folder represents the beginning point for our collaboration, while the "end" folder depicts the final outcome of what we'll be coding together during the class.
running Make sure you have node, npm installed on your machine Make sure you have node, npm installed on your machine
cd in your terminal to the desired folder for example cd day-1-end and then run npm install then npm run build to build the project and npm run start to run the project.