OneTap Time is a simple yet powerful web application for tracking your time and activities. With a clean, minimalist interface, it helps you stay focused and understand where your time goes. Built with Next.js, React, and ShadCN UI, it's designed for efficiency and ease of use.
- Simple Timer: Start and stop tracking with a single click. The timer displays the elapsed time in a clear, easy-to-read format.
- Activity Naming: Name your activities as you track them for clear record-keeping.
- Customizable Categories: Organize your activities into categories. Each category can have a unique name, color, and a wide selection of icons to choose from.
- Detailed Activity Log: View a chronological list of all your tracked activities. You can easily edit or delete entries directly from the log.
- Today's Summary: A visual summary of your day's activities, complete with a pie chart to show how your time was distributed across different categories.
- Data Portability: Export all your activities and categories to a JSON file for backup, or import them back into the app at any time.
- Collapsible UI: All sections except the main timer are collapsible, allowing you to maintain a clean and focused workspace.
Your data is automatically saved to your browser's local storage. This means all your activities, categories, and even a running timer are preserved between sessions. You can close your browser and come back later to find everything exactly as you left it.
- Start Tracking: Simply press the "Start Timer" button to begin a new activity.
- Name Your Activity: While the timer is running, you can enter a name for your activity in the input field.
- Select a Category: Choose a category from the dropdown menu.
- Manage Categories: Use the "Manage Categories" section to add, edit, or delete categories to suit your needs.
- Stop Tracking: When you're finished, click the "Stop Timer" button. The activity will be automatically saved to your log.
- Review Your Day: Expand the "Activity Log" to see past entries or "Today's Summary" to get a visual breakdown of your time.
- Import/Export: Use the "Data Management" card to save your data to a file or load it from a previous backup.
- Framework: Next.js (with App Router)
- UI Library: React
- Styling: Tailwind CSS
- Components: ShadCN UI
- Icons: Lucide React
To get a local copy up and running, follow these simple steps.
You'll need to have Node.js and npm installed on your machine.
- Node.js (which includes npm)
- Clone the repo
git clone https://github.com/your_username/your_repository.git
- Navigate to the project directory
cd your_repository - Install NPM packages
npm install
- Run the development server
Open http://localhost:9002 to view it in the browser.
npm run dev
A brief overview of the key files and folders in this project:
src/app/: Contains the core pages and layouts for the Next.js application, using the App Router.src/components/: Houses all the React components used to build the UI.src/components/ui/: Contains the ShadCN UI components.
src/context/: Holds the React Context for managing global application state (app-context.tsx).src/lib/: Includes utility functions (utils.ts), type definitions (types.ts), and static data like categories and icons (data.ts).public/: Stores static assets like images and fonts.package.json: Lists the project's dependencies and scripts.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.