Orbit is a student scheduling and collaboration web app built at WeHack26. It allows students to manage their weekly schedule, connect with peers, and compare availability, all in one place.
- Authentication — Sign up and log in with email/password, Google, or Apple
- Personalized Dashboard — See your name, year, and schedule after logging in
- Add People — Search and add peers to your network
- Weekly Calendar — View and manage your classes and activities in a weekly time grid
- Compare Schedules — Find overlapping availability with other students
- Responsive UI — Clean, modern interface built with the color scheme
- React — Frontend UI framework
- TypeScript — Type-safe JavaScript
- Node.js — Backend runtime
- Express.js — REST API server
- MongoDB — NoSQL database
- Mongoose — MongoDB object modeling
- Nebula API — External API integration
- Figma — UI/UX design and prototyping
Make sure you have the following installed:
- Node.js (v18 or higher)
- npm
- MongoDB
-
Clone the repository:
git clone https://github.com/En-Natalie/WeHack26.git cd WeHack26 -
Install frontend dependencies:
cd frontend/client npm install -
Install backend dependencies:
cd ../../backend npm install -
Set up environment variables — create a
.envfile in the backend folder:MONGO_URI=your_mongodb_connection_string PORT=5000
Frontend:
cd frontend/client
npm startOpen your browser to http://localhost:3000
Backend:
cd backend
npm run devServer runs on http://localhost:5000
WeHack26/
├── frontend/
│ └── client/
│ └── src/
│ └── components/
│ ├── LoginForm.tsx
│ ├── SignUpForm.tsx
│ ├── Dashboard.tsx
│ ├── CompareSchedules.tsx
│ ├── navbar.tsx
│ └── WeeklyCalendar.tsx
└── backend/
│ └── src/
│ └── models/
│ └── Course.ts/
│ └── User.ts/
│ └── scripts/
│ └── fetchCourses.ts/
│ └── generateUsers.ts/
│ └── loadCourses.ts/
We split our team of four into two pairs. One pair was responsible primarily for the Figma design and frontend, while the other was responsible primarily for the backend and database.
On the frontend side, the team focused on translating the Figma designs into a polished React and TypeScript interface, building out the login, sign up, and dashboard pages — including a heatmap feature for visualizing schedule availability.
For the backend, the process was one that weaved between collaboration and individual work. The backend team learned about databases together and discussed at length the schema before settling on a final design. One team member focused on connecting the frontend, backend, and database together using HTTP requests and Mongoose.
The most notable challenge was integrating MongoDB into the project. No one on the team had any prior experience working with databases, which meant a steep learning curve on top of an already tight 24-hour timeline. We decided to go for it anyway in the spirit of hackathons.
Another challenge was our divergent visions for the final product. Aligning on what to build — and what to cut — took time and communication that we had to balance against the clock.
- Successfully integrating MongoDB with zero prior database experience
- Building a functional full-stack app in under 24 hours
- Designing and implementing a clean, cohesive UI from Figma mockups to working React components
- Connecting the frontend, backend, and database end-to-end using Express.js and Mongoose
- How to design and implement a MongoDB schema from scratch
- How to connect a React frontend to a Node/Express backend via HTTP requests
"Future plans" became a rueful motto during the 24 or so hours we hacked away at Orbit. There were a multitude of features and improvements we simply did not have the time to get to:
- A live scheduler that can be sent out and populated with immediate times, similar to when2meet
- Support for non-weekly events like concerts (one day) or labs (every other week) and individual dates
- More intuitive course and section selectors
- Better scraping
- A friends feature, allowing quick searchability of whose availability matters to you
- Better account support: signing in with Google, resetting passwords, and storing passwords securely