Fashion-store
About
This is an ecommerce web application built using react inorder too grasp deeper state management concepts
What's in Storeš
- User authentication and database implemented with google firebase
- Used React-router for dynamic web navigation
- Complex state management managed by Redux with memorized selectors
- Used Redux-Persist and local storage for persistence
- Implemented credit card payment with stripe
- Asynchronous API request handled with Redux -saga
- Mobile responsive supported
- Invoice via emailJs
- Dynamic notifications by Swal and Toastify
- Dynamic Filtering ( Shop by categories)
- Deployed on vercel
Project Structureš
The structure of the web app
- assets- all common scripts and stylings (css), fonts used on the pages, theme scripts included in script.js file
- src - all jsx files
- components - all react components
Hosting
- Vercel - continous delivery/ Automatically deploys app each time you commit to the master branch
- Heroku - great option but abit slow
Getting Started with Create React App
This project was bootstrapped with Create React App.
Start
- git clone the proect
- npm install
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
References
- https://www.divinector.com/
- https://www.sitepoint.com/how-to-create-an-ecommerce-site-with-react/
- http://fancyapps.com/fancybox/3/
- https://ivy555.medium.com/learn-stepwise-to-create-e-commerce-website-in-react-with-redux-dca78932a761
- https://owlcarousel2.github.io/OwlCarousel2/
- http://www.hackingwithreact.com/read/1/13/rendering-an-array-of-data-with-map-and-jsx
- https://reactjs.org/docs/lists-and-keys.html
- https://developers.facebook.com/docs/graph-api/