Hi, I'm Talaksew Agegnehu, a Front-End Developer.

My Journey to Fetching Data

Before I started using APIs, I built many websites and JavaScript projects, experimenting with different features and functionalities. However, there was always something missing. I wanted to use real data—data that others had created—to process and display in my projects. But instead of fetching data, I used to rely on manually created arrays to supply the data for my projects. This workaround was functional but left me feeling incomplete as a Front-End developer.

I had heard about fetching data and knew it was a key skill in Front-End development, but I had never practiced it. Without hands-on experience, the concept felt out of reach. The lack of familiarity made me feel as though I wasn’t fully equipped as a developer. I was eager to bridge this gap and step into a new level of proficiency.

That opportunity came when I decided to build my Pokémon Search App. The project required a large dataset of Pokémon information, and I knew it was the perfect chance to finally practice fetching data from an API. For the first time, I dived into using an API, learning how to retrieve, process, and display real data dynamically. It was an eye-opening experience.

When my app successfully fetched and displayed Pokémon data, everything changed. I felt a newfound confidence in my skills. This wasn’t just a technical achievement; it was the moment I truly felt like a complete Front-End developer. Fetching data from an API turned my projects into dynamic, real-world applications that went beyond static arrays and hardcoded data.

This experience taught me that Front-End development is as much about connecting to real-world data as it is about building user interfaces. Practicing API integration not only filled a gap in my knowledge but also transformed the way I approach projects. Now, whenever I fetch data for a project, I remember the excitement of that first successful attempt and how it marked a turning point in my journey as a developer.

My First Experience with Axios in React

As a Front-End developer, I recently worked on a project to build a random quote generator app using React. During this process, I needed to fetch data from an API to display quotes dynamically. That’s when I decided to try Axios for the first time, and I’m glad I did!

Why I Chose Axios

Axios is widely recommended in the React community for making HTTP requests. Some of the key reasons include:

• Simplicity: Axios has a clean and intuitive syntax, which makes it easy to set up and use.
• Promise-Based: It works with Promises, making it straightforward to handle asynchronous operations.
• Automatic JSON Handling: Axios automatically transforms the response data into JSON, saving extra steps.
• Error Handling: It provides better error messages and makes debugging easier.

Given these advantages, it felt like the perfect choice for my project.

Using Axios in My Random Quote App

Integrating Axios into my app was simple. After installing it with npm install axios, I imported it into my component and used it to fetch data from the API. Here's an example of how I implemented it:

With just a few lines of code, I was able to fetch and display quotes seamlessly.

My Experience with Axios

Using Axios for the first time was a smooth and enjoyable experience. I appreciated how easy it was to set up and how efficiently it handled API requests. The automatic JSON conversion and built-in error handling were especially helpful in simplifying my code. It made working with APIs feel less intimidating and more approachable.

Axios turned out to be a great choice for my random quote app. It’s a powerful tool that I’ll definitely use in future projects. If you’re new to API integration in React or looking for a reliable HTTP client, I highly recommend giving Axios a try. It’s beginner-friendly, feature-rich, and makes working with APIs much more manageable.

My Experience with Sass: A Game-Changer for CSS

When it comes to styling projects, one tool that has truly enhanced my workflow is Sass. I’ve used Sass in several projects, including this very portfolio, and it’s been an incredible experience. Sass has not only made my CSS more organized but also more efficient to maintain.

Why I Love Sass

Sass, short for "Syntactically Awesome Stylesheets," is a preprocessor that extends the functionality of CSS. Here are some of the reasons I’ve come to appreciate it:

• Code Organization: Sass allows you to break your styles into smaller, manageable pieces using partials and @import. This structure makes large projects much easier to maintain.
• Nesting: The ability to nest selectors keeps your CSS clean and readable, especially when dealing with complex components.
• Mixins and Functions: These features let you reuse chunks of code and create dynamic styles, reducing repetition and improving efficiency.

