Science-rific Labs

Are you a science teacher who hates that due to COVID-19, you can't conduct science experiments for your students? Well now with Science-rific Labs you can conduct science experiments virtually!

Comment

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.

Use the following link to see the submission video for the CovLab Global II: EduTech hackathon https://www.youtube.com/watch?v=pujqnTwI_kQ&ab_channel=EmmaBarnett

Inspiration

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 and second 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 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