BYOB-P: Build Your Own Blog Project

Blog projects are a nice way to build skillsets and showcase them to the world. You need to handle the public-facing UI, admin pages for CMS, and many other aspects of the software development life cycle.

Fri Jan 06 2023
4 min read
BYOB-P: Build Your Own Blog Project

Why?

Blog projects are a nice way to build skillsets and showcase them to the world. You need to handle the public-facing UI, admin pages for CMS, and many other aspects of the software development life cycle.

I'm doing this project just for fun, actually. I wanted to build something after a long break and I've been missing the chance to code for myself since I've been working in startup culture and haven't had enough time. I also wanted to learn some new tech stacks, as you may have gathered from my other articles.

Additionally, it's always tough to launch and put yourself out there for public criticism, even if you're just starting out. Right now, as I write this article, I haven't implemented interactions with blog article features yet.

Other benefits

There are several other reasons why doing a blog project can be important for a developer:

  1. Improving communication skills: A blog project can help a developer improve their communication skills by forcing them to clearly and concisely explain technical concepts to a non-technical audience.

  2. Demonstrating expertise: By writing about a specific topic, a developer can demonstrate their expertise in that area and establish themselves as thought leader within their field.

  3. Learning through writing: The process of writing about a technical topic can help a developer solidify their understanding of that topic and identify areas where they may need to further their knowledge.

  4. Building a personal brand: A blog can be a great way for a developer to build a personal brand and showcase their skills to potential employers or clients.

  5. Networking opportunities: Maintaining a blog can lead to networking opportunities, as it allows other professionals in the field to discover and connect with the developer.

Prerequites Scoping the Project

Define the project scope: Clearly define the goals and objectives of the project, as well as the constraints and limitations.

Features that initially were in scope

  1. Home page: showcase list of posts
    1. Featured posts OR Recent posts: showcase recent or featured posts section on the home page
  2. Categories: to bucket different kind of posts and then having the ability to filter based on the category
  3. Read Post: detailed post render for reading
    1. Related Post

The above features came from the tutorial itself which I followed.Tutorial link

Feature Add-ons

I didn’t use GraphCMS(as per the tutor in the tutorial), but still wanted some form of CMS(Content management systems) with the necessary backend features, then decided to build that aspect as well since I was building this to learn.

Which meant the addition of the following pages:

  1. Admin page
    1. Post creation/edits
    2. Post publish
  2. These links should be protected as initially, I want only myself to be the author of this blog-website.

Future scope

There are many things that I wrote down but scoping things for launching was important. Here is a sneak-peak at my notes:

md
... 4. Categories should looks more like tags rather than a list - P2 5. Category description when person clicks on a given category - P3 6. TOC on the side of the article for easy navigation 7. Video or other website media embedding with preview 8. Search capability - P4 if the number of posts passes beyond >20-> P3 >50->P2, if >100 then P1 ...

Scope Prioritization

As you can see above that for some features I have written P2, P3 these are in order of priority. Once your scoping is done the number of things to do might still be overwhelming. then it would be a good idea to further put those features through a prioritization exercise which will help you target what is much, and discard features which are good to have.

Other steps:

Project plan - Setting a deadline

Create a plan: Develop a detailed plan that outlines the tasks and milestones that need to be completed in order to successfully deliver the project. This plan should include a timeline so that you launch, it's okay if you miss the deadline, but don't fall into The Perfectionism Trap and fail to launch.

Tech stack selection

  1. NextJS: Project code base which is built by Vercel: React Framework
  2. TailwindCss: UI/UX- CSS Framework
  3. Supabase: BaaS( backend as a service )
  4. Vercel: Deployment and hosting
  5. Google Domains

Build vs Buy vs Free-tier

As you can see from the above tech-stack that I decided to take an approach of rapid prototyping and use some of the best tools in the market to

Development Setup

We covered this in our past articles. By making sure the above steps were done even for a side project helped me get organized and hit the ground running.