How I Coded This Blog

Development

The Beginning (2 Years Ago)

As part of a learning endeavor, I embarked on the creation of a personal blog. The initial step involved deciding the platform for its development, where I opted for React due to my familiarity with it. Following this decision, I curated three exemplary posts to populate the blog's content. In addition to the content section, I integrated a navigation bar to facilitate user experience, enabling category selection. Recognizing the pivotal role of categorization in web design, I endeavored to acquire the skill of implementing a navigation bar. This decision stemmed from a belief in its fundamental importance for effective website navigation. Overall, the project aimed to amalgamate my proficiency in React with the acquisition of new skills, such as implementing navigation bars, while showcasing content creation through blog post exemplars.

The Evolution (Present Day)

Fast forward two years, and my blog has undergone significant transformation. What started as a simple React learning project has evolved into a sophisticated Next.js application with advanced features and improved architecture.

Technology Stack Upgrade

  • From React to Next.js: Migrated from plain React to Next.js for better performance, SEO optimization, and server-side rendering capabilities
  • Enhanced Routing: Implemented dynamic routing for blog posts and notes with proper URL structures
  • TypeScript Integration: Added TypeScript for better type safety and developer experience
  • Modern Styling: Utilized Tailwind CSS for responsive and modern design

New Features Implemented

  1. Notes System: Created a separate notes section alongside blog posts for more casual content and quick thoughts
  2. Advanced Categorization: Improved the category system with better filtering and organization
  3. Search Functionality: Implemented full-text search across both blog posts and notes
  4. Reading Time Calculation: Added automatic reading time estimation for better user experience
  5. Responsive Design: Ensured the blog works seamlessly across all devices

Architecture Improvements

  • File-based Routing: Organized content with a clear file structure for better maintainability
  • Content Management: Implemented a robust note handler system for efficient content parsing and caching
  • Component Organization: Restructured components for better reusability and maintainability
  • Performance Optimization: Added caching mechanisms and optimized content loading

Content Strategy Evolution

The blog now supports both long-form blog posts and quick notes, allowing for more versatile content creation. The categorization system has been refined to provide better content discovery and navigation.

Key Learnings Over Two Years

  1. Framework Migration: Learned the benefits and process of migrating from React to Next.js
  2. Content Management: Developed skills in creating flexible content management systems
  3. Performance Optimization: Understanding of server-side rendering and performance best practices
  4. User Experience: Improved focus on user experience with features like search and reading time
  5. Code Organization: Better practices for organizing and maintaining codebases

Future Roadmap

The journey continues with plans for:

  • Enhanced search with filtering capabilities
  • Comment system integration
  • Dark mode implementation
  • Content analytics and tracking
  • RSS feed generation

This project has been an incredible learning journey, transforming from a simple React exercise into a comprehensive web application that showcases continuous growth and learning in web development.