Arisa Nakai

Sync’d Study

A peer-led study session platform for UH Mānoa students

Project Overview

Before this class, I had no idea how to design a decent-looking web app from scratch. But after learning how to use UI frameworks like React and Bootstrap, I realized that building clean, user-friendly interfaces is actually manageable—and even fun. I got to put all those skills into action during our final project: Sync’d Study.

Sync’d Study is a full-stack web application that helps students at UH Mānoa organize and join peer-led, in-person study sessions. The idea was to create a platform where students could support each other by hosting or joining sessions based on the courses they’re taking. Users can sign up as a sensei (helper), a grasshopper (learner), or both, and the app matches them with relevant study sessions.

My team and I designed the app to feel welcoming and easy to navigate, especially on the main Study Sessions page, where users can browse upcoming sessions on a calendar, see the ones they’ve created under My Sessions, and view open invites under Session Invites. I focused on making this page as clean and intuitive as possible—asking myself, If I were a student using this, would I know where to go? Would this layout make sense?

Using React and Bootstrap, I built out the calendar view and structured the two-column layout for session cards. Each session is displayed in a consistent format with easy-to-click buttons and rounded styling to make everything feel approachable. Designing this page taught me that good UI isn’t just about how things look—it’s about how clearly they communicate to the user.

My Role & Contributions

Working on Sync’d Study was a true team effort, and I played a central role in shaping the user experience and visual design of the application. Early on, I collaborated with my teammates to brainstorm features and plan the layout of key pages like the Study Sessions calendar and the profile page. I helped sketch and create mockup designs to visualize the user flow before development started.

Throughout the project, I focused on building an interface that felt natural for students to use. I implemented the Study Sessions page layout, including the calendar component and the two-column My Sessions and Session Invites sections. I also worked on the sign-up flow, created the profile editing modal with avatar upload, and helped debug issues with session joining, deleting, and syncing logic. This experience really showed me how design, communication, and frontend development all come together in a real-world project.

Technologies & Tools Used

Preview of Sync’d Study

Calendar View Profile Editor Modal To-do List and Invites

Lessons Learned & Skills Gained

This project helped me grow as both a designer and developer. I learned how to break large goals into manageable tasks, collaborate through GitHub, and write frontend code that connects smoothly with backend services.

Working on Sync’d Study also taught me the importance of thinking like a user. I kept asking: If I were a student using this, would it feel intuitive? Would it be helpful? These questions guided my design decisions throughout. I became much more confident with Supabase integration, React state management, and working within a real team with shared responsibilities and deadlines.

Tech Stack

🔗 Live Application
🔗 GitHub Organization
🔗 Project Home Page