'e-fashion' is a full stack app - this repository contains its frontend source code.
View the backend source code »
View the deployed app »
Table of Contents
- This app is a commerce online store, it provides:
- user authentication interface,
- many different filters for products search,
- pagination,
- search bar, ratings and customers reviews,
- ratings and customers reviews,
- sandbox PayPal payment,
- tolls for managing cusomers accounts and customers orders,
- adding new products with ease,
- dasboard for checking the store general statistics.
- Example of a single product's page:
- Example of a filtering products. Filters used (chosen filters change font-color to red ): department - shoes, price- 10€-100€, rating - one star. The result is 2 products:
- Purchase process:
- customer details
- chossing payment method
- Paypal sandbox payment - to test the payment log in to PayPal pop up window with these credentials: email: sandbox.tom@example.com, password: sandbox1234
- verification of an complete payment
- verification of a succesfull delivery
- Menu 'TOOLS'
- DASBOARD
- PRODUCTS
- ORDERS
- USERS
- HTML, CSS,
,
- Redux
- Node.js, Express.js, Mongoose,
- MongoBD for a database,
- Firebase for deploying the frontend,
- render.com for deploying the backend,
- Uploadcare API for storing photos,
- Multer middleware library for uploading photos,
- bcrypt library for hashing passwords,
- jsonwebtoken for creating login token,
- Chrome Developer Tools for testing screen sizes and using Lighthouse,
- Chrome, Firefox, Brave Browser, Edge and Opera for browser testing the responsiveness,
- https://ui.dev/amiresponsive for testing and to make responsive image,
- https://favicon.io/favicon-generator/ to create a favicon,
- https://fontawesome.com/ for icons,
- https://tinypng.com/ to optimize images,
- https://www.remove.bg/ for removing images backgrounds,
- https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi during development,
- https://wave.webaim.org/ to check web accessibility,
- https://balsamiq.com/ for wireframing.
- chat box for customers support with socket.io
- function of choosing the address on the map (insted of typing it) in the checkout process with the usage of Google Maps Platform APIs
- all photos used in the app are free-to-use photos from www.pexels.com or photos from zara website https://www.zara.com