Sass in Action: Building My Portfolio

When building my portfolio, I relied on Sass to streamline the styling process. For example, I used variables to define my color palette and fonts, ensuring consistency across all pages. Here’s a small snippet to illustrate:

I also used nesting to keep related styles together, which made the code more intuitive to read and modify:

This structure allowed me to make changes quickly without having to sift through a massive CSS file.

The Sass Experience

Overall, working with Sass has been a rewarding experience. It’s a tool that not only makes your CSS more powerful but also more enjoyable to write. Features like variables, nesting, and mixins make styling a project less tedious and more dynamic.

Sass has become an integral part of my development workflow, and I highly recommend it to anyone looking to level up their CSS skills. Whether you’re working on small projects or large applications, Sass can help you write cleaner, more maintainable code. If you haven’t tried it yet, give it a shot—you might just fall in love with it like I did.

How to Deploy a Website Using GitHub Pages and Connect a Custom Domain

My Transition from Plain JavaScript to React

Before starting React, I spent significant time working with plain JavaScript (often called "vanilla JS"). It provided me with a solid understanding of essential coding principles like DOM manipulation and event handling, which became the backbone of my Front-End development skills. However, learning React became a natural next step in my journey, as it is highly recommended for building modern web applications.

Starting with FreeCodeCamp

FreeCodeCamp played a pivotal role in guiding me toward Front-End libraries, including React. Its structured curriculum made it easy to grasp concepts and apply them through hands-on projects. This step-by-step learning approach allowed me to build a strong foundation in React and other Front-End tools, making the entire experience rewarding and accessible.

First Impressions of React

When I began using React, I initially found it confusing why it was so widely recommended over plain JavaScript. At first, React seemed to make the code more complex and appeared to reduce rendering time for simple projects. However, as I explored further, I realized that React’s true strength lies in its ability to handle larger, more dynamic applications efficiently. Its component-based structure and robust ecosystem make it particularly effective for big projects, where plain JavaScript can quickly become cumbersome.

Why React Is Worth It

While React may seem daunting at first glance, I found its learning curve surprisingly manageable. Its intuitive concepts, like breaking down UIs into components and managing state effectively, became clearer with practice. Over time, React has become my go-to tool for building Front-End applications due to its scalability, efficiency, and vast ecosystem. Features like JSX and the virtual DOM enhance both development speed and application performance, solidifying React as a top choice for modern web development.

Transitioning from plain JavaScript to React has been a significant milestone in my development journey. While vanilla JS remains a great tool for small-scale applications, React has opened up new opportunities for building complex, feature-rich projects. Thanks to platforms like FreeCodeCamp, I’ve been able to embrace React’s potential and elevate my skills to the next level, making it a cornerstone of my development toolkit.

How freeCodeCamp Transformed My Coding Journey

My journey into coding began with pure curiosity. I was fascinated by computers and inspired by the way coding was portrayed in movies. However, despite my interest, I couldn’t write a single line of code. Everything changed when I discovered freeCodeCamp.

The first time I typed a piece of code was on freeCodeCamp’s platform. It provided me with a structured, beginner-friendly curriculum that guided me through the basics and beyond. The hands-on exercises, interactive lessons, and real-world projects helped me build confidence and develop my coding skills.

One of the best aspects of freeCodeCamp is its comprehensive curriculum, which covers web development, data structures, algorithms, and more—all for free. The certifications offered by the platform not only validate skills but also serve as motivation to keep learning and improving.

Even though I have explored other platforms and taken in-person courses, freeCodeCamp remains my most valuable learning and practicing resource. It has played a crucial role in my growth as a developer, and I am deeply grateful for the opportunities it has provided.

For anyone looking to start their coding journey, I highly recommend freeCodeCamp. It’s an incredible platform that empowers learners worldwide with quality education at no cost. Thank you, freeCodeCamp, for making coding accessible and transforming lives!