Frontend
K.K.P.B - School Management Website
K.K.P.B Secondary High School needed a modern website to replace their outdated static pages. I built a Next.js site with dynamic content management — the school admin can update announcements, events, and teacher info through a simple form interface. The site includes program details, an events calendar, a gallery, and contact information. It was my first real client project, working directly with the school administration.
Project Goals
- Give the school a professional online presence that parents and students actually use.
- Build an admin panel so staff can update content without asking a developer.
- Make the site accessible on slow mobile connections — most parents access it on phones.
- Showcase the school's achievements and programs in a way that feels organized, not cluttered.
My Process
Met with the school principal to understand what they needed — turns out the main pain point was updating event dates and announcements. I designed the admin panel around that workflow. The frontend was built mobile-first since 80%+ of their traffic comes from phones. Deployed on Vercel with a MongoDB backend.
Challenges & Solutions
Challenge:
The school had no existing content structure — I had to organize years of scattered information into a coherent site map.
Solution:
Conducted an informal content audit with the school staff, grouping information into Programs, Events, Gallery, and About sections.
Challenge:
Many parents were on slow 3G connections, so the site needed to load fast despite having a photo gallery.
Solution:
Implemented lazy loading for images with blur placeholders, and served WebP format with responsive sizing — cut initial page weight by 60%.
Challenge:
The admin panel needed to be simple enough for non-technical staff to use without training.
Solution:
Built a minimal admin interface with pre-filled templates for common updates (new event, new announcement) so staff only fill in the blanks.
Key Learnings
- Working with non-technical clients taught me to translate their needs into technical requirements — "we want it to look professional" means different things to different people.
- Mobile-first isn't optional for educational sites — it's where 80% of the audience lives.
- A simple admin panel that actually gets used is worth more than a feature-rich one that confuses everyone.
Gallery
