The Problem Statement
The problem statement for this hackathon was just to develop anything that helps to create a sustainable environment, as easy as it sounds it is also a very wide topic. I registered for this hackathon with a group of three people Nathan, Layal and myself. We had a huge discussion about what should we develop for this hackathon.
Our Solution
In the end, we decided to develop an informative website for growing your own backyard vegetable garden. The first objection to this project was people could easily find all the information on different kinds of plants on the internet, why would they use our website for that? The answer is YES people can find all sorts of information about growing plants on the internet but there is no specific website where they can find all information about all the plants( i.e they need to research for each plant individually), our website would serve as a one-stop solution for all the people who want to grow their own vegetable garden. At first, we thought of developing an Andriod app so that we could send personalized notifications about the user's plants like reminders to water the plants, add fertilizers etc. but considering that we only had 1 and a half days to develop we decided to use MERN stack to develop a website for informative purposes only.
Gathering Data
As it was an informative website there was a lot of research involved in it, so Layal was responsible for supervising the task of gathering information like the amount of water, rarity, buddy plants, soil temperature, seasons, and fertilizer about as many plants as possible. We made an Excel sheet and updated it along the way, we gathered info on 20 vegetables and then uploaded it to MongoDB, we also had to find free-use images of the vegetables for the website.
Development
Layal and Nathan worked on the Frontend pages of the website, first, we developed a model using Figma and then Layal used the magic of CSS to create awesome and beautiful HTML pages. For the start, our website had 4 pages homepage, plant list, plant detail, and tips pages. We were trying to keep it as simple and straightforward as possible
I was responsible for developing the backend server of the website using Express.js, and GitHub Setup, converting the HTML pages to use handlebars, and deployment using render. Building an Express App was pretty easy considering it only had 3 pages, the main problem was with the plant schema and passing the plant data to the pages which then used handlebars to iterate through a list of plants.
Presentation
Nathan took the responsibility of creating a presentation for the website and Layal worked on the transcript for each slide. Now since the website was up and running we also added a bit of demonstration in the middle of the presentation, we had to keep everything very concise as the time limit for the presentation was only three minutes.
We were allotted a time slot in the afternoon, the presentation went really well, and we were also well prepared for judges' questions regarding the website like why would person use our website instead of searching through Google. In the end, the judges were impressed by the idea and we were proud of ourselves.
Links
Deployment Link: https://harvest-hub-fqbc.onrender.com/home
GitHub Repository: https://github.com/code-Gambler/harvest-hub
DevPost Link: https://devpost.com/software/harvest-hub-8jmthi
Conclusion
All in all the hackathon was a really good experience for me, I got the opportunity to brush up on my old skills as at that time my courses required me to develop Andriod, Cross-Platform and .Net Applications, this hackathon repolished my skills in MERN stack and web development. Other than coding this hackathon also involved a lot of exciting competitions and activities like Typing Competition, spicy noodle challenge, raffle tickets and a lot more.