An open API service indexing awesome lists of open source software.

https://github.com/guisalmeida/zopa-store

A ReactJS e-commerce application.
https://github.com/guisalmeida/zopa-store

context-api firebase firebase-auth firestore-database react react-hooks react-router redux redux-persist redux-saga redux-thunk stripe styled-components

Last synced: 2 months ago
JSON representation

A ReactJS e-commerce application.

Awesome Lists containing this project

README

          



Logo


Zopa Store


Typescript
React
Redux
Stripe
Material UI
Styled Components



Netlify Status

## Start
To run this project properly you will need also to configure a backend environment. So after configuring this project go to [Zopa Store Api](https://github.com/guisalmeida/zopa-store-api) project and follow the steps there too.

> Please make sure to configure the environment variables as well, take a look at `.env.example`, and create a file `.env` in your root.

```
git clone git@github.com:GuiSAlmeida/zopa-store.git
cd zopa-store
npm install

# up server at http://localhost:5173/
npm run dev
```

## 🚀 Technologies

- [React reselect](https://github.com/reduxjs/reselect#installation)
- [Redux Persist](https://github.com/rt2zz/redux-persist#basic-usage)
- [Redux-thunk](https://github.com/reduxjs/redux-thunk)
- [Redux-saga](https://redux-saga.js.org/)
- [Stripe](https://github.com/stripe/react-stripe-js)
- [Recharts](https://recharts.org/)

## ⚙️ Todo / Issues / Upcoming features

- [x] Feat: Private route admin;
- [x] Feat: Create a sold-out feat product page;
- [x] Fix: form select default value;
- [x] Feat: Finish user list admin crud;
- [ ] Fix: local storage get token;
- [ ] Fix(admin product page): Register sizes;
- [ ] Refactor: remove all TS-ignore;
- [ ] Feat: Create user auth validation when already logged in;
- [ ] Feat: Create stock quantity and manage with each size;
- [ ] Feat: Improve admin page mobile;
- [ ] Feat: Improve user details page;
- [ ] Test: e2e and accessibility with POM (page object model) pattern;

## References

- [Styled components + TS](https://styled-components.com/docs/api#typescript)
- [Styled components + TS guide](https://www.atatus.com/blog/guide-to-typescript-and-styled-components/)
- [React + TS cheatsheet](https://react-typescript-cheatsheet.netlify.app/docs)