Project 01 — Interactive Front-End Application
What This Is
Your first major project is a collaborative front-end application built with vanilla TypeScript, Tailwind CSS, and at least two public APIs. No frameworks — everything you've learned in Modules 1–6.
Starter files
Download the Project 01 starter (Vite + TypeScript + Tailwind) and build from there:
Download Project 01 starter (ZIP)
After downloading, unzip, run npm install, copy .env.example to .env, and add your API keys. See the starter's README for setup steps.
Timeline
| Week | Goal |
|---|---|
| Week 7 | Project kickoff, wireframes, API research, repo setup |
| Week 8 | Build sprint + final polish, presentations |
The Brief
Build something genuinely useful that solves a real problem or satisfies a real interest. Apps that exist only to check assignment boxes are less impressive in portfolios than apps built with care.
Technical Requirements
- Vanilla TypeScript (compiled with Vite)
- Tailwind CSS for all styling
- At least 2 different public APIs consumed with
fetch - Client-side data persistence with localStorage
- At least one modal/overlay (no native
alert,prompt, orconfirm) - Fully responsive (mobile + desktop)
- Dark mode support
- Deployed to Netlify or GitHub Pages
- Professional README
Process Requirements
- GitHub repo with at least one commit per day per team member
- Meaningful commit messages (conventional commits)
- All work done in feature branches — no direct commits to
main - Pull requests reviewed by a teammate before merging
- Issues or a project board used to track tasks
API Ideas
| API | What You Can Build |
|---|---|
| OpenWeatherMap | Travel weather comparison |
| Spotify | Music discovery tool |
| GitHub | Dev portfolio explorer |
| Giphy | Reaction GIF search |
| Open Library | Book finder + reading list |
| JokeAPI | Office-appropriate humor app |
| RAWG | Video game discovery |
| CocktailDB + MealDB | Recipe / meal planner |
| NASA | Astronomy picture of the day gallery |
| CoinGecko | Crypto price tracker |