Inspiration
Students often struggle to find the right time to meet with their instructors. Office hours can be difficult to keep track of, and scheduling appointments through emails or messages can become confusing and time-consuming.
We created OfficeFlow to make office hours easier to access, organize, and manage. Our goal was to build one platform where students and instructors can connect without unnecessary back-and-forth communication.
What it does
OfficeFlow is a web application that simplifies office-hour scheduling for students and instructors.
- Students can discover instructors, view available office hours, request appointments, track booking statuses, and cancel appointments.
- Instructors can manage their office-hour availability, review appointment requests, and approve or decline bookings.
- Administrators can review instructor verification requests and manage instructor access.
- Notifications and appointment history help users stay organized and keep track of their interactions.
OfficeFlow brings these features together in one convenient platform.
How we built it
We developed OfficeFlow as a full-stack web application using several technologies:
- React and Vite for the frontend and user interface.
- JavaScript, Node.js, and Express.js for the backend and REST API.
- PostgreSQL for storing user accounts, appointments, office hours, and related information.
- Git and GitHub for version control and managing our source code.
- Vercel for frontend deployment.
- Render for hosting the backend API and PostgreSQL database.
We designed the application around three user roles: student, instructor, and administrator. Each role has its own features and permissions.
Challenges we ran into
One of our biggest challenges was connecting the frontend, backend, and database into a working application.
Managing authentication, user roles, and appointment scheduling required careful coordination between different parts of the system. We also had to design database relationships that could support users, instructor availability, bookings, and notifications.
Deployment introduced additional challenges. We encountered case-sensitive file import errors, frontend routing problems, and difficulties connecting the deployed application to the backend and database.
Working through these issues taught us how different development and production environments can affect an application.
Accomplishments that we're proud of
We're proud of building OfficeFlow from an idea into a full-stack web application with separate experiences for students, instructors, and administrators.
We implemented an appointment management workflow, instructor availability management, role-based functionality, and a database structure supporting the application's core features.
Another major accomplishment was deploying our frontend to Vercel and our backend and database to Render. Although some production integration issues are still being resolved, seeing OfficeFlow accessible online was an important milestone.
What we learned
Building OfficeFlow helped us develop a better understanding of full-stack web development.
We learned how React communicates with an Express backend, how PostgreSQL stores and organizes application data, and how authentication and role-based permissions affect application design.
We also gained practical experience with GitHub, environment variables, cloud deployment, debugging production errors, and troubleshooting differences between local and hosted environments.
Most importantly, we learned that building an application involves more than writing code. Testing, deployment, debugging, and user experience are equally important parts of software development.
What's next for OfficeFlow
Our immediate priority is completing production integration and making sure the entire appointment-booking workflow works reliably on the deployed website.
In the future, we would like to introduce:
- Calendar integration with Google Calendar and Outlook.
- Automated email reminders and appointment notifications.
- More flexible recurring office-hour schedules.
- Improved instructor search and filtering.
- A mobile-friendly experience with additional accessibility improvements.
- Analytics to help instructors understand office-hour demand.
Our long-term vision is to make OfficeFlow a practical scheduling solution that colleges and universities can use to improve access to academic support.
Log in or sign up for Devpost to join the conversation.