Skip to main content

Frontend Training Track (React)

Interns: 3

Tech Stack: HTML, CSS, Tailwind CSS, JavaScript, TypeScript, React, TanStack (Router, Query, Table, Form), Apollo Client, GraphQL, Zod

Prerequisites: CS graduates with programming fundamentals

Back to Overview

Phase 1: Foundation Learning (Week 1-4)​

Week 1: Web Fundamentals + Tailwind CSS​

Topics:

  • Development environment setup (VS Code, Node.js, Git)
  • Git fundamentals (clone, branch, commit, push, pull, PR workflow)
  • HTML5 (semantic elements, forms, accessibility basics)
  • CSS fundamentals (selectors, box model, flexbox, grid)
  • Tailwind CSS (utility-first approach, responsive design, customization)
  • JavaScript for web (DOM manipulation, events)
  • Browser DevTools
  • pnpm package manager basics

Self-Learning:

  • Git tutorial + practice
  • HTML/CSS crash course
  • Tailwind CSS documentation and playground
  • Build 2 responsive pages with Tailwind

Deliverables:

  • Dev environment fully set up
  • Git workflow understood (branch, commit, PR)
  • 2 responsive web pages built with Tailwind CSS
  • DOM manipulation exercises completed

Checkpoint: Friday review with buddy

Week 2: Modern JavaScript + TypeScript​

Topics:

  • ES6+ features (arrow functions, destructuring, spread, rest, modules)
  • Array methods (map, filter, reduce, find)
  • Async JavaScript (promises, async/await, error handling)
  • Working with APIs (fetch, JSON)
  • TypeScript basics (types, interfaces, type inference)
  • TypeScript with functions and objects

Self-Learning:

  • ES6+ tutorials and practice
  • Async JS exercises
  • TypeScript fundamentals course

Deliverables:

  • 15+ JS practice problems (ES6+ focused)
  • Async mini-project (fetch data from public API)
  • Convert JS project to TypeScript
  • TypeScript basics assessment passed

Checkpoint: Friday review with senior

Week 3: React Core + Testing Fundamentals​

Topics:

  • React fundamentals (JSX, components, props)
  • State management with useState
  • Event handling in React
  • Conditional rendering and lists
  • useEffect hook and side effects
  • Component lifecycle understanding
  • Styling with Tailwind in React
  • Testing with Vitest and React Testing Library
  • Writing unit tests for components

Self-Learning:

  • Official React documentation (Main Concepts)
  • Vitest and React Testing Library docs
  • Build multiple components with tests
  • Practice useState and useEffect

Deliverables:

  • 5+ React components built with Tailwind
  • Simple React app (Todo list with CRUD)
  • useEffect exercises (data fetching, cleanup)
  • Unit tests written for components (Vitest + RTL)

Checkpoint: Friday review + assessment

Week 4: React Applied + TanStack + GraphQL​

Topics:

  • Custom hooks (creating reusable logic)
  • TanStack Router (routing, navigation, params, loaders)
  • TanStack Query for REST APIs (useQuery, useMutation, caching)
  • TanStack Form and TanStack Table introduction
  • Zod schema validation
  • GraphQL fundamentals (queries, mutations, fragments)
  • Apollo Client for GraphQL APIs (setup, queries, mutations)
  • Apollo Client features (suspense, refetching, cache, fragments)
  • Error boundaries and loading states
  • Introduction to project codebase

Self-Learning:

  • TanStack documentation (Router, Query, Form, Table)
  • Apollo Client and GraphQL tutorials
  • Zod documentation
  • Build multi-page app with TanStack Router
  • Explore actual project codebase

Deliverables:

  • App with TanStack Router (multiple routes, navigation)
  • 2 custom hooks created
  • Form with Zod validation
  • GraphQL queries and mutations with Apollo Client
  • Project codebase explored and documented

Checkpoint: Month 1 Evaluation

Phase 2: Guided Real Projects (Week 5-8)​

Work on actual project features with close senior supervision

Week 5: First Real Task​

Focus:

  • Assigned first real feature/task (small, well-scoped)
  • Understanding codebase patterns and conventions
  • Code review process
  • Daily check-ins with buddy

Deliverables:

  • First task assigned and understood
  • Implementation started following codebase patterns
  • Questions documented and clarified
  • Daily standups attended

Checkpoint: Friday code review

Week 6: Feature Implementation​

Focus:

  • Completing first feature
  • Writing tests for the feature
  • PR submission and review process
  • Addressing review feedback

Deliverables:

  • First feature completed
  • Tests written
  • PR submitted and reviewed
  • Feedback addressed and merged

Checkpoint: Friday review with senior

Week 7: Second Feature + Collaboration​

Focus:

  • Second feature (slightly larger scope)
  • Collaboration with backend team
  • UI/UX handoff understanding
  • Cross-team communication

Deliverables:

  • Second feature in progress
  • Backend API integration done
  • UI/UX specs followed
  • Team collaboration demonstrated

Checkpoint: Friday review + peer feedback

Week 8: Feature Completion + Learning Gaps​

Focus:

  • Complete second feature
  • Address any learning gaps identified
  • Performance and code quality
  • Prepare for independent work

Deliverables:

  • Second feature completed and merged
  • Learning gaps addressed
  • Code quality standards met
  • Ready for Phase 3

Checkpoint: Month 2 Evaluation

Phase 3: Independent Ownership (Week 9-12)​

Own features end-to-end with minimal guidance

Week 9: Independent Feature Start​

Focus:

  • Assigned feature to own completely
  • Self-driven planning and implementation
  • Seek help only when truly stuck
  • Document decisions and trade-offs

Deliverables:

  • Feature spec understood/clarified independently
  • Implementation plan created
  • Development in progress
  • Decision log maintained

Checkpoint: Friday check-in (guidance only if blocked)

Week 10: Independent Feature Completion​

Focus:

  • Complete the independent feature
  • Thorough testing
  • Documentation
  • Demo preparation

Deliverables:

  • Feature completed and tested
  • PR approved and merged
  • Documentation updated
  • Demo to team

Checkpoint: Friday demo to team

Week 11: Ownership + Knowledge Sharing​

Focus:

  • Take on additional tasks/bugs
  • Help other interns if needed
  • Document learnings for future interns
  • Process improvement suggestions

Deliverables:

  • Additional tasks completed
  • Knowledge document created
  • Process improvements suggested
  • Peer support provided

Checkpoint: Friday review

Week 12: Final Wrap-up & Presentation Prep​

Focus:

  • Complete any remaining work
  • Final presentation preparation
  • Self-assessment writing
  • Documentation cleanup

Deliverables:

  • All tasks completed and handed over
  • Final presentation prepared
  • Self-assessment document written
  • 12-week learning summary drafted

Checkpoint: Friday review

Week 13: Final Evaluation & Conversion​

Focus:

  • Final presentation to leadership
  • Evaluation meetings
  • Feedback discussion
  • Conversion decision

Deliverables:

  • Final presentation delivered
  • Evaluation completed
  • Feedback collected
  • Conversion decision received

Checkpoint: Final Evaluation Meeting