IBBE

Because this platform has like five different personalities. You've got the public landing page, student dashboards, school admin views, company portals, writer management systems. Each one needed its own logic, its own state, its own data flows. React's component architecture let me build once and remix everywhere. The student signup flow? Same components powering the school onboarding, just different props and validation rules. The reusability factor was huge. I built a card component with those thick borders and shadow offsets, used it everywhere. Field manual previews, dashboard widgets, news articles, all the same base structure. When I wanted to tweak the brutalist aesthetic, I changed one file and everything updated. React's ecosystem matters too. I needed form validation, drag-drop interfaces for the admin dashboards, infinite scroll for the journal. All of that exists already. I spent time building ibbe-specific features instead of reinventing date pickers.

Vite because I value my sanity. Hot module replacement that actually works. I change a color in Tailwind, the page updates instantly without losing state. Working on the admin dashboard with live data, making tweaks, seeing results immediately. That feedback loop keeps you in flow state instead of context-switching every 30 seconds while webpack rebuilds. SWC for the TypeScript compilation because it's absurdly fast. The entire app rebuilds in milliseconds. When you're iterating on complex dashboard layouts with nested components, that speed difference compounds. I could try five different approaches to the meeting scheduler interface in the time it would take Create React App to reload once. The dev server starts in under a second. Cold starts feel instant. That matters when you're jumping between projects or coming back after a break. Zero friction getting back into the code.

TypeScript caught so many bugs before they became production fires. The Supabase schema has like 15 tables. Students, schools, companies, certifications, meetings, applications, journal entries. Keeping track of which fields are optional, which IDs reference what, that gets messy fast. When I refactored the certification system to include skill tags and verification timestamps, TypeScript showed me every single place that needed updating. The student profile component, the admin approval flow, the API endpoints, the email templates. Without types, I would've shipped broken edge cases and found out through bug reports. The autocomplete is addictive. I type student. and get every available property. I know what data I have access to without checking documentation or database schemas. Writing the company dashboard where they browse certified students, TypeScript told me exactly what filters and sorts were possible based on the actual data structure. Interface definitions became living documentation. A new developer (or me in three months) can look at the types and understand the entire data model. What's a Protocol step? What fields does a Field Manual have? It's right there in the code, always up to date because if it's wrong, nothing compiles.

