Trello Client Side

A modern, responsive Trello-inspired task management application frontend built with React. This application provides an intuitive drag-and-drop interface for managing tasks across different status categories.

Important Links

Table of Contents

• Features
• Technologies Used
• Prerequisites
• Installation
• Environment Variables
• Usage
• Project Structure

Features

• Intuitive Drag & Drop: Move tasks between different status columns with ease
• Task Management: Create, edit, and delete tasks with custom titles, and descriptions
• Priority Levels: Visual indicators for task priority (Low, Medium, High)
• Responsive Design: Works seamlessly across desktop, tablet, and mobile devices
• Status Tracking: Organize tasks into 5 different status categories:
  • To Do
  • Research
  • In Progress
  • Review
  • Completed
• Real-time Updates: Changes are immediately reflected in the UI and persisted to the backend

Technologies Used

• React: Frontend library for building the user interface
• React Beautiful DnD: Drag and drop library for task movement [1]
• React Query: Data fetching, caching, and state management [3]
• Tailwind CSS: Utility-first CSS framework for styling
• Axios: HTTP client for API requests
• React Router: Navigation and routing
• React Icons: Icon library for visual elements

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn
• The Trello backend API running (see Server Repository)

Installation

1. Clone the repository:

   git clone https://github.com/azizurrahman-zero/trello_client-side.git
   cd trello_client-side

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env file in the root directory:

   REACT_APP_BACKEND_URL=http://localhost:5000
   

4. Start the development server:

   npm start
   # or
   yarn start

5. Open your browser and navigate to http://localhost:3000

Environment Variables

Variable	Description
REACT_APP_BACKEND_URL	URL of the backend API server

Usage

Board View

The main interface displays all tasks organized by status columns. Drag and drop tasks between columns to update their status.

Creating Tasks

Click the "Add Task" button in any column to create a new task. Fill in the required details:

• Title
• Description
• Priority Level (Low, Medium, High)

Editing Tasks

Click on any task card's edit icon to edit information as needed. Changes are automatically saved to the backend and the UI updates immediately thanks to React Query's cache management.

Project Structure

trello_client-side/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.png
│   └── ...
├── src/
│   ├── components/
│   │   ├── AddTicket.js
│   │   ├── AllList.js
│   │   ├── EditTicket.js
│   │   ├── Footer.js
│   │   ├── Home.js
│   │   ├── List.js
│   │   ├── Loading.js
│   │   ├── Navbar.js
│   │   ├── TicketList.js
│   │   └── services/
│   ├── Resource/
│   │   └── logo.png
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├── .env
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── tailwind.config.js