feat: Implement simple blog with Next.js

[Vectorredz]

Hello, this is Louise Gabriel Vilar applying as an Intern for the Fullstack Developer role from your organization (Codebility).

This PR implements a simple blog application using Next.js, serving as my submission for the fullstack assessment. The app includes a homepage for listing blog posts, dynamic routing for individual posts, and API endpoints for fetching blog data.

Tech Stack

• Next.js (App Router)
• TypeScript
• Tailwind CSS

Features Implemented

1. Home Page

• Shown from the image above is the actual webpage once the command npm run dev is executed.
• Displays a list of blog posts with title and excerpt
• Each post links to its respective blog page
• Layout is structured into:
  • Hero section
  • Main content (post list)
  • Footer (included to personalize the webpage)
• Styled using Tailwind for a clean and responsive UI

2. Blog Post Pages (/posts/[id])

- Implemented dynamic routing using post `id` as a slug - Each page displays: + Full blog content + Title and date - Includes navigation back to the homepage - Handles multiple posts dynamically

3. API Routes

- Created API endpoints to serve blog data: + `GET /api/posts` → returns all posts + `GET /api/posts/[id]` → returns a specific post - The `id` acts as a parameter for fetching individual posts - Once the GET request is received, the server will return a response in JSON format

On Data Handling

• Blog data is stored in a local file (data/posts)
• API routes simulate backend behavior by serving this data

Thank you.
Louise Gabriel Vilar