In this mockup project, we created a modern and user-friendly single-page shopping website. We focused on designing a clean and intuitive interface that will allow customers to easily browse through and should enhance the overall customer experience.
- This component streamlines the shopping experience by providing a user-friendly tool for customers to browse and select products. It includes an image gallery, product information section, style selector, and "Add to Cart" option. Customers can easily explore, compare, and purchase products with ease.
- The Related Items & Comparison module displays two sets of related products for the customer. The first set is a list of products that are internally determined to be related to the product currently being viewed. The second set is a custom-created list of products that the customer has grouped with the current product into an "outfit".
- The Questions & Answers module enhances the customer experience by allowing them to view, search, ask, and answer questions related to the product they have selected.
- The Ratings & Reviews module allows customers to view and submit reviews for the product they have selected. This component includes the ability to write new reviews, view reviews in a list, sort reviews, see rating and product breakdowns. All reviews are saved per product, and styles or variations of the product are not accounted for within the module.
- Clone repo.
git clone https://github.com/Team-Everglades/project-atelier.git
- Install node.
npm install
- Run server and react server.
npm run dev
- Install all dependencies.
npm i -g concurrently
npm install react-share --save
npm install cloudinary
npm install react-inner-image-zoom --force
npm install -S react-image-size --force
npm install cookie-parser --force
npm install react-icons
npm i vite-plugin-compression
-
Setup enviornmental variables files.
-
Enjoy browsing!