
The Coding Adventure: Building My Blog Step by Step
Project Overview
I know there are easier ways to create a blog. I could’ve just gone with a pre-made solution, but I really wanted to learn how to build one from the ground up. It wasn’t just about having a blog; it was about getting hands-on and figuring things out as I went along. Plus, building it myself in a framework I actually want to work with felt important.
Current Progress and What’s Next
The design part was pretty smooth, especially since I had a vision from my old blog. I enjoyed refining things and making them better. I was also proud of myself for checking on responsiveness, which has been a weak spot for me in the past. One key lesson from this experience: I need to stop using fixed padding. I tend to use it when I’m outlining the design, but then I forget to adjust it, and when I check on mobile, it looks… well, bad. That’s definitely something I’ll avoid going forward!
I also added likes and comments to the blog, which was a fun process. Next up is tackling authentication, but for now, I’m pretty happy with how things are shaping up.
Before I published, I hit a few snags:
- I forgot that the images were being fed from my old blog, so when I switched over, they disappeared.
- The links to my Pong game also broke, which was another headache.
- I had to switch to Netlify because of React’s SPA structure, but it ended up being a good learning moment.
Moving forward, I want to focus on:
- Reducing my reliance on ChatGPT: I’ve been using it a lot, and while it’s helpful, I want to figure more things out on my own. I start well, using it as a “rubber duck” to bounce ideas off, telling it not to give me the code. But I often feel like I need to rush through things, and when I feel stuck, I end up relying on it more than I’d like.
- Improving time management: I tend to lose track of time while working on a problem, and then before I know it, it’s time to pick up Elio, and I feel like I haven’t made as much progress as I’d like. I need to get better at balancing my time throughout the day.
There are also a few features I still need to improve or add:
- Comment System Improvements: Right now, if you’ve left a comment, you’ll notice there’s no way to edit or delete it, and anyone can type in any name they want. That’s something I want to fix in future iterations.
- Category Filtering: Currently, there’s no way to filter blog posts by category, so readers have to scroll through everything. I’d love to add a filtering feature so people can browse posts by dev topics, gaming, or general life musings.
Challenges Faced
-
Fixed Padding Troubles: Honestly, fixed padding has been my nemesis. I start with it while outlining, but then I forget to change it, and when I check on mobile, the layout is totally off. In the past, I’ve also been guilty of focusing more on desktop layouts, but this time I made responsiveness a priority. I learned that using fixed padding doesn’t scale well across different screen sizes, and I’m now trying to use more flexible units like
rem
and percentages to avoid that problem in the future. -
Supabase Load Times: While I enjoyed working with Supabase, I did run into some frustratingly slow load times when accessing the dashboard. Not sure if this is a Supabase issue or something on my end, but it did slow me down a bit.
-
Deployment Anxiety: Deployment is always nerve-wracking for me. But I learned how to deploy from a different repo into the existing one, and even though I’ve now moved on to Netlify, it was great practice! Netlify ended up being a better fit because of some issues I was having with GitHub Pages and React (thanks, single-page app quirks!).
Technical Insights
-
React and Single-Page Apps (SPAs): I had to switch from GitHub Pages to Netlify because of how SPAs work in React. GitHub Pages couldn’t handle React’s routing, especially when refreshing a page that wasn’t the root. It led to 404 errors because GitHub Pages expects static files, and React is rendering different views on the client side. Switching to Netlify fixed this because it allows proper redirects and gives better control over the deployment of dynamic apps. Understanding why GitHub Pages failed helped me recognize how important it is to choose the right hosting platform for specific frameworks.
-
Taste of SQL with Supabase: One of the cool things about working with Supabase was getting a little hands-on with SQL! Supabase’s SQL interface was straightforward to use, but learning how to write custom queries was eye-opening. For example, querying for specific blog posts using
SELECT
commands taught me how databases can be efficiently navigated. I also learned about database relationships, such as how to join tables to relate posts with comments. It was a good reminder of the backend development principles I’d learned during bootcamp, and this experience helped deepen that knowledge further. -
Pomodoro and Notion for Staying on Track: I’ve been working in Pomodoro shifts, and it’s really helped me stay focused. During a previous project like Backlog Buddy, I found myself jumping from task to task—finding a bug in one component and immediately fixing it, or making changes without following a proper structure. This led to a lack of focus and headaches. Using Notion for project management and breaking things down into smaller, more manageable tasks was a game-changer. It helped me approach this project with more structure, which was much less stressful than my previous, more chaotic workflow.
Reflection
Am I regretting this decision to build the blog myself when I could’ve saved time using an out-of-the-box solution? Sometimes, yes. But on the other hand, I’m learning so much by doing it this way. I’ve gotten a taste of Supabase and SQL, improved my time management (though I still need to work on that), and learned to focus on breaking tasks down instead of trying to tackle everything at once. So overall, it’s been worth it!
Conclusion
While the journey to building this blog hasn’t been without its hiccups, it’s also been a rewarding learning experience. I’ve faced challenges that have pushed me to grow as a developer and find creative solutions to problems I didn’t anticipate. Even though I could have taken an easier route, the knowledge I’ve gained by doing it myself is invaluable.