Posts App

A Next.js application that fetches and displays posts from the JSONPlaceholder API in a card-based interface, following SOLID principles.

🚀 Technologies

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe JavaScript
• TailwindCSS - Utility-first CSS framework
• TanStack Query - Data fetching and caching library
• Axios - HTTP client

✨ Features

• Responsive card layout displaying posts from JSONPlaceholder API
• Custom hooks for data fetching with TanStack Query
• Clean architecture following SOLID principles
• Efficient data caching to minimize API calls
• Type-safe development with TypeScript

📦 Installation

1. Clone the repository:

git clone https://github.com/thiagosrib/posts-app.git
cd posts-app

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser to see the application.

🔧 Project Structure

src/
├── app/               # Next.js app router
│   ├── page.tsx       # Home page
│   ├── layout.tsx     # Root layout
│   └── globals.css    # Global styles
├── components/        # UI components
│   ├── ui/            # Reusable UI components
│   └── posts/         # Domain-specific components
├── hooks/             # Custom React hooks
│   ├── provider.ts    # Custom Client Provider
│   └── use-posts.ts   # Posts data handling hook
├── services/          # API services
│   ├── api/           # API configuration
│   └── posts/         # Posts-specific service
└── types/             # TypeScript types

🧩 Architecture

This project follows the SOLID principles:

• S - Single Responsibility: Each component, hook, and service has a single responsibility
• O - Open/Closed: Components are open for extension but closed for modification
• L - Liskov Substitution: Interfaces can be substituted without affecting the application
• I - Interface Segregation: Specific interfaces are better than general ones
• D - Dependency Inversion: High-level modules depend on abstractions

🔄 API Integration

The application fetches data from the JSONPlaceholder API, a fake online REST API for testing and prototyping.

📝 Development Notes

• The usePosts hook handles data fetching, caching, and transformation
• TanStack Query manages the cache with a 5-minute stale time
• Cards display a title and truncated description for each post
• The application is fully responsive for all device sizes