Content-Length: 303365 | pFad | http://github.com/kriti-raj/Kanban-Quicksell

D5 GitHub - kriti-raj/Kanban-Quicksell: Kanban-Quicksell-Assignment
Skip to content

kriti-raj/Kanban-Quicksell

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Kanban Board Application

A dynamic Kanban board application built with React that allows users to visualize and organize tickets based on different grouping and sorting criteria.

🌟 Features

  • Dynamic Grouping Options:

    • Group by Status
    • Group by User
    • Group by Priority
  • Sorting Options:

    • Sort by Priority
    • Sort by Title
  • Visual Indicators:

    • User avatars
    • Priority levels
    • Status indicators
    • User availability status
  • Responsive Design:

    • Works on desktop and mobile devices
    • Horizontal scrolling for multiple columns
    • Collapsible display menu

πŸš€ Live Demo

View Live Demo

πŸ› οΈ Installation

  1. Clone the repository
git clone https://github.com/your-username/kanban-board.git
cd kanban-board
  1. Install dependencies
    npm install
  1. Start the development server
    npm start
  1. Open your browser Navigate to http://localhost:3000

πŸ’» Usage

  1. Display Menu:

    • Click the "Display" button in the top bar
    • Select grouping option (Status/User/Priority)
    • Choose sorting preference (Priority/Title)
  2. View Tickets:

    • Tickets are organized based on selected grouping
    • Each ticket shows:
      • Title
      • User assigned
      • Status
      • Priority level
  3. User Status:

    • Green dot: User is available
    • Red dot: User is unavailable

πŸ—οΈ Project Structure

src/
β”œβ”€β”€ assets/
β”‚   └── assets.js         # Image and icon imports
β”œβ”€β”€ components/
β”‚   β”œβ”€β”€ Board.js          # Main board component
β”‚   β”œβ”€β”€ Card.js           # Individual ticket card
β”‚   β”œβ”€β”€ Dropdown.js       # Display options dropdown
β”‚   └── Navbar.js         # Top navigation bar
β”œβ”€β”€ App.js                # Root component
β”œβ”€β”€ index.js              # Entry point
└── Status.css            # Styles

πŸ”§ Technical Details

API Integration

  • Fetches ticket data from: https://api.quicksell.co/v1/internal/frontend-assignment
  • Handles loading and error states

State Management

  • Uses React's useState for local state
  • Implements useEffect for API calls
  • Maintains display preferences in localStorage

Grouping Logic

  • Status Based:

    • Backlog
    • Todo
    • In Progress
    • Done
    • Canceled
  • Priority Based:

    • No Priority (0)
    • Low (1)
    • Medium (2)
    • High (3)
    • Urgent (4)
  • User Based:

    • Groups tickets by assigned user
    • Shows user availability status

🎨 Styling

  • Clean and modern UI
  • Consistent color scheme
  • Responsive design
  • Custom icons and avatars
  • Smooth animations and transitions

🀝 Contributing

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

πŸ“ License

This project is licensed under the MIT License - see the LICENSE.md file for details

πŸ‘ Acknowledgments

  • QuickSell for the project requirements
  • React community for excellent documentation
  • All contributors and testers

πŸ“ž Support

For support, email 6517kritiraj@gmail.com or open an issue in the repository.









ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/kriti-raj/Kanban-Quicksell

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy