Welcome to my journey to master React (JavaScript & TypeScript) with Tailwind CSS and Python backends (FastAPI/Flask) using SQLite for rapid prototyping.
This repo contains 10 full-stack projects, progressing from beginner to intermediate level. Each project has two versions:
- ✅ JavaScript version
- ✅ TypeScript version
- Frontend: React + Tailwind CSS
- Backend: FastAPI or Flask (per project)
- Database: SQLite
- State Management:
useState,useContext - HTTP:
axiosor nativefetch
| # | Project | JS | TS | Backend | Notes |
|---|---|---|---|---|---|
| 1 | Counter + Analytics Logger | ✅ | ✅ | FastAPI/Flask | Simple button + DB logging |
| 2 | Todo App with Login | ☐ | ☐ | FastAPI/Flask | Auth, filtering, protected routes |
| 3 | Pomodoro with History | ☐ | ☐ | FastAPI/Flask | Timer, sessions, charts |
| 4 | GitHub User Tracker | ☐ | ☐ | FastAPI (API proxy) | GitHub API + cache |
| 5 | Markdown Blog CMS | ☐ | ☐ | Flask/FastAPI | Admin CRUD, markdown preview |
| 6 | Mini Ecommerce | ☐ | ☐ | FastAPI/Flask | Cart, products, admin |
| 7 | Feedback App | ☐ | ☐ | Flask | Anonymous submission, moderation |
| 8 | Expense Tracker | ☐ | ☐ | FastAPI | Pie charts, filter by month |
| 9 | Quiz System | ☐ | ☐ | Flask/FastAPI | Leaderboards, timed quizzes |
| 10 | Medication Donation Tracker | ☐ | ☐ | FastAPI | File uploads, Google Maps |
✅ = Completed | ☐ = Not Started | ✳️ = In Progress
git clone https://github.com/yourusername/fullstack-react-projects.git
cd fullstack-react-projectsEach project lives in its own folder:
/01-counter-logger
/02-todo-login
...
Follow the README.md inside each project for:
- Installation
- Backend/Frontend startup commands
- Environment variable setup (if needed)
Tracking is manual via this README.md. Update as you go or use:
- GitHub Projects board
- Issue tracker for todos/bugs
- Commits with tags like
feat(todo): add filtering
| Week | Goal |
|---|---|
| Week 1 | Complete 1–3 (JS versions) |
| Week 2 | Complete 1–3 (TS versions), Start 4 |
| Week 3 | 4–6 full stack |
| Week 4 | Finish all, refactor 2 into Next.js |
MIT License