Welcome to my 100 Days of Code journey, where I’m fully committing to mastering React.js and its ecosystem! Over the next 100 days, I’ll be pushing my boundaries, diving deep into learning, building projects, and stepping outside my comfort zone. Each day is a new opportunity to challenge myself and grow as a developer, and I’m excited to see how far I can go.
This challenge isn’t just about coding it’s about consistency, growth, and constantly evolving. From basic React concepts to advanced features, I’ll be documenting my progress with code files, projects, and logs.
Rules for My 100 Days of Code Challenge:
- 3 Hours a Day - Commit to at least 3 hours of coding every day, no matter what.
- No Backing Out - This challenge is a promise to myself, so no excuses.
- Build, Don’t Just Learn - Focus on building projects, not just consuming tutorials.
- Grouped Updates - I’ll post updates every 5–7 days, so I can focus on learning, not posting.
Start Date: April 15, 2025
End Date: July 23, 2025 (approx)
Update Frequency: Everyday
- React.js
- Tailwind CSS & Bootstrap
- React Router
- Firebase Authentication
- Firebase Hosting
- Clean Code & Component Architecture
- API Integration
I'll be actively sharing my progress, logs, and key takeaways throughout the 100 Days of Code challenge on these platforms:
Here are some of the mini-projects I’ve built so far during this challenge. Each one reflects concepts I’ve learned and practiced.
| Days | Project Name | Description | Link |
|---|---|---|---|
| Day 6 | Travel Journal | Designed a static travel journal page with individual travel entries passed via props. | View Folder → |
| Day 07 & 08 | User List App | Built a beautiful user list UI with .map() and props. Dynamically renders cards from data.js. | View Folder → |
| Day 08 to 18 | Chef Claude - AI Recipe Generator | Built a smart recipe suggestion tool using Hugging Face’s Mixtral model. Takes ingredients and generates a recipe with AI integration. | View Folder → |
| Day 19 to 21 | Meme Generator | Created a meme generator with top/bottom text overlays, fetching meme image via the Imgflip API. Added a download as PNG feature using html2canvas. | View Folder → |
| Day 21 to 33 | FocusFlow | A clean and minimal productivity app featuring a Pomodoro timer and Todolist. Built using React. Enhanced with animations, minimalistic UI. | View Repo → |
| Day 34 to 36 | xMind Blog Website | A responsive blog layout built using pure Bootstrap 5. Includes carousel, featurettes, blog cards, and a contact form. | View Repo → |
| Day 40 & 41 | Tenzies Game | A React implementation of the Tenzies game. Includes dice holding, re-roll logic, confetti on win, and high score tracking with localStorage. | View Folder → |
| Day 46 to 48 | Assembly: Endgame | A dynamic word-guessing game made in React, styled with Tailwind. Features include user input validation, endgame hints using useMemo, and letter reveal logic. |
View Folder → |