DreamSync

💤 A web application designed to help users coordinate VR sleep schedules with friends, visualize overlaps, schedule joint sessions, and receive timely notifications, with full timezone support.

Features

• User Authentication: Secure registration and login using JWT. Password reset functionality via email.
• Profile Management: Update username, email, avatar (color/picture), and importantly, timezone (IANA format).
• Weekly Sleep Schedule: Set your typical bedtime and wake-up time individually for each day of the week in your local timezone. Toggle days as active/inactive.
• Timezone Awareness: All schedules and statuses are displayed relative to your selected timezone.
• Friend Management: Search for users, send/receive friend requests, manage your friends list.
• Real-time Sleep Status: See if your friends are currently sleeping, available, or sleeping soon, based on their active weekly schedule and timezone, converted to your local time.
• Overlap Visualization:
  • Weekly Grid: Visual timeline graph showing all selected friends' sleep schedules across the week, relative to your timezone. Highlights overlapping sleep times with color intensity based on participant count. Click overlaps to schedule.
  • Dashboard Overview: Shows the relevant sleep block (tonight's or tomorrow's) for you and friends.
  • Calculated Overlaps: Calculates and highlights the best potential weekly group overlap window among available friends. Shows individual total weekly overlap duration and best daily overlap times with each available friend.
• Session Scheduling:
  • Create specific VR sleep sessions for a given date and time range.
  • Invite friends during creation or add more friends later (creator only).
  • Accept/Decline session invitations.
  • View upcoming sessions.
  • Creators can remove participants and delete sessions.
• Notifications:
  • Push Notifications: Receive browser push notifications for session invitations and upcoming session reminders (requires browser permission and service worker support).
  • Email Notifications: Receive email notifications for session invitations and password resets (requires email configuration on the server and user opt-in via settings).
• Dashboard: Central hub displaying the sleep schedule overview, friends list, key stats (next bedtime/wake time, session counts), and the next upcoming session.
• Responsive Design: Built with Tailwind CSS for usability across different screen sizes.

Tech Stack

• Frontend:
  • React
  • React Router
  • Tailwind CSS
  • Framer Motion (for animations)
  • Axios (for API requests)
  • date-fns & date-fns-tz (for date/time formatting and client-side timezone logic)
  • Service Workers (for push notifications)
• Backend:
  • Node.js
  • Express.js
  • SQLite3 (Database)
  • JWT (jsonwebtoken for authentication)
  • bcrypt (for password hashing)
  • date-fns & date-fns-tz (for server-side date/time/timezone logic)
  • web-push (for sending push notifications)
  • nodemailer (for sending emails)
  • node-schedule (for background session reminder checks)
  • crypto (built-in, for password reset token generation)
  • cors, morgan (Middleware)
  • Multer (for image uploads)
  • Sharp (for image processing)

Getting Started

Prerequisites

For production:

• Docker
• Docker Compose

For development:

• Node.js (v18 or later recommended)
• npm (usually comes with Node.js)

Docker Setup (Recommended)

A Dockerfile and docker-compose.yml are included for containerized deployment.

1. Clone the repository:

   git clone https://git.eidenz.moe/Eidenz/dreamsync
   cd dreamsync
   

