JavaScript Learning Journey

A structured 7-week learning plan to master JavaScript/TypeScript backend development and React frontend, culminating in a Personal Finance Tracker project.

Overview

Phase	Weeks	Focus
1	Week 1-4	Backend Fundamentals (Node.js, TypeScript, Fastify, PostgreSQL)
2	Week 5	React Fundamentals
3	Week 6-7	Final Project: Personal Finance Tracker

Schedule

• Time: 1 hour per day
• Days: Weekdays only (Monday-Friday)
• Total: 35 learning days

Folder Structure

Learn/JavaScript/
├── README.md              # This file
├── Modules/               # Reference learning materials
│   ├── LEARNING_MODULE.md    # English version
│   └── LEARNING_MODULE_ID.md # Indonesian version
│
├── Exercises/             # One folder per day (guide + practice + exercise)
│   ├── day01/
│   │   ├── DAY_01.md     # Day 1 learning guide
│   │   ├── practice.ts   # Type code examples here
│   │   └── exercises.ts  # Complete exercises here
│   ├── day02/
│   │   ├── DAY_02.md
│   │   └── ...
│   ├── ...
│   └── day35/
│       └── DAY_35.md     # Day 35: Project Completion
│
├── Projects/              # Mini projects & Final project
│   ├── todo-api/         # Week 1-2 mini project
│   ├── book-api/         # Week 3 mini project
│   ├── notes-api/        # Week 4 mini project
│   └── finance-tracker/  # Final project (Week 6-7)
│       ├── backend/
│       └── frontend/
│
└── Progress/
    └── PROGRESS.md       # Track your learning progress

How to Learn

Daily Routine (1 hour)

1. Read (30-35 min): Open the day's file in Exercises/dayXX/DAY_XX.md
2. Practice (15-20 min): Type code in Exercises/dayXX/
3. Quiz (10 min): Answer questions, check with AI assistant

Weekly Review

• End of each week: Review quiz answers
• Build mini projects to reinforce learning

Getting Started

1. Open Exercises/day01/DAY_01.md
2. Read the module section referenced
3. Type the code examples (don't copy-paste!)
4. Complete the exercises
5. Answer quiz questions
6. Update Progress/PROGRESS.md

Tech Stack You'll Learn

Learning Phase (Day 1-20)

During the fundamentals phase, you'll learn concepts using simplified tools:

• Runtime: Node.js
• Language: TypeScript
• Framework: Fastify
• Database: Simulated (fakeDb) - focus on patterns, not setup
• Auth: JWT, bcrypt concepts

Final Project (Day 26-35)

The Finance Tracker uses a production-ready stack matching the LEARNING_MODULE:

• Runtime: Node.js
• Language: TypeScript
• Framework: Fastify
• Database: PostgreSQL (via Docker)
• ORM: Sequelize (raw SQL queries)
• Auth: JWT, bcrypt
• Containerization: Docker

Frontend

• Library: React
• Language: TypeScript
• Styling: Tailwind CSS
• Charts: Recharts

Final Project: Personal Finance Tracker

A full-stack application where you can:

• Register and login securely
• Track income and expenses
• Categorize transactions
• View charts and reports
• Generate monthly summaries

Tips for Success

1. Type, don't copy: Typing code helps muscle memory
2. Understand, don't memorize: Focus on concepts
3. Practice daily: Consistency beats intensity
4. Ask questions: Use AI assistant to clarify doubts
5. Build projects: Apply what you learn immediately

Need Help?

• Check the Glossary at the end of LEARNING_MODULE.md
• Ask your AI assistant to explain concepts
• Review previous days if something is unclear

---

Start your journey: Open Exercises/day01/DAY_01.md and begin!