home page for the application
hand-drawn picture used in the application
self-designed logo by Haohui Bao
hand-drawn chatbot bee used in the application
code structure

🐝 About NewBees 🐝

Bees are very important to the fragile ecosystem we have today. With the world losing 30% of honeybee colonies every year, it would be scary to imagine what would happen if they truly do go extinct! Those little hard workers are responsible for 1/3 of crop pollination!

The world has always been a delicate cycle of give and take, one humans tend to forget about when lost in greed.

Well, for those who care about the environment and have already found their hobby in bee keeping, NewBees is for them! NewBees is a platform that cultivates new beekeeper and spectators alike (in hopes of pulling them to the greener side of the world 🌲)

The aim of NewBees is really to increase awareness to the little bees as well as to contribute to the increase in honeybee colonies around the world! One beekeeper at a time 🐝

Inspiration

“According to all known laws of aviation, there is no way a bee should be able to fly. It's wings are too small to get its fat little body off the ground. The bee, of course, flies anyway, because bees don't care what humans think is impossible.” --- "Bee Movie"

As the team was brainstorming possible project ideas, we came across this website of bees and began a whole conversation of Entomophobia, the fear of insects. Yet despite our fear, we can't deny how insects contributes to a great part of our life, especially bees.

Can you "bee"-lieve in the significance of bees? They provide us with not only sweet honey but also the crop that we eat on a daily basis. Their contributions doesn't just end here. Bees are also part of our entertainment.

I'm not sure about you, but the "Bee Movie" brought us lots of fun back in our environmental science class in high school, especially given the fact that my teacher is a beekeeper himself to help preserve the number of bees. He talked to us about the two hives he's been having as well as how he examines the queens of each hive each day. He also mentioned that as a new beekeeper, he wasn't sure what to feed to the different types of bees; not to mention how panic he was when one of the queens died. As a new beekeeper, my environmental science teacher consulted lots of people within the city. He even went to beekeeper meetups to communicate with other beekeepers, yet that still wasn't enough for him to keep up with the process 😢.

Right now, given the COVID situation, it becomes even harder to find people and organizations to meet up and talk to. So, we came up with the idea of creating a social media for beginner beekeepers where they can communicate with each other, get advise from the internet, as well as learn new concepts.

This way, we will be able to inspire more to stay in the beekeeping process, which in term will help to preserve the bee population. With the world losing 30% of honeybee colonies every year, we really can't slow down our process to protect them as they are responsible for 1/3 of crop pollination! That being said, one beekeeper at a time! 🐝

What it does

NewBees is a web application intended specifically for newbies in beekeeping. It allows users to register and log in, to make posting such as questions regarding the process, to share images of the beekeeping process, to ask a chatBot about beekeeping terminologies, and to participate in a competition on beekeeping knowledges through daily quizzes.

How we built it

We used canva for our wireframe design, programmed in React, Node, and MongoDB for the creating the web application, and employed react-chatbot-kit to create the chatbot. As with the data on bee terminologies, we utilized data from BetterBee.

In addition, all of the bee images we used in this project are designed by our friend Haohui Bao. Here are just some of the collections:

This is an image of our chatbot bee representative. He will be willing to help you out with all the questions you have! Image of chatBot bee representative

Here is an image of our bees resting from work, having a cute picnic. 😍😍 Image of bee picnic

Here is the structure of our code:

Image of code structure

We had multiple features such as chatbot, feeds, and register/login. For each of the features, we had multiple sub-components as well. Such as the feed and post-message components within the feed feature. We also had a navigation bar which incorporated bootstrap styling.

Challenges we ran into

We are all pretty new to React and have barely used it in the past, thus learning the syntax of it as well as how to render different things in React is a big change for us. In addition to that, we originally wanted to use CockroachDB; however, we weren't completely able to connect it to our front end, so we switched back to one that we are more familiar with, MongoDB.

We wanted to create a chatbot where it can pick up a word that the user highlights in a paragraph and do an auto search on that word. However, we were stuck on how to get React to work with JQuery so that's one of the next steps that we will be doing in the future.

What Samar has to Add🧕🏾

starting with react was a bit challenging to get used after using regular shmegular JS but not hard! looking through reacts documentation to understand what is different helped. I was in charge of the backend of the web application so after creating the registration send REST APIs to the server took a while for me the understand how to do in react. So grateful for the mentors that were around the hackathon willing to help! Without them I would have not be able to get to this stage of the project!

CodeClassifiers code helped me understanding how to link it to the node.js server and from there my previous experience with user forms and MongoDB picked up.

Sadly I was unable to find out why the req.session.loggedin stayed undefined therefore when users login the Nav orginally was supposed to change to one for a logged in user.

Accomplishments that we're proud of

We were able to incorporate a chatbot into our application and we were also able to build a backend on our own from scratch!!

We also really appreciate what the mentors have done to us. They were really patient and helpful when it comes to building the backend since we were all super lost on what to do. We are grateful and at the same time proud of us for taking the initiative to seek for help.

What we learned

We were definitely more comfortable working with React, understanding its structure and idea with components. We also become more competent in terms of working with the backend.

Last but not least, we picked up on some beekeeping terminologies to show off in the future. 😝😝For instance, did you know that "absconding swarm" meant an entire colony of bees that abandons the hive because of disease, wax moth, excessive heat or water, lack of resources, or other reasons and it is a big issue that beekeepers face?

What's next for NewBees

Make our web page responsive
Create the daily quiz feature
Further link the backend with the frontend.
Incorporate more features with the bot such as allowing it to do web-crawling to search for the content the users need