Weekly Planner

A modern, interactive weekly timetable/schedule management application built with Next.js, React, TypeScript, and shadcn/ui.

🔗 Repository: https://github.com/RasikhAli/weekly-planner

---

✨ Features

📊 Interactive Timetable View

• Full weekly grid view with hourly time slots
• Visual time blocks for all your activities
• Current time indicator for easy tracking
• Responsive design for all screen sizes

🎨 Activity Categories

Organize your activities into 5 distinct categories:

• 🎓 Academic - Classes, tutorials, labs
• 💪 Health & Fitness - Gym, workouts, sports
• 💼 Work - Job shifts, meetings
• 🏠 Personal - Sleep, personal time
• 👥 Social - Events, gatherings

🌙 Dark Mode Support

• Toggle between light and dark themes
• Persists your preference automatically
• Smooth theme transitions

🌍 Timezone Support

• Sydney timezone as default
• Automatic local timezone detection
• Easy timezone switching

✏️ Full CRUD Operations

• Add new subjects and activities
• Edit existing entries
• Delete unwanted items
• Reset to default schedule

💾 Data Persistence

• Automatic save to localStorage (works on static sites!)
• Export your timetable as JSON
• Import previously exported data
• No account required - data stays on your device

🎯 Smart Features

• Overnight activity handling (e.g., sleep schedules)
• Auto-calculated time range based on activities
• Color-coded categories for quick identification
• Location tracking for each activity

---

🚀 Getting Started

Prerequisites

• Node.js 18+ or Bun
• npm, yarn, or bun package manager

Installation

1. Clone the repository

   git clone https://github.com/RasikhAli/weekly-planner.git
   cd weekly-planner
   

2. Install dependencies

   npm install
   # or
   bun install
   

3. Run the development server

   npm run dev
   # or
   bun dev
   

4. Open your browser Navigate to http://localhost:3000

Testing the Static Build Locally

To test the production build locally before deploying:

# Build the static site
npm run build

# Serve the static files (requires a static server)
npx serve out
# or
npx http-server out

Then open http://localhost:3000 (or the port shown).

Note: All features (add, edit, delete, dark mode) work exactly the same in the static build because everything runs in your browser using localStorage!

---

🚢 Deploying to Render

This application can be easily deployed to Render as a Static Site - completely free with no cold starts!

Why Static Site?

This app is fully client-side and uses localStorage for data persistence, making it perfect for static hosting:

• ✅ Free hosting on Render
• ✅ No cold starts - instant loading
• ✅ Global CDN for fast delivery
• ✅ No server maintenance required
• ✅ Fully editable - all features work in the browser!

How Does Editing Work on a Static Site?

Great question! The app is fully editable even when deployed as a static site because:

1. localStorage: All your timetable data is stored in your browser's localStorage
2. Client-side JavaScript: All add/edit/delete operations run in your browser
3. No backend needed: The server only delivers static files; your browser does all the work

What this means for you:

• ✏️ Add, edit, and delete activities - works perfectly!
• 🌙 Dark mode toggle - persists between sessions
• 📤 Export/Import data - full functionality
• ⚠️ Note: Data is stored per-device/browser. Clearing browser data will reset your timetable.

Prerequisites for Deployment

1. A Render account
2. Your code pushed to a GitHub repository

Deployment Steps

Option 1: Using Render Dashboard (Recommended)

1. Push your code to GitHub

   git add .
   git commit -m "Prepare for deployment"
   git push origin main
   

2. Create a new Static Site on Render

   • Go to Render Dashboard
   • Click "New +" → "Static Site"
   • Connect your GitHub repository
   • Select the weekly-planner repository

3. Configure the Static Site

   | Setting | Value | |---------|-------| | Name | weekly-planner (or your preferred name) | | Region | Choose closest to your users | | Branch | main | | Root Directory | Leave empty | | Build Command | npm install && npm run build | | Publish Directory | out |

4. Deploy

   • Click "Create Static Site"
   • Render will automatically build and deploy your app
   • Wait for the deployment to complete (usually 1-2 minutes)

5. Access Your App

   • Once deployed, your app will be available at:
     • https://your-app-name.onrender.com

Option 2: Using render.yaml (Infrastructure as Code)

1. Create a render.yaml file in your project root:

   services:
     - type: web
       name: weekly-planner
       env: static
       region: oregon # or your preferred region
       branch: main
       buildCommand: npm install && npm run build
       staticPublishPath: out
   

