CSMBD Assignment Frontend

A modern, responsive web application built with Next.js 15 for user content management and collaboration.

Demo Account

Email: aansourav@email.com
Password: 11111111

📑 Table of Contents

• CSMBD Assignment Frontend - Demo Account
  • 📑 Table of Contents
  • ✨ Features
  • 🛠 Tech Stack
  • 🎮 Demo
  • 🚀 Getting Started
    • Prerequisites
    • Installation
  • 📂 Project Structure
  • ⚙️ API Configuration
  • 🌐 Deployment
    • Build for Production
  • 👥 Contributing
  • ❓ Troubleshooting
    • Common Issues

✨ Features

• 👤 User Authentication - Secure sign-in and sign-up functionality with JWT token management
• 👥 User Management - View, search, and sort user profiles
• 📝 Content Management - Create, browse, search, and filter content
• 👤 User Profiles - Detailed user profiles with content history
• 📱 Responsive UI - Beautiful interface that works on all device sizes
• 🔄 Real-time Updates - Data fetching with TanStack React Query
• 📄 Pagination - Efficient content loading with pagination support
• 🔍 Advanced Filtering - Search and sort functionality throughout the application
• 🌓 Theme Support - Light and dark mode with next-themes

🛠 Tech Stack

Core Technologies

• Next.js 15 - React framework with server components and App Router
• React 19 - Frontend library
• TypeScript - Static type checking
• TailwindCSS - Utility-first CSS framework

UI Libraries

• shadcn/ui - High-quality UI components built with Radix UI and Tailwind
• Radix UI - Unstyled, accessible components
• Lucide Icons - Beautiful, consistent icon set
• Tailwind Animate - Tailwind plugin for animations
• Framer Motion - Animation library
• Sonner - Toast notifications

State Management & Data Fetching

• TanStack React Query - Data fetching, caching, and state management
• React Hook Form - Form validation with Zod and Yup schemas
• Context API - Application state management

Data Visualization

• Recharts - Composable charting library
• Embla Carousel - Flexible carousel component

Additional Libraries

• date-fns - Date manipulation
• clsx & tailwind-merge - Conditional class name utilities
• class-variance-authority - Type-safe UI variants

🎮 Demo

Check out the live demo: CSMBD Frontend Live Site

🚀 Getting Started

Prerequisites

• Node.js 18.17 or later
• npm (recommended) or npm

Installation

1. Clone the repository

git clone https://github.com/your-username/csmbd-assignment-frontend.git
cd csmbd-assignment-frontend

2. Install dependencies

npm install

3. Configure environment variables

cp .env.example .env.local

Edit .env.local with your configuration:

NEXT_PUBLIC_API_URL=https://your-api-url.com
NEXT_PUBLIC_APP_ENV=development

4. Start the development server

npm dev

5. Open http://localhost:3000 in your browser

📂 Project Structure

csmbd-assignment-frontend/
├── app/                    # Next.js App Router pages and layouts
│   ├── content/            # Content management pages
│   ├── profile/            # User profile pages
│   ├── signin/             # Authentication pages
│   ├── signup/             # Registration pages
│   ├── users/              # User management pages
│   ├── layout.tsx          # Root layout
│   └── page.tsx            # Home page
├── components/             # Reusable UI components
│   ├── ui/                 # shadcn/ui components
│   ├── layout/             # Layout components
│   └── providers.tsx       # App providers
├── context/                # React Context providers
├── hooks/                  # Custom React hooks
├── lib/                    # Utility functions and helpers
├── middleware/             # Next.js middleware functions
├── public/                 # Static assets
├── services/               # API services and utilities
│   └── api.js              # API client
├── styles/                 # Global CSS and Tailwind configuration
├── config/                 # Application configuration
├── next.config.mjs         # Next.js configuration
├── package.json            # Dependencies and scripts
├── tailwind.config.js      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

⚙️ API Configuration

The application communicates with a backend API. Configure the API URL in your ./config/url.js file:

// API Configuration
export const BASE_URL = "http://localhost:5500";
export const API_URL = "http://localhost:5500/api/v1";

The API client (services/api.js) handles authentication, request formatting, and token refresh functionality.

🌐 Deployment

Build for Production

npm build
npm start

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your 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

Please make sure to update tests as appropriate.

❓ Troubleshooting

Common Issues

Issue: API connection errors Solution: Verify your API URL in ./config/url.js and ensure the API server is running.

Issue: Build fails with module not found errors Solution: Run npm install to ensure all dependencies are installed.

Issue: Authentication issues Solution: Clear browser cookies/local storage and try signing in again.

---

🌟 Built with ❤️ by Abdullah An-Noor 🌟