SE Special Project 2

Full-stack development with ReactJS and Python FastAPI

ShopHub - E-Commerce Management System

• A complete Full-Stack E-Commerce application built with React, FastAPI, PostgreSQL, JWT Authentication, Role-Based Authorization, Shopping Cart, Order Management, Admin Dashboard, and Cloud Deployment.

Tech stack:

Frontend

• ReactJS + Vite

• React Router

• Axios

• Material UI

Backend

• FastAPI

• SQLAlchemy

• PostgreSQL

• JWT

Useful links:

• https://fastapi.tiangolo.com/project-generation/

• https://github.com/fastapi/full-stack-fastapi-template

• https://railway.com/deploy/fullstack-fast-api

Agenda

Session 1 – Project Initialization

Objective

• Understand Full-Stack Architecture and set up the development environment.

Theory

• Web Architecture

• Frontend

• Backend

• Database

• HTTP

• Git Fundamentals

  • Repository

  • Commit

  • Push

Hands-on Practice

• Create two projects:

  • frontend/

  • backend/

• Initialize GitHub repository

• Execute:

  • git init

  • git add .

  • git commit

  • git push

Outcome

shophub/

├── frontend

├── backend

└── github

Session 2 – Landing Page

Objective

• Learn React fundamentals and component-based development.

Theory

• ES6

  • let / const

  • Arrow Functions

  • Destructuring

• React

  • JSX

  • Components

  • Props

Hands-on Practice

• Build:

  • Home Page

  • Header

  • Footer

  • Banner

Outcome

• A functional homepage with a basic user interface.

Session 3 – Product Catalog

Objective

• Display a list of products.

Theory

• Component Reusability

• Props

• Array Mapping

Hands-on Practice

• Create:

  • ProductCard

  • ProductList

• Use mock data:

  • products.json

Outcome

• Product catalog displayed in card format.

Session 4 – Search & Filter

Objective

• Manage application state.

Theory

• React Hooks

  • useState

  • useEffect

Hands-on Practice

• Implement:

  • Product Search

  • Category Filtering

  • Price Sorting

Outcome

• Interactive product catalog with filtering and sorting.

Session 5 – Multi-Page Application

Objective

• Implement application navigation.

Theory

• React Router

  • Route

  • Navigate

  • Route Parameters

Hands-on Practice

• Create pages:

  • /

  • /products

  • /products/:id

  • /cart

  • /login

Outcome

• Fully functional page navigation.

Session 6 – FastAPI Product API

Objective

• Build the first backend API.

Theory

• FastAPI

• RESTful APIs

  • GET

  • POST

  • PUT

  • DELETE

• Swagger Documentation

Hands-on Practice

• Implement:

  • GET /products

  • GET /products/{id}

  • POST /products

  • PUT /products/{id}

  • DELETE /products/{id}

Outcome

• Product API running and documented via Swagger.

Session 7 – Integrating React with APIs

Objective

• Replace mock data with real API data.

Theory

• Axios

• HTTP Requests

• Async/Await

Hands-on Practice

• Consume:

  • GET /products

  • GET /products/{id}

Outcome

• Frontend retrieves data from the backend API.

Session 8 – PostgreSQL Integration

Objective

• Connect the application to a database.

Theory

• Database Design

• Primary Keys

• Foreign Keys

• SQLAlchemy ORM

Hands-on Practice

• Create tables:

  • categories

  • products

Outcome

• Product data stored in PostgreSQL.

Session 9 – Product Management

Objective

• Implement product CRUD operations for administrators.

Theory

• ORM Concepts

• Data Validation

• Pydantic

Hands-on Practice

• Admin Features:

  • Create Product

  • Edit Product

  • Delete Product

Outcome

• Complete product management system.

Session 10 – Authentication

Objective

• Implement user registration and login.

Theory

• JWT Authentication

• Password Hashing

Hands-on Practice

• APIs:

  • POST /register

  • POST /login

• Frontend:

  • Login Page

  • Registration Page

Outcome

• Users can register and authenticate successfully.

Session 11 – Authorization

Objective

• Implement role-based access control.

Theory

• RBAC (Role-Based Access Control)

• Roles:

  • ADMIN

  • CUSTOMER

• Protected Routes

Hands-on Practice

• Restrict:

  • Create Product

  • Delete Product

• Access granted only to administrators.

Outcome

• Role-based authorization system in place.

Session 12 – Shopping Cart

Objective

• Build shopping cart functionality.

Theory

• Context API

• Global State Management

Hands-on Practice

• Implement:

  • Add to Cart

  • Remove Items

  • Update Quantity

Outcome

• Fully functional shopping cart.

Session 13 – Checkout & Orders

Objective

• Implement order placement and management.

Theory

• Transaction Concepts

• Order Processing Workflow

Hands-on Practice

• Create tables:

  • orders

  • order_items

• Features:

  • Checkout

  • Order History

Outcome

• Customers can place and review orders.

Session 14 – Admin Dashboard

Objective

• Develop an administrative dashboard.

Theory

• Data Aggregation

• Statistics APIs

Hands-on Practice

• Dashboard Widgets:

  • Total Products

  • Total Orders

  • Total Revenue

  • Total Users

• Charts:

  • Monthly Revenue

Outcome

• Operational dashboard with business insights.

Session 15 – Production Release

Objective

• Deploy the system to a production environment.

Theory

• Deployment Architecture

• Environment Variables

• CI/CD Overview

Hands-on Practice

• Frontend Deployment: Vercel

• Backend Deployment: Railway

• Database Deployment: PostgreSQL Cloud

Outcome

• Live system deployment:

  • https://shophub.vercel.app

  • https://shophub-api.railway.app

Session 16 & 17 - Shipper module