Product Engineer
Accelerated Roadmap for learning to code
If you haven’t already, check out our Pre-Requisites guide to get your local machine setup.
Overview
This is an accelerated roadmap focusing on only the most important things to know to be a productive Full-Stack JavaScript Engineer.
This roadmap takes a hands-on approach, with learning split into 3 distinct phases. Each phase is divided into:
- Core: The absolute minimum you need to start building
- Deep Dive: Optional deeper understanding for when you take a break from building and spend an entire day diving deeper into 1 topic
After each phase’s core section, start building immediately! Use Cursor as your AI pair programmer to iterate quickly.
Phase 1: Frontend only
- Core Skills: HTML, CSS, JavaScript
- Project: Personal Portfolio Website
- Learn all the basics of HTML, CSS, JavaScript to get you started
- Build a responsive portfolio website showcasing future projects
Phase 2: Frontend + Backend
- Core Skills: ReactJS, ExpressJS, TailwindCSS
- Project: Build an Online Multiplayer IO Game
- Build a simple backend that authenticates users with Clerk
- Build a clean frontend User Interface with ReactJS and TailwindCSS
- Implement a real-time game server hosted on Hathora
Phase 3: Full-Stack SAAS
- Core Skills: NextJS, SQL, Prisma
- Project: Build a Complete SAAS Application using Titan
Roadmap
For all projects, remember to build features and fix/debug issues quickly with Cursor! -> See Efficiency
We’ll be deploying to all projects to Vercel
Phase 1: Git + Frontend Essentials
Core Frontend Curriculum:
Recommended Mini Project Ideas:
- Pixel Art Creator: Build a grid-based drawing tool with color picker
- Memory Card Game: Create a matching game with flip animations
- Pomodoro Timer: Build a stylish productivity timer with notifications
- Interactive Story Game: Build a “Choose Your Own Adventure” with branching paths
- Recipe Finder: Search and display recipes with filters and categories
Ask ChatGPT to generate more ideas for you using this prompt:
Instructions
Just watch the videos and use Cursor Composer to help you create mini dummy examples of each topic to solidify your understanding.
See Efficiency for more details on how to use Cursor Composer to learn.
Your goal for this phase is to just get a solid understanding of the basics.
If you need more guidance, we’ll have livestream Q&A sessions on how to learn and work through Phase 1. An Announcement will be made in the Discord Server and on my Social Media. Keep an eye out for them!
Skills gained:
- HTML ✅
- CSS ✅
- JavaScript ✅
- Git (for version control) ✅
Deep Dive Days
- Flexbox Froggy - Master flexbox by playing a fun game where you help Froggy and friends
- Grid Garden - Learn CSS grid layout while growing your carrot garden
- JavaScript Mental Model - Grasp a deeper understanding of how JavaScript works to debug and review code like a pro
- Array Methods Deep Dive - Most common array methods to manipulate data
- Advanced Git - Watch the 2nd Chapter. Advanced Git commands.
Phase 2: Frontend + Backend
Core Backend Curriculum:
Frontend Upgrade Curriculum:
Recommended Project: Online Multiplayer Browser IO Game
Build a multiplayer game with the Game Server hosted on Hathora, Database on Supabase and the Frontend on Vercel
The nice thing about Hathora is that they take care of 90% of the infrastructure for you, so you can focus on building the game. You don’t need to create a game server from scratch, or worry about scaling. They deal with the hard stuff, so we can focus on the core game logic.
We’ll host the Frontend on Vercel and deploy the (Docker) containerized Backend to Hathora’s cloud platform.
Instructions
Clone our IO Game Boilerplate Repository and build your own game logic on top of it.
Livestreams on building a fully functional IO Game will be announced in the Discord Server. Keep an eye out for them!
Skills gained:
- ReactJS ✅
- ExpressJS ✅
- TailwindCSS ✅
- Docker ✅
Deep Dive Days
Phase 3: Full-Stack SAAS
Core Curriculum:
Project: Complete SAAS Application
Build a complete SAAS application using Titan
Livestreams on building entire products with Titan will be announced in the Discord Server.
Skills gained:
- NextJS ✅
- SQL ✅
- Prisma ✅
- Webhooks ✅
Deep Dive Days
- All 29 Mistakes Beginners Make in NextJS
- PostgreSQL Full Course
- SQL Murder Mystery - Practice SQL by solving an intriguing murder case
- Database Migrations
- All the ways HTML gets to your browser - Evolution of the Web over time
- UI/UX Design - Learn how to design a good UI/UX without hiring a designer
Next Steps
We have a dedicated Discord channel (#hiring) for current members who have already deployed a product in production and are now actively ‘hiring’ for more engineers to build and scale.
They will be using Titan (ReactJS, NextJS, etc.) so you’ll already be familiar with the stack.
This is how we embed team-work experience into the learning. Working with another member from the community on a real-world project will count as genuine experience (at a registered company) - Feel free to add this to your CV!
Bear in mind that members who are hiring may require a condition that you pass the Technical Assessment with a specific score or higher, and a short video interview to assess skills/chemistry.