Bootspot (WIP)

The following project was created during my pursuit of certification at The Northwestern Coding Bootcamp.

Dashboard | Bootspot

Dashboard | Bootspot

Dashboard Notifications | Bootspot

Homework View | Bootspot

Sessions View | Bootspot

Landing Page | Bootspot

Homework States | Bootspot

Attendance States | Bootpsot


Bootspot was the third and final project in pursuit of my Full-Stack Certification at Northwestern University. During the final weeks of the class, the powers that be decided to revamp a pretty dated UI for the previous iteration of the Bootcamp portal (where you tracked grades and attendance) with a refresh. The refresh had a pretty serious learning curve: lots of clicks to get to places and find stuff like grades and attendance, as well as the Career and Homework sections were broke out in their own vertical and hard to find.

Our solution was to create a new UI for the Bootcamp portal called "Bootspot", that addressed the amount of clicks, and put your class attendance and grade average front and center.

The flow of the app goes as such:

  • Login and landing.
  • Dashboard.
  • Sessions (Class material).
  • Grades.
  • Attendance
  • Alerts.
  • Homework States.
  • Attendance States.

About The App:

  • This is a fullstack web application React and React Bootstrap, pulling sample data to populate.
  • Our nice to have items were Auth0 login, alerts, and a full baked database.
  • The project was divided between three developers, one tasked with front end (me), one with backend, one with Auth0.
  • We had roughly three weeks to complete our idea.

My Role:

  • UX/UI Design: I used Adobe XD to create a rapid wireframe and prototype of the project so my teammates were able to start designing the Front End using Bootstrap as well as begin the design of the Backend as well as I visually declared all of the components as a reference, which I then built out in React.
  • Next I developed the HTML and CSS via components in React.
  • From there I built out a basic page with the cards for Homework, the Session, as well as the school info and attendance marking at the top.

Role: Designer/Front End Developer.

View the Project Progress here.