Skip to content

pktcodes/comfy-store-react-project-v2

Repository files navigation

Comfy Store 🛋️

PROD [Live] : https://react-comfy-store-v2-prod.netlify.app/

Comfy Store consists of a straightforward user interface where there is a

  • Home is the landing page which consists of sections i.e., Header, Navbar, Hero, Featured Products.
  • Header has Sign in / Guest which on click takes the user to the Login page and Create an account to the Register page.
    • Login page is where the user can log in or test the application with the Guest User.
    • When the user is logged in Hi, username and LOGOUT will be shown
  • Navbar consists of list of pages i.e., Home , About , Products , Cart , Checkout , Orders where the user can navigate between pages along with
    • Toggle for switching between the themes i.e. dark and light modes and a Cart icon button displaying the number of items present in the cart.
    • Checkout , Orders are the private/protected routes shown only to the user who has logged in.
  • Hero consists of the introduction of the store along with Carousel showcasing a few products.
  • Featured Products highlights some of the popular products which on click of a product navigates to the page displaying the details about the product, ADD TO CART to add the item along the option of Amount selection.
  • About displays a few details on the information about the company.
  • Products consists of a list of products and different filters to search for specific items.
  • Cart holds all the items the user added and the total amount for the items.
  • Checkout is the place where the user can see the order total and enter the details to place an order.
  • Orders shows the list of all orders the user has placed.
  • Data is handled by API, and styles are handled by Tailwind CSS.
  • For each page render the Loading has been implemented and unknown route URLs are handled by the Error component.
  • Routing is implemented using React Router, React Query is used for caching the data requests, and Daisy UI for CSS components.
  • To run the project locally, clone the repo, npm install to install the dependencies, and npm run dev to start up the development server on default port 5173.

Languages / Technologies

HTML, CSS, JavaScript, ECMAScript, React

API

https://documenter.getpostman.com/view/18152321/2s9Xy5KpTi

Deployment / Hosting

Netlify


Note: I have developed this project ~ [23] as part of the React 18 Tutorial and Projects Course (2023) taught by John Smilga.