PWAEd Tech
Project Overview
Summary
An educational platform connecting teachers, students, and parents to support a student-centered learning experience.
Provides a unified workflow covering material distribution, assignment creation, PDF annotation, submission, grading, and progress tracking.
Background
Educational settings currently suffer from fragmented tools and paper-based processes for distributing materials, submitting assignments, providing feedback, and sharing learning status. Consequently:
- Teachers struggle to continuously monitor individual student progress.
- Students lack a consistent way to manage assignments, feedback, and learning records.
- Parents have limited opportunities to stay updated on daily progress.
Additionally, a mechanism was required to enable learning even in unstable network environments, such as during home study or while commuting.
Goal
To improve communication among teachers, students, and parents, and to provide an environment where students can focus on learning.
- Offering optimized user experiences tailored to each role.
- Realizing a seamless learning flow from the classroom to home.
- Integrating materials, assignments, submissions, grading, and progress tracking into a single platform.
Solution
Locus provides an optimized experience for each user:
- Teacher: Focuses on desktop to create materials, manage assignments, and review submissions.
- Student: Focuses on tablets for viewing materials, PDF annotation, and assignment submission.
- Parent: Focuses on mobile to monitor learning progress and evaluations.
To ensure learning remains uninterrupted by location or network conditions, a Local-first architecture was adopted.
Materials are cached on devices beforehand, allowing for continued annotation and submission in offline environments, followed by automatic synchronization upon reconnection.
Core Value - Student-Centered Learning Experience
Summary
Providing a seamless workflow from material viewing and assignment creation to submission and feedback, centered on the student learning experience.
Key Points
- Enabling a natural learning experience through direct annotation and writing on PDF materials.
- Designing a continuous workflow from assignment submission to teacher grading and feedback.
- Delivering a simple user experience that allows students to focus on learning.
Core Value - Connected Education Workflow
Summary
Providing experiences tailored to the respective roles of teachers, students, and parents, and integrating information related to learning within a single platform.
Key Points
- Teacher: Material creation, assignment management, submission review, and grading.
- Student: Material viewing, annotation, and assignment submission.
- Parent: Monitoring learning progress and evaluation status.
Core Value - Local-first Learning Continuity
Summary
Providing a mechanism for students to continue learning regardless of network conditions.
Key Points
- Preparing materials at school and enabling work in offline environments like home.
- Retaining local changes and performing automatic synchronization upon reconnection.
- Designing a workflow that does not interrupt learning, even in unstable network environments.
Core Value - Reliable Data & Workflow Management
Summary
Designing permission management and workflow control to maintain the accuracy and security of educational data.
Key Points
- Ensuring appropriate data access via Role-based access control (RBAC).
- Designing workflows to clearly manage submission status.
- Implementing mechanisms to guarantee data integrity on the server side.
Key Features - Teacher Assignment & Feedback Workflow
Notes Overview
A management workflow that allows teachers to create materials and assignments, and to review and evaluate student submissions.
Highlights
- Managing the entire process from material/assignment creation to evaluation in a single flow.
- Clearly tracking submission status.
- Continuously recording feedback provided to students.
Key Features - Student Learning Workspace
Overview
A learning environment where students can view materials and work on assignments while adding annotations directly onto PDFs.
Highlights
- A natural experience for direct writing and editing on PDF materials.
- Managing learning content and submissions by assignment.
- An intuitive UI designed primarily for tablet interaction.
Key Features - Parent Learning Progress Dashboard
Overview
A dashboard enabling parents to monitor their child's learning status and progress.
Highlights
- A dashboard to check learning status at a glance.
- Visualization of submission status and evaluation information.
- Display design optimized for mobile use.
Key Features - Offline Assignment Experience
Overview
An offline learning experience that allows students to continue working on assignments regardless of network conditions.
Highlights
- Making pre-prepared materials available offline.
- Retaining changes made during offline sessions.
- Synchronizing learning data automatically upon network reconnection.
Technical Design - Core Logic
Overview
Core logic for securely retaining student learning data in a Local-first environment and synchronizing it with the server upon reconnection.
Design
- IndexedDB as the source of truth for local data.
- Storing user-driven changes in a synchronization queue.
- SyncProcessor managing synchronization via a Pull-then-Push flow.
Decision
Adopting a design that allows students to continue learning offline, independent of network status. Data integrity is maintained by decoupling the UI from direct server data fetching and centralizing synchronization management.
Implementation
- Dexie.js for managing local IndexedDB databases.
- syncQueue for the persistence of change operations.
- SyncProcessor for managing the synchronization lifecycle.
- Retry/Failure handling for synchronization recovery.
Technical Design - System Architecture
Overview
System architecture separating Frontend, API, and Database to support distinct experiences for teachers, students, parents, and administrators.
Design
- Separation of Web application, API layer, and data layer.
- Shared domain logic for educational workflows.
- Scalable configuration for Cloud environments.
Decision
Adopting a decoupled architecture by responsibility rather than a monolithic application to accommodate feature expansion and role scaling.
Implementation
- React + Vite for Student/Teacher web applications.
- Hono on Cloudflare Workers for the API layer.
- Supabase Auth / PostgreSQL / Storage for backend infrastructure.
- Monorepo structure for Web, API, and Admin management.
Technical Design - Data Model
Overview
Data design to consistently manage materials, assignments, submissions, and evaluation information as an educational workflow.
Design
- Assignment-centric data model for materials and submissions.
- State management via Submission State Machine.
- Decoupled management of document metadata and PDF binary data.
Decision
Preventing inconsistencies by centralizing submission state and privilege logic within the data model rather than distributing them across screens. Offloading large PDF files from standard sync data to ensure efficient offline usage.
Implementation
- PostgreSQL relational schema.
- State control via Submission transition function.
- Audit log management via submission_events.
- Local cache model via IndexedDB schema.
Technical Design - Security
Overview
Implementation of multi-layered security for authentication, authorization, and data access control to ensure the safety of educational data.
Design
- User identification via Authentication.
- Privilege control through Role-Based Access Control (RBAC).
- Data protection via Database-level security.
Decision
Adopting a design that guarantees final access permissions at the API and database levels, rather than relying solely on client-side display control.
Implementation
- Supabase Auth as the authentication foundation.
- JWT validation for API authorization.
- PostgreSQL Row Level Security (RLS) for data access control.
- Hono middleware for role validation.
Development Process
Overall Rationale
Locus was designed around a Local-first education experience.
The technology stack separates local user experience from server-side data integrity.
IndexedDB provides offline capability on the client, while Supabase PostgreSQL manages authoritative data and security.
Cloudflare Workers enables lightweight API deployment close to users, and React-based architecture supports multiple role-specific experiences.
Technology Decisions
- React + TypeScript
Selected for building a scalable component-based UI with strong type safety.
- Dexie + IndexedDB
Selected to provide local persistence required for offline learning scenarios.
- Hono + Cloudflare Workers
Selected for lightweight API development and edge deployment.
- Supabase
Selected for integrated authentication, PostgreSQL, storage, and RLS security.
Roadmap / Future Work
Current MVP
Implemented a complete education workflow:
- Student: PDF annotation, assignment submission, offline learning
- Teacher: Assignment creation, grading, feedback
- Parent: Learning progress dashboard
- Platform: Authentication, authorization, synchronization system
Next Step
Focus on improving reliability and user experience:
- More offline workflow testing
- Improved sync status visibility
- Better cache management
Future Vision
Expand Locus from an assignment platform into a connected learning environment:
- Richer teacher-student communication
- Advanced learning analytics
- Scalable school management
Technical Debt
- Improve offline status feedback
- Expand automated test coverage
- Optimize cache strategy
