Forem: Alabi Temitope

My 10-Day React Journey: Rebuilding Foundations on Scrimba

Alabi Temitope — Thu, 22 May 2025 04:40:57 +0000

From Planning to Building: Strengthening My React Skills

After months of planning ambitious full-stack projects, I faced a moment of clarity. While I had worked with React before, I realized my foundation needed strengthening before tackling the complex applications I had envisioned. This led me to Scrimba's React course — a decision that transformed my development approach.

Here's my journey through 10 days of focused React learning, from basics to building a functional AI-powered recipe app.

Day 111: Back to Basics

I started my journey by revisiting React fundamentals on Scrimba. Even with prior experience, I found myself discovering fresh concepts and filling knowledge gaps. The interactive learning environment made revision engaging rather than tedious.

The day focused on:

Core React principles
Setting up a development environment
Creating static pages

What surprised me most was how much I'd forgotten or never properly learned in the first place. This reinforced my decision to rebuild from the ground up.

Day 112: Completing React Fundamentals

Day two saw me completing Section 1 of the course, covering:

✅ Why React exists and its advantages

✅ Development environment setup

✅ JSX syntax and patterns

✅ Component architecture

✅ Styling approaches

I built my first static page from scratch, solidifying these concepts through practice rather than just theory. The satisfaction of seeing something tangible, even if simple, provided motivation to continue.

Day 113: Component Communication

This day brought a significant breakthrough in understanding data flow between components:

✅ Passing data into child components

✅ Properly receiving and utilizing props

✅ Component composition patterns

While I had used props before, truly understanding the patterns and best practices made everything click in a new way. The foundation for truly dynamic applications was taking shape.

Day 114: The Power of Reusability

Completing Section 2 on data-driven React felt like unlocking a superpower:

• I finally understood why component reusability is React's greatest strength

• Transformed static elements into dynamic, data-powered components

• Built entire pages from data arrays efficiently

This approach to thinking about UI as a function of data rather than hardcoded elements completely changed my mental model for building applications.

Day 115: Entering the Interactive World

Starting Section 3 introduced state management through a practical project - Chef Claude (a cooking application):

• Implemented React event listeners

• Established foundations for state management

• Planned the interactive elements

For the first time, I could see how truly interactive UIs would come to life through state management. The theoretical understanding was transforming into practical application.

Day 116: State in Action

Day 116 was all about implementation:

• Mastered useState() hooks for practical scenarios

• Built proper state initialization patterns

• Created dynamic state updates based on user interaction

Chef Claude's first interactive features were working! Seeing the application respond to user actions reinforced how powerful React's state management can be when properly implemented.

Day 117: Forms Mastery

Forms had always been a pain point in my React development, but Day 117 changed that:

✅ Implemented React 19's form handling patterns

✅ Built controlled components that maintained synchronization

✅ Created proper validation patterns

Forms finally made intuitive sense rather than feeling like fighting against the framework.

Day 118: Conditional Rendering

Transforming Chef Claude's UI with efficient conditional rendering:

• Replaced bulky if-else blocks with ternary operators

• Created clean, readable conditional rendering patterns

• Built smarter, more responsive interfaces

This seemingly small optimization made the code significantly more readable and maintainable.

Day 119: Project Complete - Gemini Chef!

The excitement of completing a functional project - Chef Claude evolved into Gemini Chef:

🔹 Integrated Gemini API for AI-powered recipes

🔹 Applied all concepts learned throughout the course:

Event handling
State management
Conditional rendering
Form processing

Seeing all these concepts work together in a cohesive application was incredibly satisfying.

Day 120: Production Refinement

The final day focused on transforming Gemini Chef from a learning project to a production-ready application:

✅ Added loading states to improve user experience

✅ Implemented auto-scroll to recipes after loading

✅ Built robust input validation

✅ Created responsive design for all devices

✅ Refactored code for maintainability

These refinements transformed a functional prototype into something I'm proud to share publicly. The live application is now available at https://gemini-chef.vercel.app.

