https://github.com/charandvvk/kanban-board
ReactJS-based Web Application developed as part of a hiring assignment by QuickSell.
https://github.com/charandvvk/kanban-board
css3 html5 javascript-es6 local-storage react-icons react-js
Last synced: 3 months ago
JSON representation
ReactJS-based Web Application developed as part of a hiring assignment by QuickSell.
- Host: GitHub
- URL: https://github.com/charandvvk/kanban-board
- Owner: charandvvk
- Created: 2023-11-05T04:18:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-24T13:49:30.000Z (over 2 years ago)
- Last Synced: 2025-01-21T11:30:16.913Z (over 1 year ago)
- Topics: css3, html5, javascript-es6, local-storage, react-icons, react-js
- Language: JavaScript
- Homepage: https://dandavvkcharan-kanban-board.netlify.app/
- Size: 244 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kanban Board: ReactJS-based Web Application
This project is developed as part of a hiring assignment for a Frontend role at [QuickSell](https://quicksell.co).
## Table of Contents
1. [Overview](#overview)
2. [Demo](#demo)
3. [Usage](#usage)
4. [Screenshots](#screenshots)
5. [Features](#features)
6. [Technologies](#technologies)
7. [Setup](#setup)
## Overview
This application interacts with the provided [API](https://api.quicksell.co/v1/internal/frontend-assignment) and allows users to dynamically adjust the Kanban board based on their grouping and sorting preferences.
## Demo
You can experience a live demo of the application [here](https://dandavvkcharan-kanban-board.netlify.app), hosted on Netlify.
## Usage
1. Click on the "Display" button to toggle the "Grouping" and "Ordering" options menu.
2. Transform the Kanban board in real time based on your choice of grouping and sorting.
## Screenshots
- Grouped by `Status`, Sorted by `Priority`:
- Grouped by `Status`, Sorted by `Title`:
- Grouped by `User`, Sorted by `Title`:
- Grouped by `Priority`, Sorted by `Title`:
## Features
- Group tickets by Status, User, and Priority.
- Sort tickets by Priority and Title.
- Responsive and visually appealing UI design.
- State preservation across page reloads.
- Error handling for reliable data fetching.
- Clean and optimized business logic.
- Reusable and maintainable components.
## Technologies
- [HTML5](https://html.com/)
- [CSS3](https://css3.com/)
- [JavaScript/ES6](https://www.javascript.com/)
- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
- [React Icons](https://react-icons.github.io/react-icons)
- [React](https://react.dev)
## Setup
To get a local copy of the project up and running, follow these steps:
1. Launch your preferred command-line interface (CLI).
2. Clone the repository: `git clone https://github.com/charandvvk/Kanban-Board.git`
3. Change to the project directory: `cd Kanban-Board`
4. Install dependencies: `npm i`
5. Start the development server: `npm start`
6. Open your favored browser and navigate to http://localhost:3000.