✨ Next.js 14 & SWR Powered Multi-User Full-Stack Blog Application | Real-Time Updates, Seamless Authentication, Advanced Content Management and Gemini AI-Integrated Chat Bot
- 🤖 Introduction
- ⚙️ Tech Stack
- ✨ Features
- 🤸 Quick Start
- 📖 API Guide
- 📸 Screenshots
- 📈 Repo Activity
- 📊 Lighthouse Score
- ⭐️ Star History
Built with Fullstack Next.js and Tailwind CSS, this captivating blog site offers its users an unparalleled reading experience. Integrated with a powerful rich text editor, the platform provides seamless article management, while the Gemini AI-Integrated Chat Bot makes content creation easy and intuitive.
Additionally, security is supported by NextAuth, offering quick sign-in with Google and GitHub, and the convenience of Google One Tap for an effortless sign-in experience.
To enhance performance and scalability, all post images and user profile images are seamlessly stored in AWS S3, ensuring efficient handling of media files while keeping the application lightweight.
If you find it helpful, don't forget to give it a ⭐️⭐️⭐️ to show your support. Fork this repo if you want to contribute ✨ and take this project to the next level!
This project was created using the following technologies.
- Next.js ➛ React-based framework that enhances performance by enabling server-side rendering (SSR) and static site generation (SSG).
- Swr ➛ A React hook library for data fetching that provides features like caching, revalidation, and real-time updates to simplify handling remote data.
- Typescript ➛ A superset of JavaScript that adds static types, enhancing code quality, maintainability, and developer productivity by catching errors during development.
- Tailwind CSS ➛ A utility-first CSS framework that allows for rapid UI development by using predefined classes directly in HTML without writing custom styles.
- Prisma ➛ An ORM (Object-Relational Mapping) tool for Node.js and TypeScript that simplifies database access and management by providing type-safe queries and an intuitive data modeling experience.
- Editor.js ➛ A web-based text editor that enables block-based content management, making it easy to edit text and media elements
- Headless.ui ➛ A set of completely unstyled, accessible UI components built by the creators of Tailwind CSS, designed to integrate seamlessly with any styling solution.
- Next Auth ➛ An authentication library for Next.js that simplifies adding authentication to your application with built-in support for providers like Google, GitHub, and custom email/password.
- google-auth-library ➛ A Node.js library that simplifies authentication and authorization with Google APIs by providing easy-to-use methods for managing OAuth 2.0 and JWT tokens.
- @google/generative-ai ➛ A JavaScript client library that enables developers to integrate Google's Gemini AI models into their applications, allowing for text, image, and other generative AI features.
- @aws-sdk/client-s3 ➛ A JavaScript/TypeScript client for Amazon S3 that allows developers to interact with Amazon Simple Storage Service (S3), providing functionalities like uploading, downloading, and managing files and buckets in AWS.
- react-hook-form ➛ A React library for managing forms that simplifies form validation and handling by using hooks, making it lightweight, performant, and easy to integrate with existing components
- zod ➛ A TypeScript-first schema declaration and validation library that ensures data correctness by allowing developers to define and validate the shape of objects, arrays, and other data structures
- nodemailer ➛ A Node.js module for sending emails that provides a simple and flexible API for integrating email functionality into applications, supporting various transport methods like SMTP, sendmail, and more
- react-lazy-load-image-component ➛ A React component library that implements lazy loading for images, improving performance by loading images only when they enter the viewport, which reduces initial page load time and resource usage.
- use-debounce ➛ A React hook that delays updating a value until after a specified time has passed since the last change, reducing the frequency of updates and improving performance.
- slugify ➛ A utility that converts strings into URL-friendly slugs by transforming spaces and special characters into hyphens, typically used for generating clean, readable URLs.
- react-medium-image-zoom ➛ A React component for adding a zoom effect to images, allowing users to click and view a larger version of the image in a modal.
- react-hot-toast ➛ A React library for displaying customizable, lightweight toast notifications for alerts and messages, designed for ease of use and minimal impact on UI performance
- react-highlight-words ➛ A React component for highlighting specific words or phrases within a text, making it easy to emphasize parts of the content dynamically.
- ai ➛ A library for integrating Google's Gemini AI into React applications, using hooks like useChat to manage and display data generated by Gemini.
- axios ➛ A promise-based HTTP client for making requests to servers, allowing for easy handling of requests and responses, including features like interceptors, automatic JSON transformation, and error handling.
- bcrypt ➛ A JavaScript library for hashing and comparing passwords using bcrypt, providing a secure way to store and verify user passwords in applications.
- next-themes ➛ An npm package for managing theme switching in Next.js applications. It allows easy implementation of light and dark mode themes, and it stores user preferences in the browser.
- react-icons ➛ A React library that provides a collection of customizable icons from popular icon sets, making it easy to include scalable, vector icons in your React applications.
- react-confetti ➛ A React component for displaying confetti animations, adding celebratory effects to your application with customizable options for colors, size, and duration.
- editorjs-react-renderer ➛ A React component for rendering content created with Editor.js, a block-style editor, allowing for the integration and display of rich, structured content within React applications.
- ESLint ➛ A tool for identifying and fixing problems in JavaScript/TypeScript code, helping maintain code quality and consistency by enforcing coding standards and catching potential errors during development
👉 Authentication (Google / GitHub / Google One Tap) 🔐
Authentication is handled using NextAuth, allowing users to sign in quickly via Google or GitHub. Additionally, with Google One Tap, users can log in even faster, without needing to manually enter credentials, offering a seamless and efficient authentication experience.
👉 Login & Registration (Standard Authentication & Password Recovery) 🔑
In addition to social logins, the application provides a Login and Register page for users who prefer to create accounts with an email and password. After registering, users can sign in using their credentials through the Login page. If a user forgets their password, they can easily reset it via the Forgot Password page, which sends a password reset link to their email. By clicking the link, users are redirected to the Reset Password page, where they can securely set a new password and regain access to their account.
👉 Scroll Mode (Pagination / Infinite Scrolling) 🔄
The application offers two different ways to display posts: Pagination and Infinite Scrolling. With Pagination, users can navigate through posts in discrete pages, allowing them to easily track their position. Infinite Scrolling provides a seamless browsing experience by automatically loading new content as the user reaches the bottom of the page. This flexibility enhances the post viewing experience, allowing users to choose their preferred method and enabling smooth navigation through large datasets.
👉 Post Sorting (Sort By) 🔃
The application includes a Post Sorting feature, allowing users to organize posts based on different criteria. Users can sort posts by the latest, most popular, or other custom metrics, enhancing the browsing experience by helping them find the content most relevant to their interests.
👉 Post View Options (Grid / List) 🖼️
Users can switch between two display formats: Grid, which shows posts in a compact, tile-based layout, and List, which provides a more detailed, vertical arrangement. This flexibility allows users to view content in their preferred style.
👉 Efficient Search (Posts / Users / Topics) 🔍
The application features a Search Modal that allows users to quickly find content by entering posts, users, or topics. This search function is optimized for performance, delivering fast and accurate results to enhance the overall browsing experience.
👉 Post Detail (Views / Applause / Comments / Suggested Posts) 📝
The Post Detail page showcases the full content of user-generated posts, including the number of views to track engagement. Users can interact with the post using the Applause button, triggering an animated effect to show appreciation. At the bottom of the page, Suggested Posts are displayed, helping users discover similar content and continue their reading journey seamlessly.
In addition, users can leave feedback or participate in discussions through a side-opening Comments Drawer, allowing for easy interaction without navigating away from the post. This feature encourages a more dynamic and engaging conversation around the content.
👉 Write / Edit Post (Editor & AI-Assisted Writing) 📝
In the Write and Edit Post page, users can efficiently compose their posts using the rich features of React-Editor-JS. With a variety of available packages, the editor offers a flexible writing experience. Users are required to select at least one topic for their post, which can be done using the Add Tags Popover element.
Additionally, the integration of the Gemini AI-Integrated Chat Bot provides users with instant assistance. If they forget information or need help while writing, they can easily access the chatbot via a sidebar section and get answers in real-time, enhancing their overall writing experience.
👉 Dark/Light Mode (Smooth Transitions with Next-Themes and Tailwind CSS) 🌞🌙
The application offers a seamless Dark and Light mode toggle, providing users with the flexibility to choose their preferred theme. This feature is powered by the next-themes package, enabling efficient theme switching without page reloads. Coupled with Tailwind CSS, the transition between Dark and Light modes is smooth and visually appealing, enhancing the user experience with elegant color shifts and fast responsiveness.
👉 About Page (Posts & Follows Overview) 👤
On the About page, you can view all the posts published by the user as well as see who they are following and who is following them. This page also provides an overview of the user's profile, allowing others to get to know more about their interests and activities on the platform.
👉 User Follow System (Stay Updated with Followed Users) 👥
The application includes a powerful User Follow feature, allowing users to follow each other and stay connected. By following other users, you can easily track their posts and activities within the app. Although not detailed here, followers receive notifications based on the interactions and updates of the users they follow, helping them stay engaged with the latest content.
👉 Notifications (Followed User Activity) 🔔📢
Users receive notifications based on the activities of people they follow. For example, when a followed user follows someone new, Applauds a post, or Creates a new post, notifications are sent, keeping the user informed of interactions and new content from their followed accounts.
👉 Saved Posts (Bookmark & Access Later) 📌
Users have the option to save posts they find interesting or want to read later by simply clicking the Save button. These saved posts are automatically added to the Saved Posts List, where users can easily access them at any time. This feature ensures that users never miss out on content they intend to revisit.
👉 Account Management (Profile Picture, Personal Information, Password, and Account Deletion) ⚙️
The Account Management page allows users to fully manage their profiles. Here, users can easily update their profile pictures and edit personal information, ensuring their account details are always up to date. The page also provides the option to change your password for enhanced security, or even delete your account, which permanently removes all data associated with the user from the system.
👉 Middleware Protection (Session-Based Access Control) 🚧
To ensure security and privacy, the application implements Middleware that restricts access to certain pages based on the user's session status. If users attempt to access restricted content without a valid session, they are redirected to the login page. This ensures that only authenticated users can view sensitive information or interact with specific features, enhancing both security and user experience.
👉 Responsive Website Design (Seamless Across Devices) 📱
The project is fully responsive, ensuring an optimal user experience across all devices, from mobile to desktop. This responsiveness is achieved effortlessly using Tailwind CSS, which simplifies the creation of fluid layouts and adaptive components. With minimal effort, the design scales beautifully across different screen sizes.
👉 Metadata Optimization and SEO (Enhanced Performance & Visibility) 📈
This project leverages Next.js’s built-in performance features to ensure fast page loads and efficient rendering. In addition to this, metadata optimization is a key focus, with dynamic metadata generated for each page. This approach enhances SEO, improving the website’s visibility in search engines and providing users with a more engaging experience through well-structured content and searchability.
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/Muhammet-Yildiz/Next-Blog.git
cd next-blogInstallation
Install the project dependencies using npm:
npm installConfig .env
This repository uses several environment variables. Please copy .env.example into .env, then fill in the values with your own.
NEXT_PUBLIC_BASE_URL = http://localhost:3000
DATABASE_URL= "mongodb+srv://--user--:password@cluster.3todobd.mongodb.net/test"
NEXTAUTH_SECRET =
NODE_ENV = "development"
# Next auth GitHub
GITHUB_ID =
GITHUB_SECRET =
# Next auth Google
NEXT_PUBLIC_GOOGLE_ID =
GOOGLE_SECRET =
# Aws
AWS_S3_REGION =
AWS_S3_ACCESS_KEY_ID =
AWS_S3_SECRET_ACCESS_KEY =
AWS_S3_BUCKET_NAME =
NEXT_PUBLIC_AWS_S3_IMAGE_HOST_URI = https://-------.s3.eu-north-1.amazonaws.com
# Nodemailer
SMTP_USER =
SMTP_PASS =
#Gemini
GOOGLE_GEMINI_API_KEY =
Running the Project
npm run devOpen http://localhost:3000 in your browser to view the project.
All the endpoints are listed below.
-
Auth:
api/auth/forgot-password/- POSTapi/auth/[...nextauth]/- POSTapi/auth/reset-password/- GET, POSTapi/auth/signup/- POST
-
Users:
api/users/follow/- POSTapi/users/recommended/- GET
-
Posts:
api/posts/- GET, POST, PUT, DELETEapi/posts/[id]/- GETapi/posts/[id]/recommend/- GETapi/posts/images/delete/- POSTapi/posts/images/upload/- POSTapi/posts/infinite/- GETapi/posts/like/- POSTapi/posts/popular/- GETapi/posts/saved/- GET, POST
-
Topics:
api/topics/- GET, POST
-
Notifications:
api/notifications/- GET, POST, DELETE
-
Comments:
api/comments/- GET, POST, DELETE
-
Account:
api/account/- POST, DELETEapi/account/change-password/- POST
-
About:
api/about/[email]/- POST
-
Search:
api/search/- GET
-
Genai:
api/genai/- POST
Crafted with a little help from the 👻 by Muhammet Yıldız