valenzsa/react-ecommerce-store

An eCommerce store built with HTML, CSS and ReactJS

An eCommerce store with ReactJS

This is a work in progress. The todo items will grow as it continuous or as needed basis.

Getting Started

1. Clone the project

2. After cloning, cd into the project directory and run the following command to install dependencies:

   npm install or npm i

3. Then run the following command to run the dev server.

   npm run dev

📝 Task Lists

Lists of tasks that are done are crossed out, and those that need to be done.

1. Create Header
   • Add Store Logo
   • Create Navigation
   • Add Login, Register and Cart icons
2. Hero Section
   • Single Hero Image
   • Create Hero Slider
3. Create Footer
4. Latest Products
   • Card Component
   • Use Carousel Slider To Display Products
5. Shop By Category
6. Category Page
   • Filter system
     • Filter By Reviews
     • Filter By Price
     • Filter By Product Status
     • Add "No results found" if results from filter is empty
   • Sort By
     • Alphabetical
     • Price
   • Card Component
     • Add Wishlist button
     • Add Quick View
     • Add Product Ribbon (On Sale, New, Out of Stock etc.)
   • Loading Component
7. Product Details Page
8. Breadcrumb Component
9. About Us Page
10. Cart Page
11. Wishlist Page
12. Login Page
13. Register Page
14. Page Not Found (404 Page)
15. Search Results Page
16. Implement State Management
    • Context API
    • Redux Toolkit
    • Zustand
17. Create Custom Hooks
    • useFetch
    • useGlobalContext
18. Admin Page

Resources

ReactJS

Fake Store API

react-ecommerce-store's Issues

Change favicon icon

Create a favicon icon instead of displaying the default Vite favicon.

Refreshing the category page does not display any products.

Need to pass in a category name variable into the fetch api call on page load.

Try the following options below:

1. Grab menu text content/link and update the categoryName state.
2. Use useParams() or useLocation() to grab the category name from the url and match it with a json data with the correct category name. Then update the categoryName state.

Breadcrumb's category url does not show the correct path

When hovering over Electronics link from the breadcrumb, the url displays "electronics" twice.

Look into setting up the breadcrumb correctly via react router?

Refreshing the product detail page empties out the array used to display the data on the page

When viewing the product detail page and refreshing the page, the page displays an error message with

Cannot read properties of undefined (reading 'image')

• Use useEffect() method to fetch the category data and then filter out the data from the corresponding product id.