Tailwind let me build the brutalist aesthetic without fighting CSS specificity wars. I wanted thick borders, hard shadows, cream backgrounds, aggressive spacing. With traditional CSS, I'd be writing classes like .card-border-thick-charcoal-shadow-offset and maintaining a sprawling stylesheet. Tailwind lets me write border-4 border-charcoal shadow-[8px_8px_0px_0px_#1a1a1a] right in the JSX and move on. The utility-first approach matched how I think about design. I see a component, I know it needs padding, rounded corners, a background. I add the classes directly instead of naming another abstraction layer. When I wanted to adjust the shadow offset across all cards, I used the Tailwind config. One change, everywhere updates. Responsive design became trivial. The admin dashboards needed to work on laptops for school administrators but also on tablets for students checking certification status. Tailwind's breakpoint prefixes (md:grid-cols-3 lg:grid-cols-4) made that obvious and maintainable. I built mobile-first, added complexity at larger breakpoints. The JIT compiler meant I could use arbitrary values for the specific brand colors. That exact yellow (#ffd60a), that specific blue (#2962ff). No preprocessor setup, no custom CSS files, just bg-[#ffd60a] and it works. File size stayed tiny because it only includes classes actually used.

shadcn/ui gave me production-ready components that matched the brutalist vibe. Dialogs, dropdowns, command palettes, all accessible by default through Radix primitives underneath. I customized the hell out of them to fit ibbe's aesthetic but the foundation was solid. Radix handles all the gnarly accessibility concerns. Keyboard navigation, screen readers, focus management, ARIA attributes. The meeting scheduler has date pickers, time selectors, form validation. Making that accessible from scratch would take weeks. Radix gave me that for free, I just styled it with Tailwind to look aggressive instead of corporate. The copy-paste philosophy meant I owned the code. These components live in my repo, not node_modules. When I needed the dialog to have that thick border and offset shadow, I just edited the component file. No fighting library styles, no CSS specificity hacks, total control. Composition patterns made complex UIs manageable. The student dashboard has tabs, each tab has cards, cards have dropdowns and modals. Radix's primitive approach let me nest these however I needed. The company browse interface has filtering dropdowns that trigger command palettes that open detail modals. All of it just works together.

TanStack Query saved me from server state chaos. Every dashboard pulls data from Supabase. Student profiles, certification status, meeting schedules, journal entries, field manual downloads. Managing that with useState would've been a nightmare of loading flags, error states, and stale data. The caching strategy meant students saw instant updates. They submit a certification application, the UI updates immediately while the mutation runs in the background. If it fails, it rolls back automatically. If it succeeds, related queries invalidate and refetch. I wrote the happy path, TanStack Query handled all the edge cases. Prefetching made the experience feel fast. When a company admin hovers over a student profile card, TanStack Query prefetches that student's full details. By the time they click, the data's already there. The modal opens instantly with complete information. Feels like magic, took three lines of code. The devtools were clutch during development. I could see exactly what queries were active, what data they returned, when they refetched. Debugging why the meeting dashboard showed stale data after an update became trivial. I could see the cache, force refetches, inspect query states. Shipping features got faster because finding bugs got easier.

Supabase gave me auth, database, and APIs without duct-taping three services together. Students sign up with email, schools use magic links, companies get invited through admin-generated tokens. All of that lives in Supabase Auth with Row Level Security policies protecting each user type's data. The PostgreSQL database meant I could use real relational structures. Certifications reference students and protocol steps. Applications link students to companies. Meetings connect multiple parties with status tracking. Junction tables, foreign keys, cascading deletes, all the things that make data integrity possible. Plus I could write raw SQL when the query builder got clumsy. Edge functions handled server-side logic. SendGrid email triggers, certification approval workflows, analytics events to PostHog. These run on Supabase's infrastructure, geographically close to users. The webhook that processes new waitlist signups and sends welcome emails runs in under 200ms globally. Real-time subscriptions made admin dashboards feel alive. When a student submits a certification request, the admin panel updates instantly. No polling, no refresh buttons, it just appears. School administrators see new enrollments the moment they happen. That immediacy changes how people interact with the platform. Row Level Security policies were the security model. Students can only read their own profile and public company listings. Schools see their enrolled students but nothing from other institutions. Companies view certified students but not internal school data. These rules live in the database, enforced at the PostgreSQL level. Even if my React code has bugs, the database refuses unauthorized access.

The field manuals are big PDFs. 127 pages, 98 pages, 89 pages. Hosting those in Supabase storage would work but gets expensive at scale. S3 is dirt cheap for storage, CloudFront makes downloads fast globally. A student in Singapore gets the same fast download as someone in New York. CloudFront's edge locations cache the PDFs close to users. First request might be slow, every subsequent download is instant. Students download these repeatedly, reference them while building. That caching matters. Plus I can set aggressive cache headers because the content rarely changes. S3's durability guarantee means those files won't just disappear. Educational content needs to stick around. Students bookmark these, reference them months later. S3's 99.999999999% durability gives me peace of mind that ibbe's core content library is solid. The separation of concerns helped too. Supabase handles dynamic data (user profiles, certifications, real-time updates). S3 handles static assets (PDFs, images, eventually video content). Each service does what it's good at. I'm not trying to make a database serve files or a CDN manage user sessions.

Resend replaced SendGrid because the developer experience is just better. Sending certification approval emails, welcome sequences, meeting reminders. Resend's API is cleaner, their React email templates let me write emails in JSX with the same components as the web app. Design consistency across every touchpoint. The email testing workflow actually works. I can preview emails in development, send test emails to myself, iterate quickly. With SendGrid I was debugging email templates by sending live emails and hoping. Resend shows me exactly what students will see before I ship. Deliverability has been rock solid. Certification emails land in inboxes, not spam folders. Welcome emails arrive within seconds. Resend handles SPF, DKIM, DMARC configuration. I pointed DNS records, verified the domain, everything just worked. The analytics matter for a platform like this. I can see open rates on welcome emails, click-through on certification notifications. If students aren't opening meeting reminders, I know to tweak the subject lines. That feedback loop improves communication over time.

Amplify handles hosting and CI/CD without me thinking about it. I push to main, Amplify builds and deploys automatically. Environment variables stay secure, preview deployments work for feature branches. The whole deployment pipeline just exists. The global CDN means the landing page loads fast everywhere. Students discovering ibbe from different continents get the same snappy experience. Amplify's edge network handles that distribution. I build once, it deploys everywhere. Branch previews changed how I work. Every pull request gets its own URL. I can share feature work with the team before merging. Stakeholders see actual working versions instead of screenshots. Feedback happens on real builds, not mockups. The atomic deployments prevent broken states. Either the whole build succeeds and goes live, or it fails and the previous version stays up. No half-deployed apps, no missing assets, no broken states in production.

PostHog tracks what matters for growth. Which field manuals get downloaded most? Where do students drop off in the signup flow? Do companies actually browse certified students or just sign up and ghost? These questions need data. The session recordings are gold. I can watch actual users navigate the platform. Where they hesitate, what confuses them, which features they ignore. A school administrator spent three minutes looking for the student import feature. I moved it to the main nav. That insight came from watching one session recording. Feature flags let me test changes safely. Rolling out the new certification flow? Ship it to 10% of students first. If completion rates drop, rollback instantly. If they improve, gradually increase to 100%. No big bang deploys, controlled experimentation. The self-hosted option means student data stays private. Educational platforms have privacy concerns. PostHog runs on my infrastructure, data doesn't leave to third-party analytics services. Compliance gets easier, trust increases.