Skip to content

Latest commit

 

History

History
80 lines (46 loc) · 3.33 KB

README.md

File metadata and controls

80 lines (46 loc) · 3.33 KB

MarketSquare

WhatsApp Image 2023-03-08 at 11 05 58 PM

E-Commerce React.js App

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.

Installation

  • 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.
  • 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 install in the root directory to install the required packages.

Enviroments

[TODO: As an End-user I want to know how to deploy my fork]

Deployment Pipeline

Vercel deploys the static content of day [TODO: As an End-user I want to know how to deploy my fork]?.

Deployment dashboard

*You will need to request changes to add environment variables for the deployed dashboard.

Shopping Cart

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.

Product Search and Sorting

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.

Built With

1.React.js 2. Tailwind (CSS) 3. Dummy JSON: https://dummyjson.com/docs/products 4. create-react-app? 5. Redux

Available Scripts (Getting started)

In the project directory, you can run:

npm start

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.

npm test

Launches the test runner in the interactive watch mode.\

npm run build

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!

License

This project is licensed under the MIT License - see the LICENSE file for details.

:::::For Students:::::

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.