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.
Custom Storage: 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:
Tiptap: Create richtext 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!
