Skip to content

En-Natalie/WeHack26

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Orbit - WeHack26

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.

Features

  • 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

Built With

  • 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

Getting Started

Prerequisites

Make sure you have the following installed:

  • Node.js (v18 or higher)
  • npm
  • MongoDB

Installation

  1. Clone the repository:

    git clone https://github.com/En-Natalie/WeHack26.git
    cd WeHack26
  2. Install frontend dependencies:

    cd frontend/client
    npm install
  3. Install backend dependencies:

    cd ../../backend
    npm install
  4. Set up environment variables — create a .env file in the backend folder:

    MONGO_URI=your_mongodb_connection_string
    PORT=5000
    

Running the App

Frontend:

cd frontend/client
npm start

Open your browser to http://localhost:3000

Backend:

cd backend
npm run dev

Server runs on http://localhost:5000

Project Structure

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/

How We Built It

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.

Challenges We Ran Into

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.

Accomplishments We're Proud Of

  • 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

What We Learned

  • How to design and implement a MongoDB schema from scratch
  • How to connect a React frontend to a Node/Express backend via HTTP requests

What's Next for Orbit

"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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors