Shifra Code
A training platform built for creators who code
Shifra Code is a modern training platform for a coding education center. The project required translating a brand identity into a functional, performant website that handles course information, booking flows, and administrative needs—all while maintaining a polished, creator-focused aesthetic. This case study explores the decisions behind building a production-ready platform as a solo developer under tight deadlines.
The Problem
The client was running a growing coding education center with multiple course tracks—field internships, UI/UX bootcamps, and AI diplomas. Their existing web presence was fragmented: course information lived in spreadsheets, bookings happened through WhatsApp, and there was no unified experience for prospective students.
The core challenge was consolidation. Students needed a single place to understand course offerings, see upcoming cohorts, and register interest. The administrative team needed visibility into bookings without building a full backend system. And the brand—positioned as 'studio-grade' and 'creator-led'—needed a web presence that reflected that positioning.
The constraints were real: a three-week timeline, no existing design system, and the requirement to support both Arabic and English content structures. The site needed to feel premium without the budget for premium tooling.
The Approach
I started by mapping the user journeys. There were three distinct audiences: prospective students browsing courses, current students checking schedules, and administrators managing bookings. Each needed different information architecture, but the site had to feel unified.
The technical strategy prioritized static generation where possible. Course content changes infrequently, so pre-rendering made sense for performance and SEO. Dynamic elements—like the booking form—were isolated to specific routes, keeping the majority of the site fast and cacheable.
I chose Next.js App Router for its file-based routing and built-in optimizations. Tailwind CSS allowed rapid iteration on the visual design without maintaining separate stylesheets. Framer Motion handled the subtle animations that give the site its polished feel—but I was careful to keep motion restrained and purposeful.
Execution
Project Structure
The codebase follows a clear separation of concerns. The app directory contains route-specific pages, while components are organized by scope: UI primitives live in components/ui, while page-specific sections live alongside their routes.
A providers directory handles client-side context—theme providers, scroll behavior, and any global state. The lib directory contains utilities: helper functions, constants, and type definitions. This structure scales well and makes it easy to locate code by feature rather than by file type.
Static data—course information, upcoming cohorts, feature lists—lives in dedicated data files. This mirrors a CMS structure, making future migration straightforward. When the client eventually wants to edit content without touching code, the data layer is already abstracted.
Component Architecture
Components were designed for reusability from the start. A CourseCard component renders consistently across the courses page, homepage features, and any future listing contexts. Props are typed strictly—TypeScript catches misuse at compile time rather than runtime.
The booking flow required more complexity. A multi-step form with validation, conditional fields based on course selection, and confirmation handling. I kept state local to the booking page rather than introducing global state management. For a form that exists in one place, prop drilling two levels is simpler than Redux or Zustand overhead.
Animation components wrap Framer Motion with sensible defaults. Rather than sprinkling motion.div throughout the codebase, abstracted components like FadeIn and RevealSection provide consistent timing and easing. This prevents animation drift where different parts of the site feel subtly different.
Performance Decisions
Image optimization was critical. The site uses Next.js Image component throughout, with appropriate sizing and lazy loading. Hero images are prioritized; below-fold images load on scroll. This keeps initial page load fast without sacrificing visual quality.
Fonts are loaded with display: swap to prevent invisible text during load. The Geist font family—already optimized for web use—keeps the typography consistent with the modern, technical brand positioning.
I avoided heavy dependencies. No UI library, no complex state management, no animation libraries beyond Framer Motion. The bundle stays lean because every dependency was questioned: does this save more time than it costs in bytes?
Handling Edge Cases
The courses page needed to handle varying content lengths. Some courses have detailed prerequisite lists; others have minimal descriptions. The layout adapts using CSS Grid with auto-fit, ensuring cards align properly regardless of content height.
The contact form includes client-side validation with clear error states. But validation alone isn't enough—the form also handles network failures gracefully, showing appropriate messaging rather than silent failures or confusing error states.
RTL support was a consideration given the regional context. While the current implementation is LTR-first, the Tailwind configuration and component structure support directional utilities. Expanding to full RTL would require content work, but the technical foundation exists.
Outcome
The site launched on schedule and immediately became the primary channel for course information and booking inquiries. The client reported a noticeable reduction in repetitive questions—information that previously required WhatsApp conversations was now self-service.
Page load performance exceeded expectations. The homepage loads in under 1.5 seconds on 3G connections, with a Lighthouse performance score consistently above 90. Static generation means the site remains fast regardless of traffic spikes during enrollment periods.
The administrative booking view, while simple, gave the team visibility they didn't have before. Seeing inquiries in one place—rather than scattered across messaging apps—improved their response time and organization.
Perhaps more importantly, the site positioned Shifra Code as a legitimate, professional training center. The visual quality and user experience matched the 'studio-grade' positioning they were aiming for. First impressions matter in education, and the web presence now supports rather than undermines their brand.
Reflection
Solo projects under tight deadlines force clarity. There's no time for over-engineering or speculative features. Every decision had to answer: does this ship the project? This constraint was actually liberating—it eliminated bikeshedding and kept the scope focused.
I would have invested more in the CMS abstraction layer. The current data files work, but the client will eventually want to update course information themselves. Building a simple admin interface or integrating a headless CMS from the start would have saved future migration work.
The booking flow could be more sophisticated. Currently it generates inquiries that the team handles manually. A more complete solution would include calendar integration, payment processing, and automated confirmation emails. But for the timeline and budget, manual handling was the right trade-off.
This project reinforced my belief that constraints breed creativity. A three-week timeline with a solo developer isn't a limitation to apologize for—it's a forcing function that produces focused, maintainable code. The site does what it needs to do, does it well, and doesn't try to do more.