Remaking My Personal Website: A Journey with Next.js, Shadcn, React Query, PostgreSQL, and Node.js

As a developer, continuously learning and experimenting with new technologies is part of the journey. Recently, I embarked on a project to remake my personal website, and it turned out to be an incredibly fun and rewarding experience. I wanted to share the process, challenges, and triumphs with you.

Choosing the Tech Stack

For this project, I chose a combination of technologies that I was excited to explore and that I believed would deliver a smooth and efficient user experience. Here's a breakdown of the tech stack I used:

Frontend
- Next.js: For its powerful features, including server-side rendering and static site generation, which are perfect for building a performant website.
- Shadcn: To create a sleek and modern design with minimal effort, ensuring the UI is both functional and visually appealing.
- React Query (TanStack): For managing server state and making data fetching a breeze.
Backend
- Node.js: For its speed and scalability, which are essential for handling server-side logic and data processing.
- PostgreSQL: For storing and managing the website's data, including blog posts, projects, and guestbook entries.

The Development Process

The first step was setting up the Next.js project. The framework's simplicity and flexibility made it easy to get started. I configured the project to use TypeScript, ensuring type safety and improved developer experience.

Designing with Shadcn

Using Shadcn for the UI design was a delightful experience. It provided a set of pre-designed components that I could easily customize to match my vision. The component library's consistency and aesthetic appeal helped me create a cohesive and professional-looking interface quickly.

Managing State with React Query

React Query (TanStack) was a game-changer for managing server state. It simplified data fetching, caching, and synchronization, allowing me to focus on building features rather than worrying about state management complexities. The built-in hooks made it straightforward to integrate with my API endpoints.

Building the Backend with Node.js and PostgreSQL

To make this a faster process, and since my portfolio does have some logic that requires a backend running behind the scenes to mainly does the Github authentication part of things as well as manage my guestbook, I decided to go with a simple backend architecture and solution with (NodeJS) and with the addition of Vercel's new PostgreSQL store I wanted to give it a try and connect it to a PostgreSQL database.

Challenges and Learnings

No project is without its challenges, and this one was no exception. One of the main challenges I faced was optimizing the performance of the site while maintaining a rich feature set. Leveraging Next.js's static site generation capabilities and React Query's efficient data handling, I was able to strike a balance between performance and functionality.

I also spent time fine-tuning the design to ensure it was not only aesthetically pleasing but also user-friendly and accessible. Testing across different devices and browsers was crucial to ensure a consistent experience for all users.

The Final Product

The final product is a modern, responsive, and high-performing personal website that showcases my portfolio, skills, and blog posts. It represents a culmination of my efforts and learnings, and I am incredibly proud of the result.

Remember you can always sign my guestbook and let me know you are here

Conclusion

Remaking my personal website was a fantastic learning experience. It allowed me to dive deep into Next.js, Shadcn, React Query, PostgreSQL, and Node.js, and gain a deeper understanding of how these technologies can work together to create a seamless user experience.

I'm excited to continue exploring and experimenting with new tools and technologies. If you have any feedback or questions about the project, feel free to reach out. Let's keep pushing the boundaries of what's possible with web development!

Thank you for reading, and stay tuned for more updates and insights on my blog.