ReadNow Blog Viewer - Next.js

Welcome to the ReadNow Blog Viewer!

A simple & minimal blog viewer application built with Next.js that demonstrates routing, server and client components, dynamic routes, authentication, and data fetching.

Objective

• Display a list of blog posts fetched from a mock API.
• Navigate to a detailed blog post page using dynamic routes.
• Protect the private page with Kinde Auth.
• Redirect users to the login page if not authenticated.

Features:

• 🏠 Home Page: Lists blog post titles fetched from a mock API. Each title links to a detailed page.
• 📖 Blog Details Page: Displays the details of a specific blog post using a dynamic route (/blog/[id]).
• 🔒 Profile Page: Protected page that requires authentication via Kinde Auth.
• 🌐 Navigation: Links to "Home" and "Profile". Conditional login/logout buttons.
• 🎨 Responsive Styling: Basic design using Tailwind CSS for a clean look.

Requirements:

• Next.js: For server-side rendering (SSR) and static site generation (SSG).
• Tailwind CSS: Utility-first CSS framework for responsive design.
• Kinde Auth: Authentication for securing the Profile page.
• JSONPlaceholder API: Mock API to fetch blog post data.

API Endpoints:

• GET https://jsonplaceholder.typicode.com/posts - Fetches all blog posts.
• GET https://jsonplaceholder.typicode.com/posts/[id] - Fetches a specific blog post by its id.

Authentication with Kinde:

• 🔒 Users are redirected to the Login page if not authenticated.
• ✅ Kinde Auth protects the Profile page, ensuring only authorized users can access it.

Technology Stack:

• ⚛️ Next.js - React framework for Server-Side Rendering (SSR) & Static Site Generation (SSG).
• 🎨 Tailwind CSS - Utility-first CSS framework for responsive and clean design.
• 🔑 Kinde Auth - Provides authentication to secure the Profile page and handle user sessions.