Skip to main content

2. Front-End

Recommended stack:

  • React using Vite or Next.js
  • TypeScript? Optional based on the student
  • Definitely a UI library like Material-UI, TailwindCSS, or AntDesign
  • NO REDUX (explained below)

Duration​

  • Average for past successful students: 16 sessions
  • 90th percentile: 23

Expected Outcomes:​

At the end of the module, the student:

✅ Understands the 3-tier architecture (client/server/db); responsibilities and limitations of each tier

✅ Can create fairly complex front-ends using React.js without help

✅ Is hireable as a junior front-end developer

✅ Has the project deployed and live (Github Pages, Vercel, etc.)

✅ Can effectively use AI coding agents (Cursor/Copilot) to accelerate React development, while maintaining good habits when working with AI agents, including code review and architectural control

Topics​

Below are the topics that we expect students to know by the end of this module:

  • Basics: React components, State vs Props, JSX, rendering
  • Class vs Functional
  • Styling:
    • Inline
    • CSS files
    • styled-components
  • React lifecycle
  • Hooks: useState, useEffect, useContext
  • Interactions between:
    • Parent to child
    • Child to parent
    • Independent components
  • Debugging React:
    • Chrome devtools
    • Breakpoints
    • Console.log
  • Organization
    • When to separating components
    • How to organize components, files and folders
    • React component hierarchy: Best practices
  • Stateless components
  • react-router

AI Agent-Based Development​

A key focus of this module is learning to effectively use AI coding agents like Cursor Agent Mode or GitHub Copilot Agent Mode (in preview); where you tell the agent what to do, and it writes the code or runs terminal commands. This is becoming an essential skill that employers expect.

Tips​

For coaches:

  • Cursor has a good free tier
  • Start this towards mid/end of the module
  • Expect students to complete tasks using angets for a few weeks until they get the hang of it

For students:

  • Always review and understand generated code
  • Start with clear requirements and component design before engaging the AI
  • Break down problems and solve them step by step vs. just asking for the whole thing. Example:
    • Start with a simple component
    • Add button 1
    • Add button 2
    • Add styling

Avoid:​

  • React Performance Optimization
  • Redux: We have tried redux with multiple students and they have suffered. The coaches regretted the decision too.

Projects:​