What I've Learned Beyond React

This journey taught me more than just React concepts. I learned:

The value of rebuilding foundations - Even with prior experience, revisiting basics revealed critical gaps in my knowledge.
Learning in public - Documenting my journey helped solidify concepts and created accountability.
Building practical projects - Theory only becomes useful when applied to solving real problems.
Perseverance matters - Despite challenging months personally, consistent learning (even in small chunks) produced meaningful progress.

Next Steps: Full Stack Expansion

With a strengthened React foundation, I'm now better prepared to tackle the full-stack projects I originally planned. Next on my learning path:

TypeScript integration with React
Backend development with Node.js
Database design and implementation
Authentication systems
Deployment pipelines

The journey to becoming a complete full-stack developer continues, but this React foundation will serve as the cornerstone for everything I build moving forward.

Final Thoughts

If you're considering a similar learning journey, I highly recommend Scrimba's interactive approach. The combination of video instruction and live coding environments accelerated my understanding far beyond what documentation alone could provide.

Despite life's inevitable challenges, finding even small pockets of time to learn consistently has compounded into significant skill development. The key was persistence rather than perfection.

I look forward to sharing more of my development journey as I expand into full-stack development. The Gemini Chef project represents just the beginning of what's possible with these strengthened React skills.

Follow my continued learning journey:

Twitter: https://x.com/Toptech5419

LinkedIn: https://www.linkedin.com/in/toptech5419/

medium: https://medium.com/@alabitemitope51

GitHub: https://github.com/toptech5419

Reviving My UI Design Journey & React Progress: Days 108–110

Alabi Temitope — Mon, 14 Apr 2025 03:27:23 +0000

Day 108: Reviving UI Design Fundamentals

Focused on intentional design principles:
- Whitespace
- Color & Contrast
- Scale
- Alignment
- Typography
- Visual Hierarchy
Key takeaway: Design is intentional communication.

Day 109: Building Simple Layouts

Completed Scrimba’s "Building a Simple Layout" sub-module.
Key learnings:
- Grid vs Flexbox for structural decisions
- Responsive spacing techniques
- Balancing content density and whitespace
Next step: Refactor UI patterns and optimize code.

Day 110: UI Design Module Completion

Finished Scrimba’s UI design module.
Refactored a UI from scratch.
Progress: Bridging theory to practice.

What’s Next?

Shifting focus to React Basics (Section 1: Static Pages).

Connect & Explore:

📝 Medium

💻 Dev.to

👔 LinkedIn

🔧 Code

Building TravelPlanner: A React-Powered Trip Organizer

Alabi Temitope — Sun, 23 Mar 2025 05:25:11 +0000

As a developer passionate about solving real-world problems, I recently built TravelPlanner — a web app that simplifies trip planning by aggregating flights, hotels, weather, and maps into a single interface. Here’s a deep dive into the project, its challenges, and what’s next.

What is TravelPlanner?

TravelPlanner helps users:

Search and compare flight options
Discover hotels with ratings and pricing
Check real-time weather forecasts
Explore destinations via interactive maps

Try the live demo: https://travelplanner-henna.vercel.app/

Key Features

Flight Search
- Filter by price, duration, and airlines
- Visual timeline for departure/arrival times
Hotel Recommendations
- Star ratings and price-per-night displays
- Fallback images for missing hotel photos
Weather Widget
- Real-time temperature and conditions
Interactive Map
- Leaflet integration with dynamic markers

Tech Stack

Frontend: React, TypeScript, Vite, Tailwind CSS
APIs: Amadeus (flights/hotels), OpenWeatherMap (weather)
Libraries: React Router, Leaflet, Lucide Icons

Challenges & Solutions

API Data Parsing
- Flight/hotel data from Amadeus had nested structures. Solved by creating strict TypeScript interfaces and data-mapping functions.
Error Handling
- Implemented toast notifications for API failures and invalid destinations.
Leaflet Map Integration
- Fixed missing marker icons by overriding Leaflet’s default URL logic.

