Notion Work Scheduler

A beautiful and intuitive time tracking application that integrates with Notion to help you log and visualize your work hours. Perfect for freelancers, remote workers, and anyone who wants to keep track of their productivity.

✨ Features

📅 Calendar View: Visual calendar showing logged hours for each day
📊 Week View: Detailed weekly breakdown with daily summaries
📈 Statistics: Comprehensive analytics with project breakdowns and trends
🔄 Notion Integration: Seamlessly sync your time entries to a Notion database
💾 Local Storage: Your data is saved locally even without Notion setup
📱 Responsive Design: Works beautifully on desktop, tablet, and mobile
🎨 Modern UI: Clean, professional interface built with Tailwind CSS

🚀 Quick Start

Prerequisites

Node.js 18+
npm or yarn
A Notion account (for integration)

Installation

Clone or download the project

git clone <repository-url>
cd notion-work-scheduler

Install dependencies
```
npm install
```
Start the development servers

In one terminal (frontend):
```
npm run dev
```
In another terminal (backend):
```
npm start
```
Open your browser Navigate to http://localhost:3000

🔧 Notion Setup

To sync your time entries with Notion:

1. Create a Notion Integration

Go to Notion Integrations
Click "New integration"
Give it a name (e.g., "Work Scheduler")
Copy the "Internal Integration Token"

2. Create a Database

Create a new database in Notion with these columns:

Column Name	Type	Required
Project	Title	✅
Description	Text	✅
Date	Date	✅
Hours	Number	✅
Start Time	Text	❌
End Time	Text	❌

3. Share Database with Integration

Open your database in Notion
Click "Share" in the top right
Add your integration by name
Copy the database ID from the URL

4. Configure in App

Go to the "Notion Setup" tab in the app
Enter your API token and database ID
Click "Test Connection"
Start logging time! 🎉

📊 Usage

Logging Time

Click the "Log Time" button
Fill in:
- Project: What you're working on
- Description: Details about the work
- Hours: Time spent (supports decimals like 2.5)
- Start/End Time: Optional time range
Click "Save Entry"

Viewing Data

Calendar: See daily totals and click dates for details
Week View: Detailed weekly breakdown with summaries
Statistics: Monthly comparisons, project breakdowns, and trends

Syncing with Notion

Once configured, all new time entries automatically sync to your Notion database. You can also view and edit entries directly in Notion.

🏗️ Project Structure

notion-work-scheduler/
├── src/
│   ├── components/          # React components
│   │   ├── TimeEntryForm.jsx
│   │   ├── WeekView.jsx
│   │   ├── Stats.jsx
│   │   └── NotionSetup.jsx
│   ├── App.jsx             # Main application
│   ├── main.jsx            # React entry point
│   └── index.css           # Global styles
├── server.js               # Express backend
├── package.json
└── README.md

🛠️ Development

Frontend (Vite + React)

Built with React 18 and Vite for fast development
Styled with Tailwind CSS for modern UI
Uses date-fns for date manipulation
Local storage for data persistence

Backend (Express + Node.js)

Express server for Notion API integration
CORS enabled for local development
Error handling for Notion API edge cases
RESTful API design

Key Dependencies

@notionhq/client: Official Notion API client
react-calendar: Beautiful calendar component
date-fns: Modern date utility library
lucide-react: Beautiful icon library
tailwindcss: Utility-first CSS framework

🔒 Privacy & Security

Local Storage: All data is stored locally in your browser
No Analytics: We don't track your usage or data
Secure API: Your Notion tokens are only used for direct API calls
Open Source: Full source code is available for inspection

🚀 Deployment

Frontend (Vercel/Netlify)

Build the frontend:
```
npm run build
```
Deploy the dist folder to your hosting platform

Backend (Railway/Heroku)

Deploy server.js to your backend platform
Set environment variables:
- PORT: Server port (default: 3001)
- NODE_ENV: production

Environment Variables

Create a .env file for local development:

PORT=3001
NODE_ENV=development

📝 API Endpoints

POST /api/notion/test - Test Notion connection
POST /api/notion/entries - Add time entry to Notion
POST /api/notion/entries/sync - Sync entries from Notion
GET /api/health - Health check

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

📄 License

MIT License - feel free to use this project for personal or commercial purposes.

❓ Support

Having issues? Check these common solutions:

"Database not found"

Ensure the database ID is correct
Make sure you've shared the database with your integration

"Invalid API token"

Verify your integration token is correct
Check that the integration has access to the workspace

"Missing required properties"

Ensure your database has all required columns
Column names must match exactly (case-sensitive)

🎯 Roadmap

Time tracking with start/stop functionality
Export data to CSV/PDF
Multiple workspace support
Mobile app (React Native)
Advanced reporting features
Team collaboration features

Built with ❤️ using React, Node.js, and the Notion API

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
public		public
src		src
.gitignore		.gitignore
Procfile		Procfile
README.md		README.md
deploy.md		deploy.md
index.html		index.html
package-backend.json		package-backend.json
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
railway.json		railway.json
server.js		server.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json
vite.config.js		vite.config.js

jsphellis/notion-work-scheduler

Folders and files

Latest commit

History

Repository files navigation