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!