Future Improvements

User authentication for saving trips
Booking system integration
Packing list generator based on weather
Dark mode toggle

Get Started Locally

Clone the repo:

   git clone https://github.com/toptech5419/100-days-of-code  
   cd plan-it-here-main

Install dependencies:

   npm install

Add API keys (Amadeus + OpenWeatherMap) to a .env file.

Connect & Contribute

GitHub Repo: github.com/toptech5419/100-days-of-code
LinkedIn: linkedin.com/in/toptech5419
X (Twitter): @toptech5419
Medium: medium/alabitemitope51

Final Thoughts

Building TravelPlanner taught me the importance of resilient API integrations and user-centric design. I’d love your feedback on the project! Whether you’re a traveler testing the app or a developer interested in contributing, let’s connect and make trip planning even better.

Live demo: https://travelplanner-henna.vercel.app/

Days 101-102: Back to Frontend Learning & Building a Personal Dashboard Chrome Extension

Alabi Temitope — Fri, 14 Mar 2025 04:27:41 +0000

After a brief internship break, I resumed my learning journey on Scrimba to strengthen my frontend development skills. Here’s what I accomplished over two days:

Day 101 Focus: Async JavaScript & Promises

Revisited promise rejection handling and error-first callbacks.
Practiced converting callback-based code to promise/async-await patterns.
Started building a personal dashboard with:
- Cryptocurrency price tracking (using CoinGecko API)
- Weather integration (OpenWeatherMap API)
- Dynamic time display with timezone support
- Background image fetching from Unsplash

Day 102: Completing the Dashboard Chrome Extension

Implemented Chrome extension packaging for the dashboard
Added modern CSS features:
- CSS variables for theme switching (light/dark modes)
- Flexbox layouts for responsive design
- CSS animations for data refresh indicators
Integrated error handling with try...catch blocks
Finalized API data flow:
- Async/await for parallel API calls
- LocalStorage for user preferences
- Chart.js integration for crypto price visualization

Key Features of the Dashboard:

Real-time cryptocurrency prices with alerts
Current weather + 3-day forecast
Multi-timezone clock with precision updates
Customizable themes and background images
Mobile-first responsive design

Challenges Overcome:

Managing multiple API rate limits
Synchronizing async data fetches
Implementing smooth theme transitions
Packaging as Chrome extension with service workers

What’s Next:

Add more crypto comparison features
Implement WebSocket for real-time updates
Explore IndexedDB for offline functionality

Project Links:

GitHub Repo: https://github.com/toptech5419/100-days-of-code.git

Connect With Me:

LinkedIn: https://www.linkedin.com/in/toptech5419

X (Twitter): https://x.com/Toptech5419

Medium: https://medium.com/@alabitemitope51

This project solidified my understanding of modern JavaScript patterns and API integrations. Onward to more complex challenges!

My HNG Internship Journey: Stage 4 — Designing a Kanban Board in Figma

Alabi Temitope — Sun, 09 Mar 2025 10:20:56 +0000

Stage 4 of the HNG Internship surprised me. After coding-focused tasks, this stage required designing a Kanban Board in Figma — a tool I had little experience with. Here’s how it went.

Task Overview

We were asked to design a simple Kanban Board with:

Desktop (1440px) and mobile (375px) views.
A 5-color palette, system fonts, hover states, empty states.
Components like task cards, avatars, column headers, and buttons.

Acceptance Criteria:

Consistent spacing, typography, and visual hierarchy.
Clean Figma organization (components, styles).

Rejection Risks:

Poor color contrast, inconsistent styling, messy layers.

Execution & Challenges

Learning Figma Fast:

With only days to learn Figma, I watched tutorials and studied Trello/Behance examples. Basics like frames, components, and auto-layout were overwhelming at first.

Design Struggles:

Color Hierarchy: Picking complementary colors within a 5-palette limit was tricky. My initial choices lacked contrast.
Spacing Consistency: Aligning elements across desktop/mobile views took multiple iterations.
Component Organization: Naming layers and creating reusable components felt chaotic.

