Frontend Development

    Learn the technologies that power our user interface

    The frontend is what users see and interact with. We use modern React-based tools to build a fast, responsive, and beautiful user experience.

    Before diving in, make sure you've completed the Prerequisites.

    Technologies Overview

    Follow this order — each technology builds on the previous one:

    1. React — The Foundation

    What: React is a JavaScript library for building user interfaces using reusable components.

    Why we use it: React lets us break our UI into small, reusable pieces (components) that manage their own state. It's the foundation of our entire frontend.

    Priority: CRITICAL — You must understand React before anything else.

    What to focus on:

    • Components — Building blocks of our UI
    • Props — Passing data between components
    • State — Managing data that changes over time
    • Hooks — useState, useEffect, useContext
    • Event handling — onClick, onChange, etc.

    📚 Official Documentation:

    React Documentation — Learn React

    2. Next.js — The Framework

    What: Next.js is a React framework that provides structure, routing, and server-side features.

    Why we use it: Next.js gives us file-based routing, server-side rendering, and API routes. We specifically use the App Router (not Pages Router).

    Priority: CRITICAL — Our entire app is built with Next.js.

    What to focus on:

    • App Router — How we organize pages with the app/ directory
    • File-based routing — page.tsx, layout.tsx, folders
    • Server vs Client Components — When to use 'use client'
    • Link component — Navigation between pages
    • Image component — Optimized images

    📚 Official Documentation:

    3. Tailwind CSS — Styling

    What: Tailwind is a utility-first CSS framework. You style components by adding CSS classes directly to HTML.

    Why we use it: Tailwind makes styling fast and consistent. Instead of writing custom CSS, you use predefined classes like bg-blue-500 or text-center.

    Priority: MEDIUM — You can learn as you go. Use AI or copy from existing components.

    What to focus on:

    • How utility classes work (p-4, m-2, flex, grid)
    • Responsive design (md:, lg: prefixes)
    • Colors and backgrounds
    • Don't memorize — use the docs and AI tools!

    📚 Official Documentation:

    Tailwind CSS Documentation

    4. shadcn/ui — Component Library

    What: shadcn/ui is a collection of pre-built, accessible UI components (buttons, forms, dialogs, etc.).

    Why we use it: Instead of building buttons, modals, and forms from scratch, we use shadcn/ui's battle-tested components. They're styled with Tailwind.

    Priority: LOW — Just browse the docs when you need a component.

    What to focus on:

    • Browse available components (Button, Card, Dialog, Input, etc.)
    • How to use components in your code
    • Components are in src/components/ui/
    • Don't learn everything — look things up as needed

    📚 Official Documentation:

    shadcn/ui Documentation

    5. Framer Motion — Animations

    What: Framer Motion is an animation library for React. It makes elements fade, slide, and move smoothly.

    Why we use it: Animations make our website feel polished and professional.

    Priority: LOW — Use AI to help you. Copy from existing components.

    What to focus on:

    • Basic animations (fade in, slide up)
    • The motion component
    • Don't worry about mastering it — use AI and existing examples

    📚 Official Documentation:

    Framer Motion Documentation

    💡 Learning Tips

    • Start with React and Next.js. These are mandatory. Everything else you can learn as you go.
    • Don't memorize Tailwind or Framer Motion. Use the docs, AI tools, and copy from existing code.
    • Look at existing components. Check src/components/ to see how we've built things.
    • Build small test components. Create a test page and experiment!

    📂 Where Things Live

    src/app/ — Pages and routes (Next.js App Router)

    src/components/ — Reusable components

    src/components/ui/ — shadcn/ui components

    src/components/layout/ — Header, Footer

    src/components/sections/ — Page sections (Hero, About, etc.)

    ← PrerequisitesNext: Backend Guide →