BIPOC students often have difficult times connecting with businesses and companies run by people of color from their communities, so Hands-On is our way of allowing students to connect with these people for mentorships, jobs, etc.

What it does

The website, once it's in its fullest functioning form, will allow students to create profiles that employers/entrepreneurs can see and sort through when looking to fill positions, and also sort through employers in their area to get an idea of what kinds of opportunities exist for them.

How we built it

Our team built this website using several different tools. We mainly used HTML and CSS to create the base front-end framework and design. In this website, we also used Bootstrap.JS, the Google Maps API, JQuery, and Data table for the forms, data, and mapping. Our first step after we decided to create a web platform was to make bare-bones HTML files with embedded Bootstrap.JS scripts attached to help with design and creating mobile-responsive pages. We then populated the pages with content - general information about the sites' aims and further resources for our target audience of BIPOC students. The main part of the site was the listing and mapping of the participating businesses, which can be found in the "For Students" page. We were able to obtain the data from a spreadsheet that a local newspaper gathered listing BIPOC-owned businesses. For the mapping, we used the Google Maps API with a new API key. With all of these technologies involved in this process, we were easily able to achieve the Minimally Viable Product for Hands-On.

Challenges we ran into

Throughout the process, our team had many successes and many difficulties. Our first difficulty was in finding a project idea and narrowing down the scope to fit the short time frame. Once we decided on an idea with the help of a mentor, we ran into other challenges. Our main challenge was learning how to make a website since none of us were really full-fledged experts in HTML/CSS/JS. We had to overcome this challenge by helping each other out and providing resources to help us understand some of the concepts. Making the table proved quite difficult, while the mapping seemed unresponsive at first. Along the way, we also had some issues with the CSS code took turns looking for errors.

Accomplishments that we're proud of

Many of our accomplishments stem from running into issues when we were building the website. We are proud to have kept moving forward with the project and seeing that it finish to our best ability despite the countless amount of technical issues and errors when running our code. We are also particularly proud of learning how to implement JavaScript for our website which was built with html code.

What we learned

Through building this website we were able to gain experience of using various applications and tools to collect data and apply it to create resources on our website (this includes graphs and a map). Furthermore, we were able to work on improving our knowledge of writing code in html and css.

What's next for Hands-On

Although our site is currently not fully functional, the next step for this site is to address these issues. These improvements include finding a manner to store the users input into a database and also to have the table of opportunities available for students to automatically update when a new opportunity is submitted

Share this project: