Skip to content

README.md

Latest commit

 

History

History
144 lines (105 loc) · 4.04 KB

README.md

File metadata and controls

144 lines (105 loc) · 4.04 KB

⚡ Shift Sync

A retro Windows 99-style shared calendar for syncing work schedules with your crew. Boot into a VGA BIOS screen, log in, and land on a vibrant desktop where everyone's shifts are visible in real time.

Features

  • 🖥️ VGA BIOS boot animation with terminal-style auth
  • 📅 Weekly calendar with color-coded shift blocks per user
  • 👥 Group invite codes — share a code, your crew joins
  • 📷 Screenshot OCR — upload a work schedule image and shifts auto-populate
  • ⚙️ Settings: choose your shift color, pick a desktop theme
  • 🔄 Real-time sync — shifts appear instantly for everyone in the group
  • 8 desktop themes: Vaporwave, Midnight, Forest, Retrowave, Candy, Arctic, Matrix, Sunset

Quick Start

1. Prerequisites

  • Node.js 18+
  • A Supabase account (already configured — see below)

2. Install dependencies

cd shift-sync
npm install

3. Environment variables

The .env file is already populated with your Supabase project credentials. If you ever need to reset it, copy from .env.example.

4. ⚠️ Required Supabase setup — disable email confirmation

Because Shift Sync uses username-only login (no real email), you must disable email confirmation:

  1. Go to supabase.com/dashboard
  2. Open the shift-sync project
  3. Go to Authentication → Settings
  4. Under Email Auth, turn off "Confirm email"
  5. Save

5. Run locally

npm run dev

Open http://localhost:5173

Deploying to Netlify

Option A: Netlify UI (easiest)

  1. Push this folder to a GitHub repo
  2. Go to netlify.com → Add new site → Import from Git
  3. Select your repo
  4. Build command: npm run build
  5. Publish directory: dist
  6. Under Environment variables, add:
    • VITE_SUPABASE_URL = https://pzayxiqsrgnanavmpyyq.supabase.co
    • VITE_SUPABASE_ANON_KEY = (your anon key from .env)
  7. Deploy!

Option B: Netlify CLI

npm install -g netlify-cli
npm run build
netlify deploy --prod --dir=dist

How to Use

First Time

  1. Boot sequence plays automatically
  2. Enter a username of your choice — this creates your account
  3. Enter a password — save it, there's no recovery currently
  4. Choose to Create a crew or Join with a code
  5. If creating: share your 6-character invite code with friends
  6. If joining: paste the code a friend sent you

Adding Shifts

  • Click + Add Shift in the calendar header
  • Manual tab: pick date, start/end time
  • Screenshot OCR tab: upload a photo of your work schedule — Shift Sync extracts the dates and times automatically

Settings

  • Double-click the Settings icon on the desktop
  • Change your shift color (what everyone sees on the calendar)
  • Change the desktop theme

Tech Stack

Layer Tech
Frontend React 18 + Vite
Database & Auth Supabase (PostgreSQL + Row Level Security)
OCR Tesseract.js (runs in browser, no API key needed)
Hosting Netlify

Project Structure

src/
  App.jsx                 # Session check, phase routing
  components/
    BootScreen.jsx        # VGA BIOS animation + auth + group flow
    Desktop.jsx           # Windows 99-style desktop shell
    Window.jsx            # Draggable window component
    Taskbar.jsx           # Bottom taskbar with clock
    DesktopIcon.jsx       # Desktop icons
    CalendarWindow.jsx    # Weekly calendar with shift blocks
    SettingsWindow.jsx    # Color picker + theme presets
    ShiftEntryModal.jsx   # Manual entry + OCR upload
  lib/
    supabase.js           # All Supabase auth + data helpers
    ocr.js                # Tesseract.js OCR + schedule parser

Database Schema

Table Purpose
profiles Username, shift color, theme preference
groups Crew name + invite code
group_members Who's in which crew
shifts Individual shift entries per user per day

All tables use Row Level Security — users can only see data for their own crew.