Frontend Mentor - Kanban task management web app solution

This is a solution to the Kanban task management web app challenge on Frontend Mentor for portfolio purposes.

Table of contents

• Frontend Mentor - Kanban task management web app solution
• Table of contents
  • The challenge
  • Preview
  • Links
  • How to run
  • Built with
  • Author

The challenge

Users should be able to:

• 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 (also via drag and drop)
• Hide/show the board sidebar
• Toggle the theme between light/dark modes
• Mobile responsive
• Keep track of any changes via backend

Preview

Links

• Solution URL: Task manager

How to run

• Download bun
• Clone the repo
• Setup a db on turso
• Check .env.example to add the required environment variables to a .env file
• Run bun i to install dependencies
• Run bun db:push to push your schema to the database
• Run bun dev to start the development server
• Open http://localhost:3000 with your browser to see the result.

Built with

• Next.js
• Typescript
• [Tailwind] (https://tailwindcss.com/)
• [TRPC] (https://trpc.io/)
• [Drizzle] (https://orm.drizzle.team/)
• [NextAuth] (https://next-auth.js.org/)
• [Hook Form] (https://react-hook-form.com/)
• [Zod] (https://zod.dev/)

Author

• LinkedIn - Donato Di Zenzo
• Frontend Mentor - @dodiz