Table of Contents
Introduction
For the past several weeks, I've been learning React. It's one of those things I have to keep coming back to because I find even the smallest things about it a bit complex. But I'm slowly starting to get it.
I've been working through a web development course for nearly a year and I'm almost finished. In the React portion of the course, I was instructed to complete a note taking app. And then I built it again. And again.
It's not about memorization or reinventing the wheel. It's about understanding a problem and solving it.
Now I'm building it again. I started from scratch, reviewing the code I previously wrote for the course whenever I get stuck. But I've changed a lot of things about it:
- Gave it a "retro" design
- Made it responsive
- Use localstorage to save & retrieve notes
- Made a modal box that explains the app's purpose
- Fixed an issue that caused the footer to overlap the notes
Responsive Design
The original project was only desktop friendly, so that's one of the first issues I tackled. I approached it with a mobile first design, then used media queries for tablets and desktops. We're mostly taking notes on our phones, after all.
Local Storage
The course doesn't go over how to connect a React app to a database, and I'm already using Heroku's free tier for another project of mine, so I started thinking about utilizing the browser's local storage over a database on someone else's computer. Who needs to see your notes but you?! Kidding. There's obviously advantages to using a database, but at least the app is way more useful now.
The Purpose
This isn't exactly a problem, a note app pretty much speaks for itself, but I did add a short description and social links. I want to keep it a single page web application so I made a modal box that displays on the page differently depending on the device being used.
Fixing Bugs
The original app's footer would overlap the notes if too many were added to the page regardless of scrolling. It was due to position: absolute. I used position: fixed instead and after extensive googling I realized I had forgotten about React's root <div>, which I added some padding to the bottom so that the footer would not block the notes at the end of the page.
Making It Your Own
So while I didn't come up with this project, (I mean a note app isn't exactly an original one in the first place) or even write all of the code on my own, I have made it my own by recognizing the issues and fixing them.
And that's what it's all about, isn't it? It's not about memorization or reinventing the wheel. It's about understanding a problem and solving it.
Top comments (7)
Thanks for sharing. You have added another dimension to coding and your discussions is motivating as well
Glad to hear, Kingsley!
Absolutely right ! Problem solving is a Core skill for any developer! Thanks for this reminder!
When making a project your own through problem-solving, it's essential to consider efficient resource management. I highly recommend checking out these efficient resource allocation strategies to help you optimize resources effectively. Efficient resource allocation is crucial to avoid common project pitfalls and ensure that your problem-solving efforts lead to successful and sustainable outcomes. This approach will help you tackle issues more effectively and make your project truly your own.
I am learning about web design and this article is one of the articles that helps me a lot, I have learned a lot of knowledge from this article and I am wordle nyt very happy and glad about that.
Thank you for introducing this useful course.
I will join my friends wordle unlimited tomorrow
I've been trying to learn coding like this lately, it takes a while, but I've managed to do it, sometimes I play basketball games, it's fun.