I created a e-commerce store - Audiophile. I organized the structure of the projects using atomic design, so I split my components into atoms, molecules, organisms, templates. For style, I used Styled-components and React-router-dom to switch between routes. I used firebase auth to authenticate the user, firestore to save user's orders and functions to create webhook between firebase and stripe to create stripe checkout. Now user can log in or register by login and password. I used redux-toolkit to manage the shopping cart state and react-redux to distribute it. Products that are splitted into categories are fetched from firestore.
Download the project to your computer and install needed packages with command:
npm installThen start the project on the local server with the command:
npm startand open http://localhost:3000/ to see this app.
Link to the live version: https://audiophile-ms.netlify.app/
- React (Typescript template)
- Stripe
- Styled-components
- Redux-toolkit
- React-redux
- React-modal
- React-router-dom
- Formik
- Yup
- Firebase (auth and firestore)
- Eslint, Prettier, Husky, Lint-staged
| Command | Description |
|---|---|
npm run start |
Open local server |
npm run build |
Create optimized build |
npm run test |
Run tests |
If you encounter a problem, write to this e-mail address: skolakmichal1@gmail.com