StudySync Tasks — Cloud-Based Task Management System

A Cloud Computing Course Project (CS335)

StudySync Tasks is a cloud-hosted task management web application built using Vite + React and powered by Firebase (Authentication, Firestore, and Hosting). The system enables students to create and join courses using a unique join code, collaborate with classmates, and manage tasks with real-time synchronization across all devices.

Deployed on Firebase Hosting: https://studysynctasks.web.app

🚀 Features

🔐 User Authentication

• Register with email, password, and display name
• Login & logout
• Email verification (required before accessing the dashboard)
• Forgot Password (bonus requirement)
• Profile page for editing display name
• Resend verification email

📚 Course Groups

• Create a course with:

  • Course name
  • Instructor name
  • Auto-generated 6-character join code

• Join a course by entering a valid join code

• Courses show:

  • Instructor
  • Members list
  • Assigned tasks

✅ Task Management (CRUD)

Each task includes:

• Title (required)
• Description (optional)
• Due Date (optional)
• Priority (Low / Medium / High)
• Assigned user
• Status: pending or completed

Supported actions:

• Create tasks
• Update tasks (including toggling status)
• Delete tasks
• Real-time task synchronization (via Firestore onSnapshot)

Filtering features:

• Filter by status
• Filter by priority
• Filter by assignee
• Sort tasks by due date

📊 Dashboard

• Counts:

  • Total tasks
  • Completed tasks
  • Pending tasks

• Real-time updates

• List of courses the user belongs to

🏗️ Tech Stack

Frontend

• React + Vite
• Context API for global authentication state
• React Router for navigation

Backend (Serverless)

• Firebase Authentication

• Firestore (NoSQL) for:

  • Users
  • Courses
  • Tasks

Deployment

• Firebase Hosting

• Production build generated with:

  npm run build

• Deployment:

  firebase deploy --only hosting

📁 Project Structure

studysync-tasks/
│
├── src/
│   ├── auth/           # Authentication context + logic
│   ├── components/     # Shared UI components
│   ├── pages/          # App pages (Login, Register, Dashboard, CourseView, Profile)
│   ├── firebase.js     # Firebase configuration
│   ├── App.jsx         # App routing
│   └── main.jsx        # Entry point
│
├── public/
├── index.html
├── firebase.json        # Firebase Hosting config
├── .firebaserc
├── package.json
└── vite.config.js

🛠️ Installation & Development

1. Clone the repository

git clone https://github.com/<your-repo>/studysync-tasks.git
cd studysync-tasks

2. Install dependencies

npm install

3. Firebase Setup

Create a Firebase project and enable:

• Authentication (Email/Password)
• Firestore Database

Add your config to firebase.js.

4. Run locally

npm run dev

🚀 Deploy to Firebase

Generate build

npm run build

Deploy

firebase deploy --only hosting

🧑‍💻 Team Members

• Latifa Hassan Altuwairqi
• Nouf Turki Alnagaidan
• Raghad Sultan Alshanar
• Sarah Othman Alkherayef

Course

CS335 — Cloud Computing Imam Muhammad ibn Saud Islamic University (IMSIU)

📄 License

This project is for educational purposes only.