Introduction

This personal blog is not just a project but also a story of my journey to enhance my skills – from being a fresh graduate to publishing my very first article. It’s a path filled with experiments, changes, and refinements, with every technology carefully chosen for maximum efficiency.

The Starting Point: A Fresh Frontend Developer

When I landed my first job after graduation, I began with a foundational knowledge of Next.js – a powerful tool for frontend development. I decided to create this personal blog to practice my skills, experiment with new technologies, and most importantly, explore my potential.

The first version of this blog was simply a static interface built using Material UI, but it taught me some initial lessons:

Understanding basic UI construction.
Focusing on SEO and performance optimization.
Experiencing the sense of accomplishment from completing a personal project.

✨ Lesson learned: Start with the simplest things. Personal projects are a space where mistakes are welcomed, and you always have the chance to improve.

The Evolution: Experimenting and Learning

This blog has undergone numerous technological changes to meet new requirements:

1. From Material UI to TailwindCSS

Initially, I chose Material UI for its robust components. However, as I worked on the project, I found it limiting and hard to customize. I later transitioned to TailwindCSS, which made everything simpler and more flexible.

TailwindCSS streamlined the blog’s design, making it lighter and easier to maintain.
It allowed for concise CSS code, optimizing page load performance.
Customizing themes or color palettes became effortless.

2. From NextAuth to Passport

At first, I used NextAuth for authentication directly in Next.js. However, as the blog expanded, I realized I needed a more unified solution. That’s when I switched to Passport.js with NestJS for the backend.

NextAuth is great for small projects, but Passport.js offers more control and flexibility for complex authentication systems.
Backend logic became clearer and easier to scale.

3. From Frontend to Fullstack

Initially, I focused only on frontend development. However, to add features like content and user management, I ventured into backend development. NestJS became my go-to framework thanks to its clear structure and TypeScript support.

Final Tech Stack: A Modern and Efficient Combination

After several iterations, here’s the final tech stack I’ve settled on:

Frontend:

Next.js (app router): Optimized for SEO and rendering performance.
TailwindCSS: For sleek, flexible, and fast designs.
React Icons: Adding vibrant highlights to the interface.

Backend:

NestJS: Efficient API and backend logic management.
PostgreSQL: Secure and reliable data storage.
Redis: API caching to reduce database load.
MinIO: File and image storage as an alternative to AWS S3.

Hosting & Deployment:

VPS + Nginx: Ensuring stability and security for the blog.
GitLab CI/CD: Automating testing and deployment.
Docker + Docker Compose: Maintaining consistent development and production environments.

Other:

Quill: Crafting engaging content.

Publishing the First Article: A Moment of Achievement

Once the blog had its basic features complete, I published my first article – sharing my experience learning Next.js. This was a significant milestone, marking my journey from a novice developer to someone confident in building fullstack projects independently.

Lessons and Reflections

Embrace change: Choose technologies that suit your current needs but always be ready to adapt as requirements evolve.
Be patient with the journey: Personal projects are not just about the result but also the invaluable lessons along the way.
Never stop learning: Every experiment is an opportunity to grow your skills.

Conclusion

This blog is not just a platform for sharing but also a testament to my professional growth. If you’re contemplating starting your own personal project, go for it! The journey will help you discover your potential. 😊

What do you think about this journey? Feel free to share your story with me!

From Idea to Personal Blog

How i implemented simple ci/cd for this blog

From the first lines of code to a completed project