NightShift

• 

  Stay Awake. Stay Safe. Stay Human

Inspiration- Night shift workers—from nurses and truck drivers to factory staff and security guards—face a silent epidemic of exhaustion, stress, and isolation. We wanted to build something that not only respects their grind but actively supports their well-being in real time. NightShift was born as a love letter to the unseen heroes who work while the world sleeps.

What it does- NightShift is a privacy-first, mobile-optimized Progressive Web App designed for all night workers. It features:

☕ Caffeine Tracker – Monitors intake and predicts energy crashes

🧘 Quick Meditation & Breathing Tools – Helps reset mid-shift stress

📆 Circadian Meal Planner – Suggests optimal meal times

📖 Anonymous Story Sharing – Builds community through shared experiences

🔐 Federated Learning (coming soon) – Learns crash patterns across users without sharing private data

How we built it- The current project is built with a modern, privacy-first web development stack:

Frontend Framework: React – For a modular, component-based UI

Language: TypeScript – For type safety and better developer experience

Build Tool: Vite – Fast cold starts and blazing hot module replacement

Styling: Tailwind CSS – Utility-first design for rapid UI development

Icons: Lucide React – Lightweight, consistent iconography

State Management: React Hooks + custom hooks like useCaffeine, useBreathing, useProStatus, and useLocalStorage

Client Data Persistence: Uses localStorage to preserve user sessions without server-side dependencies

Project Structure:

src/components/: UI modules like CaffeineTracker and Header

src/hooks/: Custom logic for app behavior

src/types/: Shared TypeScript types

App.tsx: Master component orchestrating the experience

Deployment: Netlify + netlify.toml for CI/CD and edge function compatibility

Code Quality: ESLint with TypeScript + React plugins ensures clean, scalable code

Challenges we ran into- Balancing privacy with pattern recognition: Implementing federated learning on mobile using TensorFlow.js without degrading performance was a key challenge.

Making it feel lovable, not just viable: Designing a user experience that delights exhausted night workers under tight time constraints took careful iteration.

Circadian UX design: Optimizing UI for 3 AM eyes is different than building for 3 PM.

Accomplishments that we're proud of- Built a lovable MVP in under 7 days that works offline and respects user privacy

Designed a UX that feels warm, personal, and low-friction for fatigued users

Created a scalable architecture that can grow across professions (nurses → truckers → factory workers)

Integrated a real crash prediction pipeline and launched with future-proof hooks for federated learning

What we learned- Federated learning is powerful, but needs thoughtful device-aware syncing to work in the real world

Healthcare-adjacent apps must be emotionally aware, not just functionally correct

Night workers value autonomy and anonymity—our PWA model supports both without compromise

What's next for NightShift-- 🔐 Launch full federated learning implementation using TensorFlow.js + Netlify Edge Functions

🩺 Partner with hospitals, logistics companies, and unions for pilots

📱 Expand cross-profession customization for truckers, factory workers, and emergency responders

💬 Add AI-guided chat and crowd-sourced hacks to survive the night shift with humor and grace

🌍 Translate NightShift into Spanish, Tagalog, and other languages common among shift workers

Built With

• and-edge-function-support-localstorage-?-lightweight-client-side-data-persistence-eslint-?-code-linting-and-quality-enforcement-progressive-web-app-(pwa)-?-offline-support
• hosting
• mobile-first
• react-?-component-based-ui-framework-typescript-?-strongly-typed-javascript-for-safer-code-vite-?-lightning-fast-build-tool-and-dev-server-tailwind-css-?-utility-first-css-framework-for-rapid-styling-lucide-react-?-icon-library-for-consistent
• scalable-svgs-supabase-?-backend-as-a-service-for-auth-and-real-time-data-tensorflow.js-?-client-side-federated-learning-and-crash-prediction-netlify-?-ci/cd