Ecostars

Inspiration

Gazing up at the Missouri night sky, you stare at a bright blue-yellowish expanse instead of a star-studded sky. The stars are lost in light.

Humans have a profound impact on Earth, molding and shaping the land to accommodate such things like skyscrapers, farmland, and beaches. In some ways, the impact is easy to see such as the destruction of the Amazon rainforest but in other ways, it is subtle like light pollution. In our day-to-day lives, there are many small actions that we can take to harm or benefit the environment. While these actions seem inconsequential, Ecostars believes that these daily tasks have a profound influence on the well-being and health of our planet.

Ecostars is both inspired by helping the planet and the notion of figuring out what small actions we can take in our lives to help sustain it. Our goal is for everyone to be able to find an eco-friendly routine and be able to learn more about why their actions matter. By saving water or even changing out a plastic bag for a reusable one, we all can help save the planet and become the change we want to be. We all can be eco stars!

What it does

Ecostars takes sustainability a step further than other websites or apps. Ecostars combines gameplay with daily routine and education to help people adopt sustainable practices to help protect our environment. People are able to interact with house items on the website to complete a daily task such as unplugging their electronics when completely charged or learning more about ways they can save the environment. Ecostars is a comprehensive and engaging platform that is meant to help people adopt sustainable routines and learn more about ways the world can benefit from their actions.

How we built it

The technologies we used to create a full-stack project with react and firebase. React was our front end and we used firebase as the backend. We had three main pages: the home page where users can login or signup, the outside page (where users can see the stars they collected in the night sky), and the inside page (where users can complete tasks). Using the database functionality on firebase, we were able to create users so they could login or signup with a unique username. We also had another database that kept track of the stars each user had. In our code, we made calls to firebase to add to the database (when creating a new user) or update the database (when we needed to increment the number of stars when the user completed a task).

Challenges we ran into

Since we used new technologies, we had trouble at first figuring out how to use react and firebase and how they work together. However, we watched many youtube tutorials and read many articles to familiarize ourselves with it. As we all participate in several different extracurriculars, we also had several schedule conflicts which limited the amount of times we could all meet. However, we made sure to assign roles and update each other through text and zoom.

Accomplishments that we're proud of

We are proud of learning two new technologies: react and firebase to build a full-stack project. This was a new experience for most of us as we don’t have that much background in coding. We also really enjoyed the process of problem solving and figuring out ways to integrate areas of intractability for the website to create an engaging user experience. We were able to work together smoothly and compromise to make a website that we are all proud and excited with completing.

What we learned

Through this project, we learned how to program in react and firebase to build our website and achieve various functions. Most of us have not built a full-stack project so we learned how to self-learn new technologies to make a functional web project. We learned how to use state variables in react to allow us to save the variable values to be used in different functions on a page. We also learned how to create buttons to navigate throughout the website with the onclick function. Additionally, we paid attention to UI/UX design to make a user-friendly website so people of all ages could use our website. We also improved our collaboration and communication skills and assigned everyone a role to the team so everyone can have a part in the project.

What's next for Ecostars

For our next steps, we plan to add a leaderboard feature where users can see the top 5 users who have collected the most eco-stars. Additionally, another feature we plan to implement is adding friends so users can see their friends’ progress and compete with them, encouraging more sustainable acts to be completed. We also plan to expand to have more constellations and design more tasks/games to put on the homepage. To improve the security of our website, we will also allow users to set passwords which will be hashed in the database. Additionally, we plan to implement recaptcha to prevent bots from creating users. Furthermore, we plan to implement a secure way of accessing our users rather than getting the username from the ending of the link.