The Journey Behind Every Line of Code
When I first started learning how to code, I quickly realized that every project is more than just an assignment. It’s a new challenge, a fresh problem to solve, and, more importantly, an opportunity to learn and grow. My coding portfolio tells the story of my journey, from my first simple projects to the more complex applications I’ve built. Each one is a reflection of my development as a front-end developer, a showcase of the technologies I’ve learned, and a record of the lessons I’ve carried with me.
In this post, I’ll take you through some of the key projects I’ve built, how I approached them, what technologies I used, and how they demonstrate my growth as a developer.
1. Weather & News App: Combining Real-Time Data with React
One of the most exciting projects in my portfolio is the Weather & News App, an application that provides real-time weather updates alongside country-specific news. This project was a game-changer for me as it combined multiple APIs and data points to deliver a seamless user experience.
What is it?
The Weather & News App allows users to search for any city worldwide and immediately get the local weather along with the latest headlines from that city’s country. It integrates both the SheCodesWeather API for weather data and the NewsAPI for fetching news headlines.
Technologies Used:
- React: The app is built entirely in React, making use of components, hooks, and state management to ensure smooth, dynamic rendering of data.
- Axios: I used Axios for handling API calls to ensure a cleaner, more readable codebase.
- CSS Modules: For styling, I opted for Bootstrap, allowing me to scope styles locally, which improved maintainability.
- SheCodesWeather API: This API provided the real-time weather data such as temperature, humidity, and conditions.
- NewsAPI: For country-based news, I utilized the NewsAPI, which enabled me to fetch real-time news articles based on the country of the city searched.
- Netlify Functions: To keep my API keys safe.
What I Learned:
- API Integration: This project was my first deep dive into integrating multiple APIs. Learning how to fetch data asynchronously and manage it within a React app was a crucial skill that I have carried into subsequent projects.
- State Management in React: Managing the states of both weather and news data for a smooth user experience taught me the importance of efficient state management.
- Error Handling: I learned how to implement proper error handling for API failures, ensuring that the app remains user-friendly even if the data can’t be retrieved.
- Responsiveness: Building this app taught me the importance of responsive design, ensuring that it looks great and works well on all screen sizes.
The Growth:
Looking back, the Weather & News App marks a pivotal point in my development journey. It was the first project where I really started to feel comfortable working with React and handling asynchronous data fetching. Through this project, I realized just how powerful React can be for building scalable and responsive applications.
2. RPG Dragon Repeller: Building a Game with Vanilla JavaScript
This project was one of my favorites because it combined my love for storytelling and game mechanics with coding. The RPG Dragon Repeller Game was an ambitious project where I built a fully functional game using vanilla JavaScript, without relying on frameworks like React or Vue.
What is it?
The RPG Dragon Repeller is a simple yet engaging game where players must defend their village from a horde of attacking monsters and a dragon. The player controls a knight, and the game’s objective is to defeat each monster to gain XP and gold in order to purchase better weapons and eventually defeat the dragon.
Technologies Used:
- Vanilla JavaScript: No frameworks were used in this project. Everything from the game logic to the animations was built with core JavaScript.
- CSS: Basic CSS was used for the overall structure of the page and some aesthetic touches outside the game canvas.
What I Learned:
- DOM Manipulation: Working with vanilla JavaScript allowed me to get more familiar with DOM manipulation and event listeners, skills that are essential for any front-end developer.
- Debugging and Optimization: I learned a great deal about debugging JavaScript, especially when dealing with animations and game logic, and how important it is to optimize your code for smooth user interactions.
The Growth:
This project significantly boosted my confidence in JavaScript, especially when working without the help of frameworks. I believe that mastering vanilla JavaScript is crucial for any front-end developer before diving too deeply into frameworks like React or Vue. By building the RPG Dragon Repeller, I gained hands-on experience with JavaScript fundamentals that laid the foundation for all my future coding projects.
Want to learn more about my early experiences with JavaScript? Read my blog post, My First Coding Project: Lessons Learned and Challenges Faced.
3. Portfolio Site: Showcasing My Work
After working on smaller projects, I knew I needed a centralized space to showcase all my work, so I built my own portfolio site. This wasn’t just about creating a static page—it was about presenting my projects in a way that reflects my personality and skills.
Technologies I Used:
- Vanilla JavaScript: No frameworks were used in this project. Everything from the site logic to the animations was built with core JavaScript.
- CSS: Basic CSS was used for the overall structure of the page and some aesthetic touches outside the game canvas.
- Bootstrap: For styling, I opted for Bootstrap, allowing me to scope styles locally, which improved maintainability.
This portfolio project has been a turning point in my coding journey. It’s not just a display of my skills, but a practical demonstration of how far I’ve come.
Story: From Retrenchment to Reinvention
When I lost my job, it felt like the ground had been pulled out from under me. I had no idea where I was going, but I knew I had to reinvent myself. Coding became my anchor—something that helped me regain my confidence and build a new path. Each of these projects reflects a step in that transformation. I poured hours into learning new technologies, balancing a full-time job and my studies. If you’re in a similar situation, I encourage you to read From Retrenchment to Reinvention: My Coding Journey After Losing My Job to see how coding can be a path to new opportunities.
Key Takeaways From These Projects
Through these projects, I’ve not only learned how to apply technologies like React and vanilla JavaScript but also how to think critically about the design and functionality of the applications I’m building. Both the Weather & News App and the RPG Dragon Repeller have contributed significantly to my growth as a front-end developer. They represent the power of persistence, curiosity, and creativity.
Technologies I Can’t Live Without:
- React: For building dynamic, stateful user interfaces.
- JavaScript: Understanding the fundamentals of JavaScript is crucial to becoming a successful developer.
- API Integration: Knowing how to interact with APIs opens the door to real-time, data-driven applications.
- Bootstrap: For quick styling and changes to CSS.
For a more detailed look at the tools I use daily as a front-end developer, check out my post, Front-End Developer Tools I Can’t Live Without.
FAQ: Why did I decide to work on these types of projects?
Both projects in my portfolio—the Weather & News App and the RPG Dragon Repeller Game—were intentionally chosen to address key aspects of front-end development. The Weather & News App taught me how to work with APIs, manage data flow, and build interactive user interfaces with React, which is crucial for any modern web developer. On the other hand, the RPG Dragon Repeller Game allowed me to master vanilla JavaScript and focus on building something dynamic and interactive from scratch.
Each project has a specific role in my growth as a front-end developer, pushing me to think creatively while honing technical skills like problem-solving, debugging, and optimizing for performance.
FAQ: Why did you build your projects without React in some cases?
I believe in mastering the fundamentals of JavaScript before jumping into frameworks like React. For my RPG Dragon Repeller game, I opted for vanilla JavaScript because it gave me a deeper understanding of the language’s core features, such as DOM manipulation, event handling, and asynchronous programming. This hands-on experience with JavaScript prepared me to transition smoothly into using frameworks like React in more advanced projects like my Weather & News App.
What Projects are You Working On?
I’d love to hear about the projects you’re working on and what you’ve learned from them! Leave a comment below or connect with me via Code with Malie. Sharing our coding journeys is a great way to learn from each other and grow as developers.
