Vitosha Tulip is a web application that visualizes tasks from ClickUp in both Kanban and List views. It allows users to select snapshots of tasks by month and year, providing a historical perspective on task management. The app is built with React, styled using Material-UI (MUI), and leverages the ClickUp API to fetch task data.
- Kanban and List Views: Toggle between Kanban and List views to display tasks.
- Snapshot Selector: Select tasks snapshots by month and year.
- Responsive Design: Fully responsive UI using Material-UI (MUI).
- Automated Snapshots: Monthly snapshots of tasks using GitHub Actions.
- Deployment: Automatically deployed to vitosha-tulip.surge.sh.
Check out the live application: https://vitosha-tulip.surge.sh
- Node.js (v14 or higher recommended)
- Yarn package manager
- Git
git clone https://github.com/your-username/vitosha-tulip.git
cd vitosha-tulip
yarn install
Setting Up Environment Variables
Create a .env
file in the root directory and add the following environment variables:
PERSONAL_ACCESS_TOKEN=your_clickup_personal_access_token
CLICKUP_SPACE_ID=your_clickup_space_id
Start the development server
yarn start
Open your browser and navigate to http://localhost:3000 to view the app.
Building the Application
yarn build
The production-ready files are generated in the build directory.
Scripts:
- Start the Development Server:
yarn start
- Build the Application:
yarn build
- Download snapshots from ClickUp:
yarn snapshot
- Test the Application:
yarn test
This script downloads the latest snapshots from ClickUp and saves them in src/data/snapshots.
Environment Variables:
The application relies on certain environment variables for configuration. These variables should be stored securely and not committed to version control.
PERSONAL_ACCESS_TOKEN
: Your ClickUp API token.
CLICKUP_SPACE_ID
: The ID of your ClickUp space.
SURGE_TOKEN
: (For deployment) Your Surge.sh authentication token.
Automated Deployment:
The project includes a GitHub Actions workflow that automates the following tasks:
- Monthly Snapshot and Deploy
- Schedule: Runs on the last day of each month at midnight Eastern European Time.
- Actions:
- Executes the yarn snapshot script to download the latest tasks from ClickUp.
- Builds the application using yarn build.
- Deploys the application to vitosha-tulip.surge.sh.
Setting Up GitHub Actions Secrets:
To enable automated deployment, add the following secrets to your GitHub repository:
- PERSONAL_ACCESS_TOKEN
- CLICKUP_SPACE_ID
- SURGE_TOKEN
Navigate to your repository settings on GitHub:
- Go to Settings > Secrets and variables > Actions.
- Click New repository secret for each secret and add the corresponding values.