Important Note

When watching the YouTube video please be sure to use the YouTube video player settings to ensure your viewing is in the highest quality. Also the video editor I used added a blurred background to the top and bottom of the video and I apologize if that is confusing or distracting.

Important Note For Judges

I am submitting this hack for every track available. I know that due to the storm, the maker of this devpost hackathon has been unable to update all the possible tracks so I am including this here. This is my first hackathon ever so I would like to submit for the "Best Beginner Hack!". I would also like to submit for "Best Hack For Teachers!" as this project was inspired by feedback from teachers and how to help them. I'd also like to submit for "Best Overall Hack!", "Most Creative Hack!", and this one is the only one you can actually choose during submissions but "Best Educational Hack" as well.

Inspiration

When I started this hackathon I went to a couple of teachers and asked them what was the hardest thing about teaching virtually due to COVID-19, and all the science teachers said the hardest thing for them was not being able to do experiments/labs with their class.

What it does

Science-rific Labs allows the user to conduct science experiments virtually!

How I built it

I used HTML, CSS, JavaScript, JSON, React's JSX, the React.js framework and its many default dependencies, and the following additional, installed via npm, Node.js packages: "react-router-dom", "bootsrap-icons", and "bootstrap" & its peer dependencies "jquery", "popper.js", & "@popperjs/core" to write my code. And I used Microsoft Paint to draw my assets.

Challenges I ran into

This was my first time using bootstrap-icons and it was a challenge to figure out at which level it needed to be imported at.

It was also a challenge that Bootstrap is in version 5 as the last time I used Bootstrap it was still in version 4.

Accomplishments that I'm proud of

I'm proud that I've completed my first hackathon! I'm also proud that I was able to do so much all by myself in such a short amount of time. And this may sound silly, but even though the assets look how they do, I'm proud of myself for being able to make that much with just a mouse and Microsoft Paint.

What I learned

I learned it's best to import bootstrap-icons onto the specific page you need the icons on, otherwise it can be slow to load.

I also learned a few of the differences between Bootsrap v4 and Bootstrap v5.

What's next for Hackathon Covlab II 2021: Science-rific Labs

Next, I would like to implement a login system for teachers, and maybe even students, using Passport and MySQL/MongoDB. I would also like to add more CSS to make the application more mobile friendly And maybe reach out to a designer who can make better looking assets. And possibly try my hand at using JavaScript to animate said assets, to try to make the experiments more interactive than just clicking a button. After implementing a login system and making the site more responsive, I'll probably deploy the project to Heroku.

Share this project:

Updates