A full-stack e-commerce demo built with React and Flask, focused on the complete shopping flow: authentication, product browsing, reviews, cart management, checkout, order history, and notifications.
ShopShop is a compact but complete online store project that combines a React frontend with a Flask REST API backend. The application covers the main customer journey of a modern store: creating an account, logging in, exploring the catalog, filtering products, opening product details, leaving reviews, adding items to the cart, placing an order, and tracking post-purchase notifications.
The project is designed as a practical full-stack implementation rather than a static UI mockup. It includes persistent storage with SQLite, JWT-based authentication, seeded demo data, and a frontend that consumes the backend API directly.
- User registration and login with JWT access and refresh tokens
- Product catalog with search and category filtering
- Product details page with stock info and customer reviews
- Add-to-cart flow with quantity selection
- Checkout process that converts cart items into an order
- Order history view for authenticated users
- Notifications generated after checkout and mark-as-read support
- Seed script that populates the app with demo products, users, and reviews
| Layer | Technologies |
|---|---|
| Frontend | React 19, TypeScript, React Router, React Bootstrap, Bootstrap, Lucide React |
| Backend | Flask, Flask-SQLAlchemy, Flask-JWT-Extended, Flask-CORS |
| Database | SQLite |
| Tooling | Create React App, npm, Python virtual environment |
| External data source | Fake Store API used by the seed script |
PROJECT_WDAI/
├── backend/
│ ├── app/
│ │ ├── routes/
│ │ ├── __init__.py
│ │ ├── models.py
│ │ └── utils.py
│ ├── requirements.txt
│ ├── run.py
│ └── seed.py
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── api/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── pages/
│ ├── package.json
│ └── tsconfig.json
└── README.md
The frontend is a React application responsible for routing, rendering the storefront, handling forms, and calling the backend API. Authentication state is stored in local storage and exposed through a custom auth hook. The UI includes pages for:
- Home page with product discovery
- Product details with reviews
- Login and registration
- Cart and checkout
- Order history
- Notifications
The backend is a Flask application exposing REST endpoints under the /api prefix. It uses SQLAlchemy models for users, products, reviews, cart items, orders, order items, and notifications. Authentication-protected routes rely on JWT tokens.
Main API groups:
/api/authfor register, login, and current user data/api/productsfor catalog and review handling/api/cartfor cart operations/api/ordersfor checkout and order history/api/notificationsfor notification retrieval and read status updates
The current data model includes the following main entities:
UserProductReviewCartItemOrderOrderItemNotification
This covers the essential relationships needed for a basic e-commerce workflow.
Make sure you have the following installed:
- Python 3.10+ recommended
- Node.js 18+ recommended
- npm
git clone https://github.com/piotrsac/Web-Store
cd PROJECT_WDAIOpen a terminal in the backend directory.
cd backend
python -m venv .venvActivate the virtual environment:
# Windows PowerShell
.venv\Scripts\Activate.ps1
# Windows CMD
.venv\Scripts\activate.batInstall Python dependencies:
pip install -r requirements.txtInitialize the SQLite database tables:
python -c "from app import create_app, db; app = create_app(); app.app_context().push(); db.create_all()"Seed the database with demo content:
python seed.pyRun the Flask server:
python run.pyThe backend should be available at:
http://127.0.0.1:5000
Open a second terminal in the frontend directory.
cd frontend
npm install
npm startThe frontend should be available at:
http://localhost:3000
If you run the seed script, the following demo users are created:
| Username | Password | Role |
|---|---|---|
admin |
admin123 |
admin |
prowadzacy |
password125 |
user |
student1 |
student123 |
user |
The seed.py script does more than create users. It also:
- downloads products from Fake Store API,
- stores them in the local SQLite database,
- creates sample reviews,
- prepares the application for a ready-to-demo state.
This makes the project much easier to present locally without manual data entry.
Note: the seeding step requires internet access because products are fetched from Fake Store API.
- Register a new account or log in with a seeded user.
- Browse products on the home page.
- Search by name or filter by category.
- Open a product page and read or add reviews.
- Add items to the cart.
- Complete checkout.
- Review created orders in order history.
- Open notifications and mark them as read.
- The project currently uses SQLite for simplicity and local development speed.
- CORS is enabled so the React frontend can communicate with the Flask backend during development.
- The backend configuration is currently embedded directly in code, so no
.envfile is required to run the project in its present form. - This project is well suited for academic presentation, portfolio use, or as a base for further development.
This repository is not just a frontend showcase. It demonstrates how UI, API design, persistence, authentication, and user flow connect into a single working product. It is a good example of an end-to-end full-stack application that is simple enough to understand quickly, but complete enough to present as a serious development project.