Fullstack Web Development - Project (7cr)

Overview

This application represents a simple web store constructed around Cloudflare Pages and the Stripe API. The Cloudlfare Pages Functions (Edge Functions) are used as the application backend API, while Stripe as used as the main database containing product and order information.

Screenshots

Found in SCREENSHOTS.md

Features

The following general features exist in the app:

• Home Page
  • Previewing all available products
• Product Details
  • More detailed product information page
  • Adding product to cart
• Cart
  • Modifying cart contents
  • Entering Stripe checkout
• Stripe checkout
  • Flow provided by Stripe
  • Allows full checkout/payment features (deployed in test mode)
• Confirmation page
  • Displaying checkout confirmation or error
• Admin Panel
  • JWT-based login
  • Product overview table
  • Adding products
  • Editing products
  • Removing products
• General
  • Toast popups for error/success messages
  • Detailed data schema and validation rules
  • Persisted local state
  • API data validation
  • React Query integration
• Developer Features
  • CI workflow linting and E2E testing
  • CD workflow for Cloudflare Pages deployment
  • CD workflow for Docker image publishing
  • Docker Compose + Dockerfile for app deployment
  • Docker Compose + Dockerfile for development
  • Cypress E2E frontend tests
  • Cypress black-box API tests
  • ESLint linting
  • Prettier formatting

Tech Overview

• Frontend
  • React Frontend
  • Vite + SWC for dev server and production build
  • ChakraUI for UI components
  • React Router for routing
  • Zustand for state management
    • immer for mutations
    • localStorage for persistence
  • Zod for API and form data validation
  • React Hook Form for form control and validation
  • TanStack Query (React Query) for backend queries and mutations
  • TanStack Table for data tables
• Shared
  • Zod data schemas
• Backend
  • Clouflare (Edge) Functions
    • Wrangler for Local Serving
  • StripeAPI integration
    • Used as main database
    • Full checkout functionality
  • JWT-based auth
  • Zod for request data validation
• Other
  • ESLint for linting
  • Prettier for formatting
  • Cypress for E2E Frontend and API tests
  • CI/CD via GitHub Actions
    • Linting
    • E2E Tests
    • Docker Image Publishing
  • CD via Cloudflare Pages

Timekeeping

Total Time: 124.5h

Date	Work Item	Time Spent
04/02/2023	Cloudflare Services Research (Workers, Pages, Functions)	6h
05/02/2023	Tooling Selection	2h
05/02/2023	Initial Setup	2h
05/02/2023	Cloudflare Pages CD Setup	1h
05/02/2023	Added Prettier Formatting	1h
05/02/2023	Stripe API integration	2h
05/02/2023	ChakraUI Integration	2h
21/02/2023	React Router Routing Setup	2h
21/02/2023	Added ESLint	1h
22/02/2023	ESLint Hotfix for React 17+	1h
22/02/2023	Refactoring	1h
22/02/2023	JWT Login Endpoint	1h
25/02/2023	Client-side Auth and Form Control	5h
14/03/2023	Custom Hooks Refactor	1h
20/03/2023	UI Development	1h
20/03/2023	Product Detail View	2h
21/03/2023	Cart and Local State	4h
21/03/2023	Cart Data Fetching	2h
24/03/2023	Stripe Checkout Flow	5h
28/03/2023	UI Development	2h
30/03/2023	Order Confirmation Page	5h
31/03/2023	UI Development	1h
01/04/2023	Improved Local State	3h
01/04/2023	UI Development	1h
03/04/2023	Admin Page Scaffolding	3h
09/04/2023	Admin Auth Middleware	2h
09/04/2023	Admin Product Table	3h
05/06/2023	API Extension	2h
05/06/2023	Hook Refactoring	1h
05/06/2023	Extended Frontend Services, Hooks, Admin Features	2h
05/06/2023	Admin Product Create and Edit Modals	5h
06/06/2023	Form Validation	3h
06/06/2023	Cypress Integration	3h
06/06/2023	Misc. Improvements	1h
06/06/2023	GitHub Actions CI Workflow	1h
06/06/2023	CI Debugging and Tweaks	1h
06/06/2023	Auth Re-fetch Policy Change	1h
07/06/2023	Improved Error Handling	3h
07/06/2023	Refactoring and Cleanup	3h
07/06/2023	Cypress Screenshot Debugging	1h
07/06/2023	E2E Test Development	1h
07/06/2023	Cypress CI Debugging	1h
08/06/2023	Misc. Improvements	1h
08/06/2023	E2E Test Development	3h
08/06/2023	UI Development	2h
08/06/2023	API Improvements	1h
09/06/2023	E2E Test Development	2h
09/06/2023	Zod Data Schema and Validation	6h
09/06/2023	Improved Cart Error Handling	1h
09/06/2023	UI Loading and Error States	1h
11/06/2023	E2E Test Development	1h
11/06/2023	Checkout Data Validation	0.5h
11/06/2023	Docker Compose and Dockerfile for Standalone	2h
11/06/2023	Docker Compose and Dockerfile for Development	2h
11/06/2023	Docker Image CD Workflow	1h
11/06/2023	Cypress-based API Test Development	3h
12/06/2023	E2E Test Development	1h
16/06/2023	API Refactoring	2h
16/06/2023	Production Deployment Tweaks	1h
16/06/2023	Documentation Update	3h