2. Build and Run:

   • From the root dreamsync directory:

     docker-compose up -d --build
     

   • This builds the image and starts the container in detached mode. The application will be accessible on the host port mapped in docker-compose.yml (e.g., http://localhost:5000).
   • Volumes are mapped for the database (./db) and uploads (./uploads) to persist data outside the container.

Installation & Setup (manual)

1. Clone the repository:

   git clone https://git.eidenz.moe/Eidenz/dreamsync
   cd dreamsync
   

2. Install All Dependencies:

   • From the root dreamsync directory, run the helper script:

     npm run install-all
     

     This command installs dependencies for the root, server, and client directories.

3. Set up Environment Variables (Backend):

   • Navigate to the server directory: cd server
   • Create a .env file by copying the example: cp ../server-env.txt .env (or manually create .env)
   • Edit the .env file and fill in your details:

     PORT=5000
     JWT_SECRET=your_very_strong_jwt_secret_key_here # Replace with a long random string
     NODE_ENV=development # Or production
     
     # -- Push Notifications (Required for Push) --
     # Generate keys using: npx web-push generate-vapid-keys
     VAPID_PUBLIC_KEY=YOUR_GENERATED_PUBLIC_KEY
     VAPID_PRIVATE_KEY=YOUR_GENERATED_PRIVATE_KEY
     VAPID_SUBJECT=mailto:your_admin_email@example.com # Your contact email
     
     # -- Email Notifications (Required for Email) --
     # Get these from your email provider (e.g., Mailgun, SendGrid, Gmail for dev)
     EMAIL_HOST=smtp.example.com
     EMAIL_PORT=587 # Or 465 for SSL
     EMAIL_USER=your_smtp_username
     EMAIL_PASS=your_smtp_password_or_app_key
     EMAIL_FROM='"DreamSync App" <no-reply@yourdomain.com>' # Email sender display name and address
     
     # -- Application URL (Required for Email Links) --
     # The URL users access your app from (used in password reset/invite emails)
     APP_URL=http://localhost:5000 # For local dev/run (if running server only)
     # APP_URL=http://localhost:5173 # For local dev (if running client dev server separately)
     # APP_URL=https://your-dreamsync-domain.com # For production deployment
     

     • Important: Securely generate JWT_SECRET and VAPID keys. Do not commit your actual secrets.
     • Set NODE_ENV to production for deployment.
     • Configure EMAIL_* variables correctly for email features to work.
     • Set APP_URL to the correct base URL where users access the frontend.

4. Build the Frontend:

   • Navigate to the client directory: cd ../client
   • Run the build command:

     npm run build
     

     This creates an optimized production build in the client/dist folder, which the backend server is configured to serve.

Running the Application

1. Start the Backend Server:

   • Navigate to the server directory: cd ../server
   • Start the server:

     npm start
     

     This command runs node index.js. The server will initialize the database (in server/db/dreamsync.db), configure push/email helpers based on .env, start the scheduler, and begin listening on the specified PORT. It will also serve the static frontend build from client/dist.

2. Access the Application:

   • Open your web browser and navigate to the APP_URL you configured (e.g., http://localhost:5000).

Development Mode (Optional)

If you want to run the frontend and backend separately for development with hot-reloading:

1. Start the Backend (Development):

   • Ensure your server/.env file is configured.
   • In the server directory:

     npm run dev
     

     This uses nodemon to automatically restart the server on file changes.

2. Start the Frontend (Development):

   • In the client directory:

     npm run dev
     

     This starts the React/Vite development server (usually on http://localhost:5173). You'll access the app via this URL during development.
   • Note: The client/vite.config.js includes a proxy setting to forward API requests (/api) to the backend server (assumed to be running on http://localhost:5000). Make sure your backend development server is running on that port or adjust the proxy target in vite.config.js.
   • Set APP_URL in server/.env to http://localhost:5173 (or your client dev server port) if you need email links to work correctly during frontend development.

Usage

1. Register / Login: Use the forms, or the "Forgot Password" link if needed.
2. Set Timezone: Go to Settings and select your correct IANA timezone. This is crucial for accurate display.
3. Set Weekly Schedule: Go to "My Weekly Plan" to define your sleep/wake times for each day and mark active days.
4. Manage Friends: Use the "Manage Friends" page to find users and handle requests.
5. View Schedules:
   • Check the Dashboard for a quick overview.
   • Use the Weekly View for a detailed heatmap of everyone's schedules.
6. Schedule Sessions:
   • Use the Sessions page to see calculated overlaps or schedule manually.
   • Click overlaps on the Weekly View to pre-fill the scheduler.
   • Invite friends during creation or later using the "Invite More" button on a session item.
7. Manage Notifications: Enable/disable browser push alerts and email notifications in Settings.

License

This project is licensed under the MIT License.