NextJS Blog

Personal blog platform with admin portal and email notifications. My first NextJS project.

Project Case Study

The NextJS Blog is a personal project I developed, where we share updates about our lives. The blog utilizes NextJS, Tailwind, MUI, and MongoDB to create a dynamic platform for sharing content. Key features include an admin portal with Google OAuth integration for sign-in, an email notification system when a new post is published, and a dashboard for managing the blog posts stored in Markdown files.

Objectives

• Create an engaging, visually appealing blog platform for personal updates.

• Integrate Google OAuth for secure sign-ins and user management.

• Enable CRUD operations for blog posts stored as Markdown files.

• Implement email notifications to inform users of new posts.

• Ensure smooth hosting and deployment of the app.

Challenges

• Integrating MUI with Tailwind CSS, which led to compatibility issues.

• Initial hosting attempt on Azure using Docker Compose, which caused space and performance issues.

• Managing the database in a way that ensured the app's functionality while optimizing the workflow.

• Setting up a reliable, automated deployment process with GitHub Actions.

UI and Admin Portal

The blog features a clean, user-friendly UI powered by Tailwind and MUI. The admin portal allows easy content management and includes user authentication via Google OAuth. The UI, though functional, will continue to be refined for better design and usability.

Database Management

The blog posts are stored in Markdown files, and MongoDB was initially used as the database. However, looking back, a simpler SQLite solution might have been more suitable for the scale of this app.

Hosting and Deployment

The original plan was to use Docker Compose on Azure, but I encountered several issues with space limitations and configuration errors. Switching to DigitalOcean solved these problems, where I opted for PM2 and systemctl to ensure the app and database stay running smoothly. I also streamlined the deployment process using GitHub Actions to pull changes directly into the VM.

Results

The blog is live and fully functional, with an intuitive admin panel and email notifications working flawlessly. Despite some early challenges, the project has been successful in achieving the primary goal of sharing personal updates in an engaging way.