🚀 Overview

🏆 Successfully Delivered Client Project: Sactrum is a fast, full-stack educational web portal highly praised by the client for its technical excellence. It is built for O/A Level coaching centers to help students, teachers, and admins connect easily. It features super-fast page loads, server-side rendering, and easy content management.

🎯 Problem Statement

Coaching centers face many challenges today:

• ❌ Poor communication between teachers, parents, and students

• ❌ No easy way to make official PDF notices

• ❌ Slow and confusing admission and demo-class booking

• ❌ Hard to manage class routines for different subjects

• ❌ Slow website speed and poor SEO

👉 Goal: Build a fast, easy-to-use EdTech platform with a strong admin panel, simple admissions, and automated PDF notices.

🏗️ System Architecture

🖥️ Frontend

• Framework: TanStack Start (SSR) + React 19

• Language: TypeScript

• Styling: Tailwind CSS v4 + Radix UI

• Data Fetching: TanStack React Query v5

• Animations: Framer Motion

⚙️ Backend

• Database: Supabase (PostgreSQL)

• Security: Role-Based Access Control (RBAC)

• Auth & Storage: Supabase Auth + Supabase Storage

• Image Processing: Client-side image compression

☁️ Deployment

• Hosting: Cloudflare Workers / Pages

• CI/CD: GitHub Actions

✍️ Rich Content & PDF Engine

🎯 Purpose

Let admins easily write blogs, format teacher profiles, and instantly create branded PDF notices without any extra software.

✨ Features

• Tiptap Rich Text Editor: An easy-to-use editor for writing blogs and FAQs with lists and links.

• Instant PDF Maker: Creates official notices with school logos and stamps directly to PDF.

• Fast Image Uploads: Shrinks image sizes before uploading to save space and load faster.

⚡ Key Features

✅ Dynamic Subject Explorers

• Explore O Level, IGCSE, and A Level subjects easily.

• Automatic color themes and curriculum badges.

✅ Master Teacher Profiles

• Detailed teacher profiles with verified badges.

• Shows their experience and embedded YouTube intro videos.

✅ Easy Admissions & Inbox

• Simple 3-step demo class booking system.

• An admin inbox to track and manage student applications.

• Instant error checking and feedback messages.

✅ Powerful Admin Panel

• One dashboard to manage over 15 different data tables.

• Strong security to control who can view or edit data.

• Global dark and light mode for the whole site.

✅ Interactive Class Routine

• Filter weekly class schedules by program, day, time, and teacher.

🧠 Challenges Faced

1. Making PDFs on the Client-Side

   • It was hard to generate clear, high-quality PDFs without slowing down the server.

2. Fast Routing & SEO

   • Balancing a fast website experience while making sure search engines can still read the pages.

3. Image Sizes

   • Preventing users from uploading huge images that slow down the website.

4. Large Admin Panel

   • Building one admin system that can handle 15+ different types of data without writing the same code twice.

💡 Solutions Implemented

• Used html2canvas-pro and jsPDF to create perfect PDFs right in the browser.

• Used TanStack Start to make the website load fast and rank well on Google.

• Added a tool to compress images on the user's device before uploading them to the cloud.

• Created reusable templates so the admin panel can easily manage any new data type.

📚 Key Learnings

• Building fast, modern web apps using React 19 and TanStack Start.

• Mastering how to generate PDFs in the browser.

• Designing smart, reusable code for large admin dashboards.

• Securing databases using Supabase Row Level Security.

🔮 Future Improvements

• 💳 Online tuition fee payments (Stripe/SSLCommerz).

• 🤖 AI study material and quiz maker.

• 📱 Mobile app for students.

• 📊 Dashboards to track student attendance and grades.

🏆 Client Business Impact

🚀 Faster Admissions: The simple 3-step booking system increased new student inquiries by removing confusing forms.
⚡ Hours Saved: The automated PDF notices and easy dashboard saved the client's admin staff hours of manual paperwork every week.
📈 Better Online Presence: Fast page speeds (TanStack SSR) improved Google search rankings, bringing more local parents to the site.
😊 Happy Client: The coaching center owners loved the modern design and how easy it was to manage their own content without needing technical help.

🎯 Final Impact

By moving from a slow, manual process to a fast, automated system, the client can now focus entirely on teaching and growing their business rather than dealing with paperwork and website issues.