https://github.com/sayedshehata1/kanban-board

https://github.com/sayedshehata1/kanban-board

form-validation react talwindcss typescript

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/sayedshehata1/kanban-board
• Owner: SayedShehata1
• Created: 2024-11-13T11:40:36.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-15T15:50:55.000Z (about 2 months ago)
• Last Synced: 2024-11-15T16:37:57.398Z (about 2 months ago)
• Topics: form-validation, react, talwindcss, typescript
• Language: TypeScript
• Homepage: https://kanbanboard-silk.vercel.app
• Size: 381 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


   Kanban Board Bookings





![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=white)

![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

![React Hook Form](https://img.shields.io/badge/React_Hook_Form-EC5990?style=for-the-badge&logo=react-hook-form&logoColor=white)

![Yup](https://img.shields.io/badge/Yup-FFC107?style=for-the-badge&logoColor=white)





  


  

  

  

  


  




---

  Table of Contents

  


    


      About The Project

      


        
Key Features

        
Built With

      

    

    


      Getting Started

      


        
Installation

      

    

  


---

## About The Project

**Kanban Board Bookings** is an intuitive task management board designed to

streamline operations for an online mental health clinic. It features a

user-friendly interface for tracking new member bookings, validating member

information, and seamlessly managing tasks across four stages of processing.



  



### Features

-   **Member Form Validations**:

    -   Ensure correct data entry for fields like Name, Title, Age, Email, and

        Mobile Number with error handling.

-   **CRUD Operations**:

    -   Add, view, update, and delete member cards.

-   **Card Status Management**:

    -   Move cards between columns to reflect their current status.

-   **Drag-and-Drop Functionality**:

    -   Intuitive movement of cards across columns using drag-and-drop.

-   **Persistent Data with Local Storage**:

    -   Save and reload data for a consistent user experience.

-   **Dynamic Card Count**:

    -   Automatically display and update the count of cards in each column.

-   **Tailwind CSS Styling**:

    -   Aesthetic and responsive design for all components.

(back to top)


---

## Built With

-   **React**

-   **TypeScript**

-   **Tailwind CSS**

-   **React Hook Form**

-   **Yup**

-   **React DnD**

(back to top)


---

## Getting Started

To set up and run this project locally, follow the steps below:

### Installation

1.  **Clone the repository**:

    ```bash

    git clone https://github.com/SayedShehata1/Kanban-Board

    ```

2.  go to the project folder

    ```sh

    cd Kanban-Board

    ```

3.  install dependencies

    ```bash

    npm install

    ```

4.  Run development server

    ```sh

    npm run dev

    ```

    
(back to top)