☁️ The Project: Calm CodeCrew Platform
This is a modular, full-stack web platform built to handle complex business logic—managing coding workshops, participants, and automated certificate issuance—using a highly structured React/Redux Toolkit frontend and a Firebase Serverless backend.
🛑 The Challenge: Automating Business Logic Securely
The objective was to create a reliable system for managing educational content and ensuring that sensitive tasks, like PDF generation and user role updates, happened atomically and securely without exposing administrative logic to the client.
Architecture Signal: Serverless Automation
Atomic Transactions: Utilized Firebase Cloud Functions (
onWorkshopCompletion) triggered by Firestore updates to automatically generate personalized PDF certificates for all enrolled students.Secure Access: All client Storage access is blocked; certificates are delivered securely via signed URLs generated by the Cloud Function, and all access is managed by strong Firestore rules.
🛡️ Core Senior Systems Implemented
Data Flow & State
Redux Toolkit with createAsyncThunk is used for all API calls
(Firestore/Auth), ensuring strict state modeling (STORE_STATUS) and
efficient data normalization across slices (auth, workshops, users,
certificates).
Developer Experience (DX)
Includes structured route guards (PrivateRoute, PublicRoute), reusable
UI utilities (useConfirmationDialog, MoreActions), and role-based menu
restrictions, minimizing bugs and speeding up feature development.
🎨 Styling and Frontend
- UI Stack: Styled entirely with Material UI (MUI) and Emotion, configured with a dark theme (
palette.mode = 'dark') using custom colors for a modern, professional look. - Routing: Organized route definitions using a
ROUTESenum and React Router, cleanly separated intoMainLayoutandAuthLayoutvia role-based route guards.
Tech Stack: React, TypeScript, Redux Toolkit, Firebase (Auth, Firestore, Functions), MUI, Formik/Yup, Vite.
View on GitHub