Blog Application

A modern blog application built with React, TypeScript, and TanStack Query featuring a clean UI with Tailwind CSS and shadcn/ui components.

🚀 Features

• View All Blogs - Browse through all blog posts with a responsive card layout
• Blog Details - View detailed blog content with cover images
• Create New Blog - Add new blog posts with a user-friendly form
• Real-time Updates - Automatic query invalidation and cache management
• Loading States - Smooth skeleton loaders for better UX
• Error Handling - Graceful error states and user feedback
• Responsive Design - Mobile-first responsive layout

🛠️ Tech Stack

• React 19 - UI library
• TypeScript - Type-safe development
• Vite - Fast build tool and dev server
• TanStack Query v5 - Server state management and data fetching
• Tailwind CSS v4 - Utility-first CSS framework
• shadcn/ui - Beautiful and accessible component library
• JSON Server - Mock REST API backend
• Lucide React - Icon library

📋 Prerequisites

• Node.js (v18 or higher)
• npm or yarn package manager

🔧 Installation

1. Clone the repository

   git clone <repository-url>
   cd Frontend-Interview

2. Install dependencies

   npm install

🚦 Running the Application

You need to run both the backend (JSON Server) and frontend development server:

1. Start the JSON Server (Terminal 1)

   npm run server

   The API will be available at http://localhost:3001

2. Start the Development Server (Terminal 2)

   npm run dev

   The application will be available at http://localhost:5173

📁 Project Structure

src/
├── components/
│   ├── BlogList.tsx          # Blog list view component
│   ├── BlogDetail.tsx        # Individual blog detail view
│   ├── CreateBlogForm.tsx    # Form for creating new blogs
│   └── ui/                   # shadcn/ui components
│       ├── badge.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── input.tsx
│       ├── skeleton.tsx
│       └── textarea.tsx
├── lib/
│   ├── api.ts                # API service layer
│   └── utils.ts              # Utility functions
├── types/
│   └── blog.ts               # TypeScript type definitions
├── App.tsx                   # Main application component
└── main.tsx                  # Application entry point

🔌 API Endpoints

The JSON Server provides the following REST endpoints:

Method	Endpoint	Description
GET	/blogs	Get all blogs
GET	/blogs/:id	Get a specific blog
POST	/blogs	Create a new blog
PUT	/blogs/:id	Update an existing blog
DELETE	/blogs/:id	Delete a blog

📝 Blog Schema

interface Blog {
  id: number;
  title: string;
  category: string[];
  description: string;
  date: string;
  coverImage: string;
  content: string;
}

🎨 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run server - Start JSON Server on port 3001

🔑 Key Features Implementation

State Management

• Uses TanStack Query for efficient server state management
• Automatic background refetching and cache invalidation
• Optimistic updates for better UX

Styling

• Tailwind CSS for utility-first styling
• shadcn/ui components for consistent design system
• Fully responsive layout with mobile-first approach

Type Safety

• Full TypeScript coverage
• Strongly typed API responses
• Type-safe component props

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Built with ❤️ using modern React best practices