What I Learned
- Learned how to use React Router by implementing multi-page navigation
- Used Tailwind CSS and implemented dark mode for the first time
- Learned how to configure ESLint, Prettier, and Husky from scratch to ensure code quality and automate pre-commit checks
- Wrote my first test cases using Vitest and Testing Library
- Learned Firebase Hosting for deployment
- Studied the basics of GitHub Actions to customize the workflow generated by the Firebase CLI, enabling automated testing on pull requests and deployment
- Recreated and customized a design originally made for HTML/CSS practice, implementing it in React and adapting the layout and structure
- Experienced the full development flow of a React app beyond tutorials
- Learned Markdown syntax to write proper project documentation (like README)
Tech Stack
| Frontend |
React
React Router
TypeScript
Tailwind CSS
Vite
|
|---|---|
| Code Quality |
ESLint
Prettier
Husky
|
| Testing |
Vitest
Testing Library
|
| Deployment |
Firebase Hosting
GitHub Actions
|
Feature
Dark Mode
Uses Tailwind CSS dark mode. Clicking the toggle adds a dark class to <html>, switching to the dark theme.