name | slug | description | framework | useCase | css | database | deployUrl | demoUrl | relatedTemplates | |||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Kanban Task Management Web App |
postgres-prisma |
The Kanban Task Management App is created with Next.js app that uses Vercel Postgres as the database and Prisma as the ORM. |
Next.js |
Starter |
Tailwind |
Vercel Postgres |
|
This is a solution to the Kanban task management web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The Kanban Task Management App is created with Vercel Postgres as the database and Prisma as the ORM.
Note: Delete this note and update the table of contents based on what sections you keep.
This is a premium Frontend Mentor coding challenge.
The challenge is to build out a task management app and get it looking as close to the design as possible.
Frontend Mentor provided the data in a local data.json
file, to use and populate the content on the first load.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Create, read, update, and delete boards and tasks
- Receive form validations when trying to create/edit boards and tasks
- Mark subtasks as complete and move tasks between columns
- Hide/show the board sidebar
- Toggle the theme between light/dark modes
- Bonus: Allow users to drag and drop tasks to change their status and re-order them in a column
- Bonus: Keep track of any changes, even after refreshing the browser (
localStorage
could be used for this if you're not building out a full-stack app) - Bonus: Build this project as a full-stack application
- Boards
- Clicking different boards in the sidebar will change to the selected board.
- Clicking "Create New Board" in the sidebar opens the "Add New Board" modal.
- Clicking in the dropdown menu "Edit Board" opens up the "Edit Board" modal where details can be changed.
- Columns are added and removed for the Add/Edit Board modals.
- Deleting a board deletes all columns and tasks and requires confirmation.
- Columns
- A board needs at least one column before tasks can be added. If no columns exist, the "Add New Task" button in the header is disabled.
- Clicking "Add New Column" opens the "Edit Board" modal where columns are added.
- Tasks
- Adding a new task adds it to the bottom of the relevant column.
- Updating a task's status will move the task to the relevant column. If you're taking on the drag-and-drop bonus, dragging a task to a different column will also update the status.
The task is to build out the project to the design file provided. Frontend Mentor provided a Figma file of the design.
All the required assets for this project are in the public/assets
folder. The assets are already exported for the correct screen size and optimized. Some images are reusable at multiple screen sizes.
Frontend Mentor decided to use a nested data structure for the data.json
file, but they were happy for the developer to feel free to alter and flatten the data however one like if required
The design system in the design file will give you more information about the various colors, fonts, and styles used in this project. Our fonts always come from Google Fonts.
This project is hosted on Vercel
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
Make sure your Prisma schema is in sync with your database schema.
npx prisma db pull
After Updating the schema
Caution: This will probably wipe the current data
npx prisma db push
then use prisma migrate if the seed has been updated:
npx prisma migrate dev
In this project I'm using clerk for user management. Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.
- Website clerk
I created a project on Clerk chose Google and Email authentication installed clerk with yarn created middleware file and added the clerk provider to the layout file
- Hero Icons - Hero Icons
- Website - Jaco Kotzee
- Frontend Mentor - @jakwakwa