Better BC Housing

An interactive, user-friendly redesign of Boston College's housing registration system.

Comment

Better BC Housing

Inspiration

Having all experienced the frustration of registration for housing through BC's archaic housing registration system, we felt the need to modernize the system and developed a modern progressive web app version of the registration system.

Primary Issues with the current registration system:

  1. Poor user-friendly design, forcing students to click through multiple pages and drop down menus to navigate through dorms.
  2. Unresponsiveness makes it impossible to register on mobile.
  3. No interactive visuals or graphics to guide students through the process. Lack of clarity.

How we aimed to solve these problems.

By using modern technologies such as React.js and Express.js, we created a snappy, responsive, and interactive web app to ease the frustrations of BC students.

We hope that this web app will encourage Boston College as well as many other colleges to consider upgrading their vital yet obsolete services.

How we built it.

We originally planned a lot more features such as pick times, a review system, and user authentication. But we able to implement the core features of live crowd picking and interactive floor plans.

We used a React.js Frontend and hooked it up to an Express.js server running on Node.js. To store the data allow for saved states and live dorm picking, we connected it a MongoDB database.

Accomplishments:

  • Beautiful and interactive visual interface where students can click on their building and dorm room of choice through a map and floor plans rather than drop-down menus with text.
  • Live Dorm Picking! Hustle up because multiple people can all pick rooms at the same time.
  • User-friendly and responsive design for a smooth registration process. No more scrambling and clicking through pages.
  • Single Page Application: no delay in page changes, snappy experience!

Challenges we faced

The most ambitious feature was the live dorm picking. Since we more familiar on the front end, we have little to no experience in back-end servers and databases. Thankfully some of us had prior experience from CS classes which helped a lot in learning backend. After hours of frustration, we were finally able to connect our interactive floorplan map to the MongoDB and the express.js server.

Things we learned

  • Figuring out React was definitely a pain but worthy investment. React has strict logic and data flow in its library.
  • Being too ambitious at the start was the mistake. We gave up on many features, but thankfully we were able to get core features working.

Please clone the repo and try it out!

Node.js required to run the app.

git clone https://github.com/MikeN64/BBC-Housing.git
cd BBC-Housing
npm install
node server.js

That's it!

Contributors:

Roger Wang Michael Nguyen Anthony Chu

Built With

Share this project:

Updates