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.