The Monarch_Board was a 3 day MintBean Hackathon project for the JavaScript Bootcamp Olympics! We were tasked to create a kanban board, focusing on an intuitive UX! A kanban board is an agile project management tool that helps a user visualize their todos and progress. From the kanban board, the user can add/delete tasks and columns, rename columns, and reorder tasks/columns.
Our board was implemented using React, using create-react-app, and react-beautiful-dnd for the the drag-and-drop feature. We also implemented react-modal for our modal integration upon adding new tasks and columns.
Let's get organized!
- Clone down this repo
- Install the library dependencies. Run:
npm install
- Then, run
npm startin your terminal. Go tohttp://localhost:3000/and you should see the page there! Then, you can entercontrol + cin your terminal to stop the server at any time.
- React
- create-react-app
- Router
- react-beautiful-dnd
- react-modal
- Expand a task card to see its description
- Move tasks between columns using the "Move" button in the context menu
- Mobile-responsiveness
- Each card has a context menu you can access through right-click (desktop).
- Each card has a context menu you can access through long-press (mobile).
- Nice animations
- Access the context menu using right-click
- Add images as attachments to the cards
- Save data to LocalStorage or IndexedDB
- Onboarding tutorial
- Help text
- Info bubbles
- Helpful hints
- Clear notifications