This is my full-stack e-commerce shop project. Backend is located in this repository. I've used PERN (PostgreSQL + Express + ReactJS + NodeJS) stack with some additional technologies (TypeScript, Tanstack Query, MobX, JWT Authorization etc.) which will be mentioned later in this document.
This is a full-fledged shop project, here I've implemented JWT authentification (token stored in the browser's local storage) and two user
roles - ADMIN and USER. As an unauthorized user you can:
- Navigate to main page and take a look at the popular vehicles or check the whole vehicles list.
- Navigate to vehicle page by pressing on it on the main page and checking its characteristics.
- Sort vehicles by type, brand, name or price.
As an authorized USER you can:
- Add and remove items from cart, navigate to cart page where all added vehicles are presented (+ total amount of $ is calculated).
- Rate vehicles (by the way, vehicle rating is calculated as an average value of different users rates).
- Logout to end the session (also worth noticing, that JWT token is stored in the local storage and it's valid for 1H, so even if user refreshes the page
he will not have to log in again, whereas when
logoutbutton pressed -> token gets deleted and seesion is ended).
Small video which shows how user can basically interact with this app:
Overview.mp4
As an ADMIN you can:
- Navigate to AdminPanel and add new brands, types and vehicles.
This is how this process looks like:
CreateTypeAsAdmin.mp4
To optimize image loading process I've created <LoadableImage /> component, it will load image only if it is visible, if it is visible but not fully loaded - it will show skeleton loading animation:
Moreover, there are lots of smooth animations and dialog / info pop-ups to make better UX. To read more information about technical side of this app check README.md in the backend repository.
- Vite
- MobX as a state manager
- React
- TypeScript
- React Query (Tanstack query) + axios
- SCSS
- Iconify