Boys & Girls Club Safety

The goal of the project is to hold a web application that can link to the existing web application of the club. The web application should aid the drivers, admin, and club directors in better handling the bus services for the students in the club.

BGC Fall 2020: Header Screenshots

About Project

BGC Fall 2020: About Screenshot

Currently, Boys and Girls Club Metro Atlanta does not have a standardized way to track bus usage across all the clubs. This becomes a problem for the Club directors because they cannot track which students are using or not using the bus service regularly making it difficult to priorities services for kids who need them. Additionally, this is a problem for the Executive team because they cannot use the attendance data to optimize bus routes and keep track of safety incidents across all clubs.

BGCMA Thumbnail

Our Client

Boys & Girls Club of Metro Atlanta

Boys and Girls Club Metro Atlanta (BGCMA) is a huge organization that has over 20+ clubs in the Atlanta area and has been around for more than 80 years. The club helps children in the area by providing them with a safe, positive, and engaging environment and programs that prepare and inspire them to achieve great futures. They have served over 100,000 kids in their lifetime.

Our Process

Product Scope

Client Goals 🥅

The client wants a web application that can link to their existing web application.

End-User Goals âš½

There are three main end-users of the app. 1) Bus driver: the app should allow this user to quickly and accurately verify a student's identity. 2) Club-director: the app should allow this user to view the bus attendance for all students at their club. The app should also allow this user to view the attendance record of a particular student. 3) Club Admins: the app should allow this user to view bus attendance data for students. The app should also allow this user to upload student rosters easily.

Technology 💻

The application is written using the MERN stack, with React/Next.js used for the frontend and mongoose used for the backend. Other libraries/frameworks used are Material UI for styling and bcrypt/jwt for login and user authentication. The codebase itself is organized into client/pages directories containing the frontend files and Next.js API, and a server directory containing mongoose schemas and backend routes. The app is also mobile-friendly, as bus drivers will most likely be using their phone or tablet to access the application.

Design 🖊

As the product was a rollover project, there were already many screens that were designed but not built out. This semester focused more on developing a consistent style for the overall product as well as adding in transition frames between key features. This semester, we focused on adding students to bus routes, which required changing screens designed the previous semester, and the onboarding process, which is crucial for application deployment. We were able to do initial research and begin building wireframes for the onboarding process, but they could use some refinement. Notes from user interviews will be included in project handoff.

Our Solution

Key Features

Select Route

The driver once logged in can access their route for a specific trip.

BGC Safety Fall 2020: Select Route

View History

The club admin and club director can view the attendance history of specific students. This makes it easier for them to priorities routes.

BGC Safety Fall 2020: View History

Upload CSV

The club admin can upload a CSV roster of the students.

BGC Safety Fall 2020: Upload CSV

Our Team

Reflection 💬

Sunny Qi

Sunny Qi

"This semester was very different, but Bits of Good was great, and it helped me stay connected with other students. It was great to get more project experience working with Next.js and web dev, and I loved getting to know my team!"

Sydney Balcom

Sydney Balcom

"I have enjoyed learning more about web development while enacting positive change. This semester has been very rewarding and I have enjoyed getting closer to my teammates!"

Stephanie Yang

Stephanie Yang

"Working on this team was great! The virtual aspect made it a little difficult to keep in touch with team members, but overall I think we did some great work this semester. Excited to see this as a rollover project next semester!"

Tony Zhang

Tony Zhang

"Working on BGC-Safety as engineering manager has been a valuable experience that has helped me both improve my technical coding ability and refine my leadership skills. I'm glad to have contributed to the Boys and Girls Club project while bonding with my teammates through fun events like among us."

Neha Rao

Neha Rao

"Working on this project has been amazing this semester. I gained valuable experience with web app development and got to work with the best team members. I can’t wait to see how the project continues next semester!"

Jonathan Horbund

Jonathan Horbund

"Working on this project has been incredibly rewarding both professionally and personally. I'm happy knowing that the work I'm doing will be implemented by the Boys and Girls Club while I also gain valuable hands-on experience in a development team."

We love BoG; CS 2110, not as much.

"We love BoG; CS 2110, not as much."