Post & Comment App

A React application for viewing and managing posts with comments, powered by the JSONPlaceholder API.

Features

• Browse Posts - View a list of all posts
• Post Details - View individual post with comments
• Create Posts - Add new posts via a modal form
• Edit & Delete - Update or remove existing posts
• Responsive UI - Clean interface with Header, Navbar, and Footer

Tech Stack

• React 19 - UI framework
• Redux Toolkit - State management with async thunks
• React Router v7 - Client-side routing
• Fetch API - Native browser HTTP client
• Vite - Build tool and dev server

Project Structure

src/
├── app/
│   └── store.js          # Redux store configuration
├── components/
│   ├── Header.jsx        # App header
│   ├── Navbar.jsx        # Navigation bar
│   ├── Footer.jsx        # App footer
│   ├── Welcome.jsx       # Home page
│   └── posts/
│       ├── AllPosts.jsx      # Posts list view
│       ├── PostDetails.jsx   # Single post with comments
│       └── AddPostModal.jsx  # Modal for creating posts
├── services/
│   ├── api.js            # API client (JSONPlaceholder)
│   ├── postsSlice.js     # Posts Redux slice
│   └── commentsSlice.js  # Comments Redux slice
└── styles/               # CSS files for components

Getting Started

Prerequisites

• Node.js 22.12+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

API

This app uses JSONPlaceholder as a mock REST API:

• GET /posts - Fetch all posts
• GET /posts/:id - Fetch single post
• POST /posts - Create new post
• PUT /posts/:id - Update post
• DELETE /posts/:id - Delete post
• GET /comments?postId=:id - Fetch comments for a post

Routes

Path	Component	Description
/	Welcome	Home page
/posts	AllPosts	List of all posts
/posts/:id	PostDetails	Single post with comments