Kanban is a Kanban board application built using Next.js. It provides a user-friendly interface for managing tasks and organizing projects using the Kanban methodology. This readme file provides an overview of the project and its setup instructions.
- Kanban Board: Create boards with customizable columns and cards to manage tasks efficiently.
- User Authentication: Users can create accounts and log in using Google, GitHub, or email (magic link).
- Cloud Database: Utilizes a cloud-hosted database on PlanetScale to store board and user data securely.
- Continuous Integration: Integrates with GitHub Actions for automated testing and deployment.
- Automated Tests: Includes unit tests, Playwright tests for API and UI, and Chromatic tests for visual regression.
- Documentation: Utilizes Storybook to create interactive component documentation for easy reference.
To get started with Kanban, follow these steps:
- Node.js (v14 or higher)
- npm package manager
-
Clone the project repository from GitHub:
git clone https://github.com/jonaszb/kanban-next.git
-
Install the project dependencies:
cd kanban-next npm install
Before running the application, you need to set up the required environment variables. Create a .env
file in the project root directory and add the following variables:
EMAIL_SERVER=smtp-server
SECRET=next-auth-secret
GITHUB_SECRET=github-oauth-secret
GITHUB_ID=github-oauth-id
GOOGLE_CLIENT_ID=google-client-id
GOOGLE_CLIENT_SECRET=google-client-secret
DATABASE_URL=database-url
Replace each placeholder value with your specific configuration. Note that EMAIL_SERVER
refers to the SMTP server used for sending authentication emails.
Kanban uses a cloud-hosted database on PlanetScale. To run the project locally, you will need to create your own database and set the DATABASE_URL
environment variable accordingly. Push the Prisma schema to your database by executing the following command:
npx prisma db push --preview-feature
To start the local development server, run the following command:
npm run dev
Open your web browser and navigate to http://localhost:3000
to access the application.
Kanban utilizes GitHub Actions for continuous integration. When a pull request is created, automated tests are triggered, including unit tests, Playwright tests, and Chromatic tests. Merging the pull request is only allowed if all checks pass. The following environment variables need to be set for this project:
WEBHOOK_ID=webhook-id # Obtained by visiting webhook.site
WEBHOOK_ID_ALT=webhook-id-alt # Obtained by visiting webhook.site
CHROMATIC_PROJECT_TOKEN=project-token # Create a new project on Chromatic to obtain a token
The project is hosted on Vercel, which automatically deploys the application when a pull request is merged into the main branch. The live site can be accessed at https://kanban-next.vercel.app/.
Kanban includes various testing options:
-
Unit Tests: Execute unit tests using the following command:
npm test
-
Playwright Tests: Run Playwright tests for API and UI using the command:
npm run test:e2e
Running Playwright tests locally requires the WEBHOOK_ID and WEBHOOK_ID_ALT environment variables mentioned in Continuous Integration to be set.
-
Chromatic Tests: Chromatic tests for visual regression are executed during the CI process.
Kanban utilizes Storybook to generate component documentation. To view the component documentation locally, run the following command:
npm run storybook
Open your browser and navigate to http://localhost:6006
to access the Storybook
interface.
Kanban relies on several external services, such as authentication providers, SMTP servers, and the cloud-hosted database. To set up these services, refer to their respective documentation:
This project is licensed under the MIT License.
Special thanks to Frontend Mentor for providing the design and to the following technologies and libraries used: