jakwakwa / kanban-fm-postgress-prisma

This is a solution to the Kanban task management web app challenge on Frontend Mentor. I built the app with Vercel Postgres as the database and Prisma as the ORM. NextJs is used for the UI development

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	https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fstorage%2Fpostgres-prisma&project-name=postgres-prisma&repository-name=postgres-prisma&demo-title=Vercel%20Postgres%20%2B%20Prisma%20Next.js%20Starter&demo-description=Simple%20Next.js%20template%20that%20uses%20Vercel%20Postgres%20as%20the%20database%20and%20Prisma%20as%20the%20ORM.&demo-url=https%3A%2F%2Fpostgres-prisma.vercel.app%2F&demo-image=https%3A%2F%2Fpostgres-prisma.vercel.app%2Fopengraph-image.png&stores=%5B%7B"type"%3A"postgres"%7D%5D	https://postgres-prisma.vercel.app/	postgres-starter postgres-kysely postgres-sveltekit

Kanban Task Management Web App

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Frontend Mentor - Kanban task management web app

Welcome! 👋

This is a premium Frontend Mentor coding challenge.

The 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

Expected Behaviour

• 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.

Where to find everything

Figma Design

The task is to build out the project to the design file provided. Frontend Mentor provided a Figma file of the design.

Figma 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.

Deployements

This project is hosted on Vercel

• Vercel

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework

What I learned

Prisma

Migrating

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

User Management

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

Continued development

Resources

• Hero Icons - Hero Icons

Author

• Website - Jaco Kotzee
• Frontend Mentor - @jakwakwa

Acknowledgments