Outcome:

I submitted the design but didn’t meet the grading standards. My key issues:

Inconsistent spacing in mobile view.
Poor color contrast in column headers.
Messy layer names (e.g., “Rectangle 23” instead of “Task Card BG”).

Lessons Learned

Design Tools Matter: Figma’s learning curve is steep for coders. Practice is key.
Details Are Everything: Tiny spacing/color errors break usability.
Feedback Helps: I should’ve shared drafts earlier for peer reviews.

Next Steps

Rebuild the Kanban Board with better color contrast and organization.
Study Figma’s auto-layout and component features deeply.

Links

Figma Design: [https://www.figma.com/design/CY1uY8jR2nMbKvl2mm3vk5/Simple-Kaban-Board--HNG-Internship-stage-4?node-id=0-1&t=Si9eiEiKCpawbzF2-1]

GitHub: https://github.com/toptech5419/myHNGInternship-journey.git

LinkedIn: https://www.linkedin.com/in/toptech5419/

X (Twitter): https://x.com/Toptech5419

medium: https://medium.com/@alabitemitope51

This stage humbled me, but it’s a reminder that growth happens outside comfort zones. Onward!

My HNG Internship Journey: Stage 3 — Building an AI-Powered Text Processing Interface

Alabi Temitope — Tue, 04 Mar 2025 02:29:25 +0000

Two weeks ago, I completed Stage 3 of the HNG Internship. The task was to build a chat-style AI text processor using Chrome’s AI APIs for summarization, translation, and language detection. Here’s my experience.

Task Requirements

Create a chat-like interface where users input text and see outputs above.
Integrate Chrome’s AI APIs for translation (English, Portuguese, Spanish, etc.), language detection, and summarization.
Ensure accessibility, responsive design, and error handling.
Render action buttons (Summarize/Translate) based on text length and language.

Live Demo:

https://chattextgen.vercel.app/

Execution & Challenges

What Worked:

Successfully integrated Google’s Translator API for translating text and detecting languages.
Added a hover-to-translate feature: three dots appear on text hover, letting users translate to preferred languages.
Designed a responsive UI that works on mobile and desktop.

Struggles:

Summarization API Issues: Chrome’s Summarizer API repeatedly failed during testing. I tried multiple free alternatives, but none worked reliably. For now, summarization is incomplete.
Tight Deadline: Built this in days while balancing work commitments. Compromised on some edge cases to meet the deadline.
Error Handling: Implementing clear error messages for API failures required extra debugging time.

Outcome & Lessons

The app works for translation and language detection but lacks summarization. I’ll revisit this later with better APIs.

What I Learned:

Async JavaScript and API error handling are critical.
Accessibility (ARIA labels, keyboard navigation) takes patience but is worth it.
Time management is key with complex tasks.

Future Improvements

Find a reliable free summarization API.
Refine the UI for better visual feedback.
Add more languages and optimize performance.

Links to My Work

GitHub Repo: https://github.com/toptech5419/myHNGInternship-journey.git

LinkedIn: https://www.linkedin.com/in/toptech5419/

X (Twitter): https://x.com/Toptech5419

Medium: https://medium.com/@alabitemitope51

This stage taught me resilience in problem-solving. Onward to the next challenge!

My HNG Internship Journey: Stage 2 — Conference Ticket Generator

Alabi Temitope — Fri, 28 Feb 2025 06:21:07 +0000

Two weeks ago, I completed Stage 2 of the HNG Internship. The task was to build a Conference Ticket Generator using React. Here’s a breakdown of the journey.

Task Overview

What We Were Asked to Build:

A form with fields for full name, email, and avatar upload (via Cloudinary or image URL).
Form validation for required fields, email format, and image URL.
State persistence using local storage or IndexedDB.
Accessible design (keyboard navigation, screen-reader compatibility).
Ticket generation upon valid submission, displaying user details.
Pixel-perfect, responsive UI across all devices.

Live Demo:

https://conference-ticket-generator-steel.vercel.app/

Challenges I Faced

Starting Late: I underestimated the time needed and began coding too close to the deadline.
State Persistence: Syncing form data with local storage without causing re-render issues took time.
Accessibility Hurdles: Ensuring keyboard navigation and screen-reader compatibility was trickier than expected.
Validation Logic: Handling real-time error messages for Cloudinary URLs while keeping the form performant.

The Outcome

I submitted the task on time, but it’s not as polished as I wanted. For example:

The UI isn’t fully pixel-perfect.
Some edge cases (like specific image URL formats) aren’t fully handled.

I plan to refine it later, but for now, meeting the deadline was critical.

Links to My Work

GitHub Repo:

https://github.com/toptech5419/myHNGInternship-journey.git

LinkedIn:

https://www.linkedin.com/in/toptech5419/

X (Twitter):

https://x.com/Toptech5419

Medium:

https://medium.com/@alabitemitope51

Final Thoughts

This task pushed my React skills, especially in form management and accessibility. If you’re learning, start early—procrastination is a silent killer!

My HNG Internship Journey: Stage 1 — Building a Color Guessing Game

Alabi Temitope — Wed, 26 Feb 2025 16:19:38 +0000

Three weeks ago i built debugged, and did CSS animations — here’s how I tackled Stage 1!

The Task: A Color Guessing Game

For Stage 1 of the HNG Internship, I built a color-matching game using HTML, CSS, and vanilla JavaScript. The requirements were intense but rewarding:

Game Requirements:

Target Color Box (data-testid="colorBox") displaying a random color.
6 Color Options (data-testid="colorOption") as buttons with background colors.
Score Tracker (data-testid="score"), Game Status updates (data-testid="gameStatus"), and New Game Button (data-testid="newGameButton").
Responsive Design: Playable on all devices with smooth animations for feedback.

Key Features:

✅ No hex codes — players match colors visually!

✅ CSS animations for correct/wrong guesses (fade-outs, celebrations).

✅ Dynamic score updates and game reset functionality.

Play the game here: Color Game Demo

Challenges I Faced

1️⃣ CSS Animations:

Syncing animations with JavaScript logic was tricky. For example, triggering a “celebration” pulse for correct guesses while disabling buttons during transitions took careful timing.

2️⃣ Mobile-First Design:

Ensuring buttons stayed clickable on smaller screens required media queries and touch-friendly sizing.

3️⃣ Random Color Generation:

Avoiding duplicate colors in the options array forced me to refine my algorithm for shuffling and filtering.

How Scrimba Saved the Day (Again!)

Shoutout to Scrimba for their interactive courses! Their JavaScript and CSS modules gave me the confidence to:

Write clean event listeners for button clicks.
Master CSS transitions and keyframes for animations.
Structure code modularly for easy debugging.

This task felt like a natural extension of their project-based learning style!

Behind the Scenes: Code & Deadlines

GitHub Repo: myHNGInternship-journey
Time Crunch: Completed 3 weeks ago alongside internship tasks — a true test of prioritization!

What’s Next?

Stage 2 is already on the horizon! Follow my journey for updates:

X (Twitter): @Toptech5419
LinkedIn: Toptech5419
Medium: @alabitemitope51

Final Thoughts

Building this game taught me the importance of balancing functionality with user experience. If you’re learning frontend development, embrace projects like this — they’re the best way to grow!

Questions about the code or design? Drop a comment below!

#HNGInternship #FrontendDevelopment #WebDev #LearningInPublic

My HNG Internship Journey: Stage 0 — Building a Responsive Profile Card

Alabi Temitope — Mon, 24 Feb 2025 05:12:37 +0000

Coding under deadlines, embracing challenges, and why Scrimba made this easy!

The Task: A Responsive Profile Card

For Stage 0 of the HNG Internship, I was tasked with building a responsive profile card using HTML, CSS, and vanilla JavaScript. The requirements were specific:

Required Elements (with data-testid attributes):

Profile picture (responsive, aspect ratio maintained)
Full name, job title, short bio (50–100 words)
Current location, professional email
Social media links (LinkedIn, GitHub, etc.)
Dynamically updating UTC time

Acceptance Criteria:

✅ Clean, visually appealing UI/UX

✅ Mobile-responsive design

✅ All elements tagged for testing

✅ UTC time updates on page refresh

See my live demo here: Profile Card Demo

Execution & Challenges

While the task seemed straightforward, here’s where things got interesting:

Dynamic UTC Time:

Displaying real-time UTC required JavaScript’s Date() object. The catch? Ensuring it updates only on refresh (not live) to meet the task’s criteria.
Responsive Image Quirk:

Maintaining aspect ratio while adjusting width/height took trial and error. CSS’s object-fit: contain saved the day!
Testing-Ready Structure:

Adding data-testid attributes to every element forced me to think like a tester—valuable for future collaboration.

Why This Felt Effortless (Shoutout to Scrimba!)

I owe my smooth execution to Scrimba. Their project-based courses on HTML, CSS, and JS helped me:

Master responsive design principles
Write clean, modular JavaScript
Debug efficiently (no more endless console.log loops!)

This task felt like a Scrimba coding challenge—structured, practical, and confidence-boosting.

The Time Crunch

All HNG tasks come with strict deadlines. Stage 0 had a 48-hour window, pushing me to prioritize efficiency without compromising quality. It’s a taste of real-world dev work!

What’s Next?

Stage 1 is around the corner, and I’ll share updates here. Follow my journey across platforms:

X (Twitter): @Toptech5419
LinkedIn: Toptech5419
Medium: medium/toptech5419
GitHub Repo: myHNGInternship-journey

Final Thoughts

Stage 0 was a fantastic warm-up. If you’re learning to code, I highly recommend platforms like Scrimba for hands-on practice. Stay tuned for Stage 1—things are about to get even spicier! 🔥

Questions or feedback? Drop a comment below!

My HNG Internship Journey: A New Chapter in My Front-End Development Path

Alabi Temitope — Mon, 24 Feb 2025 05:06:25 +0000

Pausing My Daily Challenge for Something Bigger

For a while, I’ve been pushing myself through a personal daily coding challenge—learning, building, and improving my front-end skills. But for now, I’m hitting the pause button. Not because I’m giving up, but because my hands are full with something just as exciting: the HNG Internship.

Three weeks in, and this internship has already been filled with intense learning, real-world projects, and invaluable mentorship. It’s been a whirlwind, but one that’s pushing me to grow faster than ever before.

Why Front-End Development?

My journey into tech started with a love for design and problem-solving. The ability to take an idea, turn it into interactive experiences, and see users engage with something I built—that’s the magic of front-end development.

I’ve always been fascinated by how HTML, CSS, and JavaScript come together to create websites that are both functional and visually appealing. As I progressed, I dived deeper into React.js, animations, and state management, realizing that front-end development is much more than just building interfaces—it’s about crafting user experiences.

With the demand for front-end developers on the rise, I see this career path as an opportunity to not only grow but also contribute to exciting projects, collaborate globally, and eventually work remotely.

How HNG Internship Is Elevating My Skills

Joining HNG has been a game-changer. The structured program provides a fast-paced, immersive learning experience, helping me refine my skills through:

✅ Mentorship from industry experts, helping me write better code and solve problems efficiently.

✅ Collaboration with other developers, teaching me the value of teamwork in real-world projects.

✅ Exposure to job opportunities, as HNG connects developers to companies looking for front-end talent.

This internship is the perfect blend of challenge and growth, and I’m making the most of every moment.

My Goals for HNG Internship

1️⃣ Master Advanced Front-End Technologies – I aim to deepen my React.js knowledge, improve performance optimization, and get better at state management.

2️⃣ Build & Deploy Real-World Projects – Creating projects that add value while also strengthening my portfolio.

3️⃣ Improve My Problem-Solving Skills – Debugging efficiently and writing clean, maintainable code.

4️⃣ Network with Other Developers – Learning from peers, mentors, and experienced professionals.

5️⃣ Secure a Remote Front-End Developer Role – With the skills and experience gained from HNG, I hope to land a role where I can make meaningful contributions.

Follow My HNG Internship Journey

I’m documenting my progress and key learnings on GitHub. If you want to follow along, check out my repo:

🔗 GitHub: github.com/toptech5419/myHNGInternship-journey

I’ll also be sharing updates on my social media. Let’s connect!

📌 Medium: medium/toptech5419

📌 X (Twitter): x.com/Toptech5419

📌 LinkedIn: linkedin.com/in/toptech5419

Conclusion

Front-end development is more than just coding—it’s about bringing ideas to life. Through HNG, I’m sharpening my skills, gaining real-world experience, and building connections that will help me achieve my career goals.

I’m excited for this journey, the challenges ahead, and the growth that comes with it. Stay tuned as I continue to learn, build, and share my experiences! 🚀🔥

Week 14 of #100DaysOfCode – Pushing Through, Learning, and Building! 🚀

Alabi Temitope — Sun, 09 Feb 2025 16:20:00 +0000

Another exciting and productive week of coding is in the books! This week, I balanced multiple projects, refined my skills, and tackled new challenges head-on. Here’s a recap of my journey:

🎮 Days 94-96: Finalizing My War Game Project

I dedicated these days to improving the War Game I had been working on:

✅ Day 94 – Refactored the game’s style, ensuring it’s fully responsive and polished for all screen sizes. Clean code = better performance!

✅ Day 95 – Added crucial game functionalities, including:

🎵 Sounds for better user interaction
🃏 Smooth card movement
🏆 Winner announcement
🔄 Transitions for a seamless experience
🕹️ Enhanced game flow with interactive buttons

✅ Day 96 – Wrapped up the project:

Removed unnecessary FX sounds for simplicity
Added a loading status to improve UX
Cleaned up the code for better readability and maintainability

🔗 Check out the War Game here: Play the game!

🎥 Days 97-100: Movie Watchlist Project

After completing my game project, I jumped into another exciting build—a Movie Watchlist app using the TMDb API.

✅ Day 97 – Built the landing page, refined the UI, and integrated key functionalities to fetch movie data. Huge thanks to TMDb for their awesome API!

✅ Day 98 – Took a quick break from this project to complete a Profile Card for my HNG Internship deadline. Deadlines first! 💼⏳

🔗 Check it out here: Profile Card

✅ Day 99 – Got back on track and designed the Details Page while implementing functionality to store movies in localStorage.

✅ Day 100 – Finalized the Watchlist Page and added its core functionalities. Though a few finishing touches remain, the project is fully functional and ready to use!

🔗 Movie Watchlist Project: Explore the app

Final Thoughts & Next Steps

This week was a mix of problem-solving, learning, and execution. Each challenge helped me grow as a developer, and I’m excited to keep building. While my #100DaysOfCode challenge is wrapping up, this is just the beginning of my dev journey!

I’ll be adding more features to the Movie Watchlist project in the future—stay tuned! 🚀

Let’s connect and grow together! 👇

🔗 GitHub: My projects

📝 Medium: More insights

✖️ Twitter (X): Follow for follow

💼 LinkedIn: Let’s connect!

🚀 Week 13 of #100DaysOfCode: Building, Learning, and Growing!** 🎉

Alabi Temitope — Tue, 28 Jan 2025 05:33:36 +0000

Another week of my coding journey is in the books, and I’m thrilled to share the progress I’ve made during Days 87–93. Each day brought new challenges, exciting lessons, and rewarding accomplishments. Here’s a recap of my week:

Day 87-88: Building a Blog Post App with an API

This project was a deep dive into APIs, and I learned:

✅ How to use GET to fetch and display blog posts 📝

✅ How to use POST to add new posts 🔄

✅ The fundamentals of REST and API design principles 🚀

By the end, I had built a functional blog post app that showcased everything I’d learned so far. 💪

Day 89-90: Color Scheme Generator 🎨

After a short break, I picked up where I left off on my Color Scheme Generator project. Using a color API, I:

✅ Finished the project and added a user-friendly interface

✅ Revised previous lessons to refresh my JavaScript knowledge

✅ Started learning Async JavaScript—tackling callbacks and promises

Check out the Color Scheme Generator here:

🌐 Live Demo

Day 91-93: WAR Game Project

Inspired by my lessons on callbacks and promises, I began and completed a WAR game project on Scrimba. This project took my skills to the next level:

✅ Built card drawing and displaying functionality 🃏

✅ Styled the cards to give them a polished look ✨

✅ Refactored the card placement logic for efficiency

✅ Added features like determining the winner, keeping score, and displaying the final winner

This was such a fun and creative project, and I’m proud of how it turned out!

What’s Next?

I’ve grown so much during Week 13, and I’m excited to keep pushing forward. Up next, I’ll reflect on my lessons from this week while diving into new projects. Stay tuned for more updates as I head into the final stretch of my #100DaysOfCode challenge!

Follow My Journey:

📂 GitHub: 100 Days of Code

🔗Linkedin: linkedin@toptech5419
📝 Medium: @AlabiTemitope51

✖️ X: @Toptech5419

Thank you for following along! Here’s to more coding, learning, and creating. 🚀 #WebDevelopment #Scrimba #JavaScript

Forem: Alabi Temitope

My 10-Day React Journey: Rebuilding Foundations on Scrimba

Day 111: Back to Basics

Day 112: Completing React Fundamentals

Day 113: Component Communication

Day 114: The Power of Reusability

Day 115: Entering the Interactive World

Day 116: State in Action

Day 117: Forms Mastery

Day 118: Conditional Rendering

Day 119: Project Complete - Gemini Chef!

Day 120: Production Refinement

What I've Learned Beyond React

Next Steps: Full Stack Expansion

Final Thoughts

Reviving My UI Design Journey & React Progress: Days 108–110

Building TravelPlanner: A React-Powered Trip Organizer

What is TravelPlanner?

Key Features

Tech Stack

Challenges & Solutions

Future Improvements

Get Started Locally

Connect & Contribute

Final Thoughts

Days 101-102: Back to Frontend Learning & Building a Personal Dashboard Chrome Extension

My HNG Internship Journey: Stage 4 — Designing a Kanban Board in Figma

My HNG Internship Journey: Stage 3 — Building an AI-Powered Text Processing Interface

My HNG Internship Journey: Stage 2 — Conference Ticket Generator

My HNG Internship Journey: Stage 1 — Building a Color Guessing Game

The Task: A Color Guessing Game

Challenges I Faced

How Scrimba Saved the Day (Again!)

Behind the Scenes: Code & Deadlines

What’s Next?

**My HNG Internship Journey: Stage 0 — Building a Responsive Profile Card**

The Task: A Responsive Profile Card

Execution & Challenges

Why This Felt Effortless (Shoutout to Scrimba!)

The Time Crunch

What’s Next?

My HNG Internship Journey: A New Chapter in My Front-End Development Path

Pausing My Daily Challenge for Something Bigger

Why Front-End Development?

How HNG Internship Is Elevating My Skills

My Goals for HNG Internship

Follow My HNG Internship Journey

Conclusion

Week 14 of #100DaysOfCode – Pushing Through, Learning, and Building! 🚀

🎮 Days 94-96: Finalizing My War Game Project

🎥 Days 97-100: Movie Watchlist Project

Final Thoughts & Next Steps

🚀 Week 13 of #100DaysOfCode: Building, Learning, and Growing!** 🎉

Day 87-88: Building a Blog Post App with an API

Day 89-90: Color Scheme Generator 🎨

Day 91-93: WAR Game Project

What’s Next?

My HNG Internship Journey: Stage 0 — Building a Responsive Profile Card