How I Built My Personal Website with Next JS

Hey folks. In this article, I will share how I created my personal website, the technologies I used, and the project infrastructure. I hope this article provides you with valuable insights to help you create your own site.

Why a Full Stack Project?

A critical goal for me was for the data to be used dynamically in the project and easily updated when necessary. In addition, I preferred a full stack structure so that I would have full control. However, since I did not want the project to be too large, I decided that it would be best to have the back-end and front-end in the same structure. This is where Next.js came into play: It met my needs perfectly thanks to its React-based framework and server-side rendering (SSR) capabilities.

Database and ORM Selection

I used MySQL as a database. This relational database provides a reliable solution for data storage and processing. However, instead of writing SQL directly, I chose Prisma ORM to make the code more readable and maintainable. Prisma made database operations much easier; I was able to quickly define my database schema and perform the necessary migrations.

Admin Panel and Data Management

All application data is managed via an admin panel. The admin panel allows you to control everything from blog posts to visuals, user data to charts. I have integrated the UMAMI API to track and analyze user behavior. With UMAMI, I can collect anonymous statistics about my website visitors and present this data with visual charts in the admin panel.

Charts and Visualization

I chose the ReCharts library for all charts used in the admin panel. ReCharts was an excellent solution for data visualization because it was easy to use and customizable.

Data Management and API Requests

I used Redux Toolkit to orchestrate the data flow throughout the application. I integrated RTK Query to manage API requests and keep data in sync. This combination made state management more streamlined and performant.

File Storage Solution

I used Cloudinary, a cloud-based solution, to ensure that the images and other files used in the application would not cause problems on the VPS in the long term. Cloudinary provided great convenience in both storage and optimization of media files.

Forms and Validation

I used React-hook-form and ZOD Validator to speed up the form processing and validation process. These two tools made form processing both user-friendly and reliable.

Rich Content Editor

I chose the TipTap Text Editor library to make blog posts more user-friendly and visually appealing. I customized this editor and integrated it into the project in a reusable way. This made editing the content much easier for both me and future users.

Project Deployment

I set up an automated CI/CD process with GitHub Actions to deploy the project. With each update, the project is integrated into a Docker container and easily deployed onto a VPS. I used NGINX for port management and security of the application. NGINX improves the performance of the application by correctly routing incoming requests.

This project provided a great opportunity to explore the power of Next.js and modern web technologies. If you want to do a similar project or want to explore the project in more detail, the source code is openly available on GitHub.

If you are thinking of starting your own personal project, I hope this article will inspire you. I look forward to your comments and questions!