GraphQL Kanban Board - Frontend

This is the frontend for the Kanban Board application, built with React, TypeScript, and Tailwind CSS. It provides a user-friendly, drag-and-drop interface for managing tasks by interacting with the GraphQL backend.

Features

• Drag & Drop Interface: Easily move tasks between columns to update their status.
• Real-time Updates: The UI updates automatically when changes are made, powered by GraphQL subscriptions (coming soon).
• Create & Manage Tasks: Add new tasks through an intuitive modal.
• Toast Notifications: Provides user feedback for actions like creating or moving tasks.
• Typed Codebase: Built with TypeScript for better maintainability and developer experience.

Technology Stack

• Framework: React 18
• Language: TypeScript
• GraphQL Client: Apollo Client v3
• Styling: Tailwind CSS with Shadcn/ui components
• Drag & Drop: dnd-kit
• Build Tool: Vite (or Create React App)

Prerequisites

• Node.js (v18.x or later recommended).
• npm or yarn package manager.

Getting Started

Follow these steps to get the frontend application running locally.

1. Backend Must Be Running First! This application requires the backend server to be running to function. Please follow the setup instructions in the backend's README file first.

2. Clone the repository

   git clone <your-repository-url>
   cd <path-to-frontend-folder>

3. Install Dependencies This command installs all the necessary npm packages.

   npm install

4. Run the Development Server This command starts the local development server, typically on port 3000.

   npm run dev

5. Open the Application Open your web browser and navigate to the URL shown in your terminal.

   • URL: http://localhost:3000

Configuration

The GraphQL API endpoint is configured in src/App.tsx. If your backend server runs on a different port, you will need to update the uri in the ApolloClient constructor.

// src/App.tsx

const client = new ApolloClient({
  uri: 'https://localhost:7225/graphql', // <-- Change this URL if needed
  cache: new InMemoryCache(),
});```

## Available Scripts

-   `npm run dev`: Starts the development server.
-   `npm run build`: Bundles the app for production.
-   `npm run preview`: Serves the production build locally for testing.

## Project Structure

/src ├── components/ │ ├── KanbanBoard.tsx # The main board component with dnd-kit logic. │ ├── KanbanColumn.tsx # Renders a single column ('To Do', 'Done', etc.). │ ├── TaskCard.tsx # Renders a single draggable task card. │ └── AddTaskModal.tsx # Modal for creating a new task. ├── pages/ │ └── TaskManager.tsx # The main page component that holds state and logic. ├── types/ │ └── task.ts # TypeScript interfaces and types for tasks. └── utils/ └── statusMapper.ts # Helper functions to map frontend/backend statuses.

---****