Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/c-w-d-harshit/time-focus
A Next.js-based app combining a customizable Pomodoro timer with an integrated Kanban board for enhanced productivity.
https://github.com/c-w-d-harshit/time-focus
framer-motion nextjs productivity shadcn-ui tailwindcss v0
Last synced: 1 day ago
JSON representation
A Next.js-based app combining a customizable Pomodoro timer with an integrated Kanban board for enhanced productivity.
- Host: GitHub
- URL: https://github.com/c-w-d-harshit/time-focus
- Owner: C-W-D-Harshit
- License: mit
- Created: 2024-12-14T15:25:42.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2025-01-06T03:41:15.000Z (about 1 month ago)
- Last Synced: 2025-01-06T04:26:53.659Z (about 1 month ago)
- Topics: framer-motion, nextjs, productivity, shadcn-ui, tailwindcss, v0
- Language: TypeScript
- Homepage: https://productivity.cleverdeveloper.in/
- Size: 3.43 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pomodoro Task Manager
A modern, feature-rich Pomodoro timer application with an integrated Kanban task board. Built with Next.js, TypeScript, and Tailwind CSS.
## Features
- **Pomodoro Timer**
- Customizable focus and break durations
- Visual progress indicator
- Auto-start option for sessions
- Mini-widget for tracking time while scrolling
- Support for both short and long breaks
- **Kanban Board**
- Drag-and-drop task management
- Three status columns: Not Started, In Progress, and Done
- Persistent storage using localStorage
- Smooth animations and transitions
- Quick task addition and removal
- **User Interface**
- Dark mode by default with system theme support
- Responsive design for all screen sizes
- Clean, modern UI with blur effects
- Geist font family integration
- Framer Motion animations
- **Spotify Integration**
- View currently playing track information
- Control playback (play, pause, skip)
- See album artwork and track progress
- Seamlessly integrate music with your Pomodoro sessions
## Tech Stack
- **Framework**: Next.js 14
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **Animations**: Framer Motion
- **Icons**: Lucide Icons
- **Fonts**: Geist Sans & Geist Mono
## Prerequisites
- Node.js 18.17 or later
- pnpm 8.0 or later
- A Spotify Developer account (for Spotify integration)
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/C-W-D-Harshit/time-focus.git
cd time-focus
```
2. Create and configure environment variables:
```bash
cp .env.example .env.local
```
3. Install dependencies:
```bash
pnpm install
```
4. Run the development server:
```bash
pnpm dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser.
## Environment Variables
Create a `.env.local` file in the root directory with the following variables:
```bash
# Spotify Configuration
SPOTIFY_CLIENT_ID=your_client_id
SPOTIFY_CLIENT_SECRET=your_client_secret
SPOTIFY_REFRESH_TOKEN=your_refresh_token
# Optional: Analytics
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id
```
## Project Structure
```typescript
src/
├── app/
│ ├── layout.tsx # Root layout with theme provider
│ └── page.tsx # Main application page
├── components/
│ ├── ui/ # Reusable UI components
│ ├── kanban/ # Kanban board components
│ │ ├── Board.tsx
│ │ ├── Column.tsx
│ │ └── Task.tsx
│ ├── pomodoro/ # Timer components
│ │ ├── Timer.tsx
│ │ ├── Settings.tsx
│ │ └── MiniWidget.tsx
│ └── spotify/ # Spotify integration components
├── lib/
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ └── constants.ts # Application constants
└── styles/
└── globals.css # Global styles
```
## Contributing
1. Fork the repository
1. Create your feature branch:
```bash
git checkout -b feature/amazing-feature
```
1. Commit your changes:
```bash
git commit -m "feat: add amazing feature"
```
1. Push to the branch:
```bash
git push origin feature/amazing-feature
```
1. Open a Pull Request
### Commit Convention
This project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification:
- `feat:` - New features
- `fix:` - Bug fixes
- `docs:` - Documentation changes
- `style:` - Code style changes
- `refactor:` - Code refactoring
- `test:` - Adding or updating tests
- `chore:` - Maintenance tasks
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- [Next.js](https://nextjs.org/) - The React Framework
- [shadcn/ui](https://ui.shadcn.com/) - UI Components
- [Framer Motion](https://www.framer.com/motion/) - Animation Library
- [Spotify Web API](https://developer.spotify.com/documentation/web-api/) - Music Integration
## Support
If you find this project helpful, please consider giving it a ⭐️ on GitHub!