2. Push to GitHub

   git add render.yaml
   git commit -m "Add Render configuration"
   git push origin main
   

3. Create Blueprint on Render

   • Go to Render Dashboard
   • Click "New +" → "Blueprint"
   • Connect your repository
   • Render will detect the render.yaml and create the service

Important Notes for Render Deployment

1. Static Export: The app is configured with output: "export" in next.config.ts for static site generation.

2. No Server Required: All data is stored in the browser's localStorage - no database or backend needed.

3. Custom Domains: You can add a custom domain in Render's settings for a professional URL.

4. Auto Deploy: Render automatically redeploys when you push changes to your repository.

Troubleshooting

| Issue | Solution | |-------|----------| | Build fails | Check build logs for errors; ensure all dependencies are in package.json | | 404 errors | Ensure output: 'export' is set in next.config.ts and publish directory is out | | Blank page | Check browser console for errors; ensure JavaScript is enabled | | Data not persisting | localStorage works only on HTTPS; ensure you're accessing via https:// |

---

🛠️ Tech Stack

| Technology | Purpose | |------------|---------| | Next.js 16 | React framework with App Router | | React 19 | UI library | | TypeScript | Type safety | | Tailwind CSS 4 | Styling | | shadcn/ui | UI components | | Zustand | State management | | date-fns | Date utilities | | Lucide React | Icons |

---

📁 Project Structure

weekly-planner/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── page.tsx           # Main page component
│   │   ├── layout.tsx         # Root layout
│   │   ├── globals.css        # Global styles
│   │   └── api/               # API routes
│   ├── components/
│   │   ├── Timetable.tsx      # Main timetable grid
│   │   ├── ClassCard.tsx      # Activity card component
│   │   ├── EditModal.tsx      # Edit/Add modal
│   │   └── ui/                # shadcn/ui components
│   ├── hooks/
│   │   ├── useTimetable.ts    # Timetable state hook
│   │   └── use-toast.ts       # Toast notifications
│   └── lib/
│       ├── timetable-data.ts  # Data types & defaults
│       ├── timetable-config.ts # Configuration
│       ├── timezone-utils.ts  # Timezone helpers
│       └── data-persistence.ts # Import/Export logic
├── public/                     # Static assets
├── package.json
├── tailwind.config.ts
└── tsconfig.json

---

⚙️ Configuration

The application can be configured via src/lib/timetable-config.ts:

{
  timezone: {
    defaultMode: 'sydney',      // 'sydney' or 'local'
    sydneyTimezone: 'Australia/Sydney'
  },
  display: {
    use12HourFormat: true,      // 12h or 24h time format
    hourHeight: 80,             // Grid hour height in pixels
    showCurrentTimeIndicator: true,
    showTodayLabel: true
  },
  timeRange: {
    defaultStartHour: 8,
    defaultEndHour: 18,
    autoCalculateRange: true    // Adjust based on activities
  },
  storage: {
    storageKey: 'timetable-data',
    autoSave: true
  }
}

---

📖 Usage

Adding a New Activity

1. Click the "+" button in the header
2. Fill in the activity details:
   • Subject name
   • Activity type (Tutorial, Lab, etc.)
   • Day and time
   • Location
   • Category
3. Click Save

Editing an Activity

1. Toggle Edit Mode using the edit button
2. Click on any activity card
3. Modify the details in the modal
4. Click Save Changes

Deleting an Activity

1. Enable Edit Mode
2. Click the delete icon on the activity card
3. Confirm the deletion

Exporting Data

1. Click the Download icon
2. A JSON file will be downloaded with your timetable data

Importing Data

1. Click the Upload icon
2. Select a previously exported JSON file
3. Your timetable will be updated

---

🎨 Customization

Adding New Categories

Edit src/lib/timetable-data.ts:

export const ACTIVITY_CATEGORIES: ActivityCategoryInfo[] = [
  {
    id: 'your-category',
    label: 'Your Category',
    icon: 'IconName',
    defaultColors: ['#color1', '#color2']
  },
  // ... existing categories
];

Changing Default Schedule

Modify the defaultTimetableData object in src/lib/timetable-data.ts to set your default weekly schedule.

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• shadcn/ui for the beautiful UI components
• Lucide for the icon set
• Tailwind CSS for the utility-first CSS framework

---

📧 Contact

Rasikh Ali - GitHub

Project Link: https://github.com/RasikhAli/weekly-planner

---