BlogNest ✍️🚀

📌 Table of Contents

• BlogNest ✍️🚀
  • 📌 Table of Contents
  • 🌐 Overview
  • ⚙️ Features
  • 💻 Technologies Used
  • 🗝️ Key Takeaways
  • 🚀 How to Run the Project
  • 🤝 Contributing
  • 💬 Contact

🌐 Overview

BlogNest is a modern full-stack blog application where authenticated users can create, view, and interact with blog posts.
Built using Next.js 15 (App Router), it supports SSR, Server Actions, and React Suspense for a fast and optimized experience.

This project includes secure user authentication via Kinde, a clean and responsive UI powered by Tailwind CSS, and a PostgreSQL database managed through Prisma ORM.

⚙️ Features

• 📝 Post CRUD – Authenticated users can create blog posts with title, content, and image.
• 🔐 Kinde Auth Integration – Secure login, registration, and logout flows.
• ⏳ React Suspense + Skeleton Loaders – Enhanced UX with graceful async loading.
• ⚙️ Next.js Server Actions – Mutate server-side data using use server functions.
• 📦 Prisma + SQL – Strong data modeling and querying with PostgreSQL.
• 🎨 Modern Responsive UI – Built with Tailwind CSS and ShadCN components.
• 📅 Formatted Dates – Posts display human-readable timestamps.
• 🔁 Dynamic Routing – Each post has its own detail page.

💻 Technologies Used

• Next.js 15 — React framework with support for server components, server actions, SSR, and routing.
• React 19 — UI library with built-in Suspense support for async rendering.
• Tailwind CSS — Utility-first CSS framework for fast and responsive styling.
• ShadCN UI — Accessible UI components built on Tailwind and Radix UI.
• TypeScript — Strongly typed language that compiles to JavaScript.
• Prisma — Type-safe ORM for working with SQL databases (PostgreSQL).
• Kinde Auth — Authentication and user management platform with Next.js SDK.
• Lucide Icons — Open-source icon set used throughout the UI.

🗝️ Key Takeaways

1. Full-Stack with App Router – Built entirely with the Next.js 15 App Router, allowing layout-based routing and server-side logic.
2. Authentication with Kinde – Clean and secure auth workflows using Kinde SDK and protected routes.
3. Server Actions + Revalidation – Uses server functions ("use server") for form submissions, mutations, and cache revalidation with revalidatePath().
4. React Suspense – Async rendering powered by Suspense, with fallback skeleton components while fetching data.
5. Optimized Performance – SSR-enabled pages, efficient database queries via Prisma, and UI feedback through loaders and skeletons.

🚀 How to Run the Project

1. Clone the repository:

   git clone https://github.com/Cauebf/blognest.git
   cd blognest

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env file in the root directory and add the following variables:

   # Prisma database URL
   DATABASE_URL=your_database_connection_string_here
   
   # Kinde Auth configuration
   KINDE_CLIENT_ID=your_kinde_client_id
   KINDE_CLIENT_SECRET=your_kinde_client_secret
   KINDE_ISSUER_URL=your_kinde_issuer_url
   KINDE_SITE_URL=http://localhost:3000
   KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
   KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

4. Set up Prisma and the database:

   npx prisma generate
   npx prisma migrate dev --name init

5. Start the development server:

   npm run dev

6. Build the app for production:

   npm run build
   npm start

🤝 Contributing

Contributions are welcome! Feel free to open issues or pull requests for any improvements or bug fixes.

💬 Contact

For any inquiries or collaboration opportunities, feel free to reach out via:

(back to top)