Sync() – Personal Task and Collaboration Web App
A centralized web platform for managing personal tasks, collaborating with colleagues, and maintaining customizable user profiles.
Project Preview
Click the image for better qualityProject Overview
Sync() was designed as a productivity-focused platform to help users manage daily tasks, collaborate with teammates via a colleague linking system, and maintain editable user profiles. It features categorized task management (To Do, Work In Progress, Completed), meeting tracking, and interactive modals for user actions. The interface is highly dynamic, prioritizing responsive user feedback and real-time updates.
My Role & Responsibilities
Main Role:
Team LeaderKey Responsibilities/Focus Areas:
Project Manager, Full-stack Developer, Database Administrator
Key Frontend Features
- Fully responsive task board with status-based grouping.
- Modals for add/edit/delete confirmation with animations.
- Editable profile section with preview for name, gender, date of birth, and display photo.
- Dynamic UI updates upon task creation and profile modification.
Key Backend Features
- User registration/login with Firebase Authentication.
- Profile information and image storage using Firestore and Firebase Storage.
- Task data management with real-time syncing per user.
- API routes for colleague linking and base detail retrieval using Firebase Admin SDK.
Challenges & Solutions
Ensuring new display pictures reflected immediately before being saved.
Used URL.createObjectURL() to preview image uploads locally and only committed them to Firebase Storage upon saving.
Avoiding global refreshes on task addition or updates.
Implemented onSnapshot listeners from Firestore for live data syncing without reloading the page.
Preventing colleagues from seeing each other’s data
Filtered all data queries using user.uid and enforced access control rules in both the client and Firestore queries
System Architecture
High-level architecture diagram.