naara

naara is a crowdsourcing web where anyone can host and join clean up events to create a clean aquatic environment free of trash through various features such as Location Based Services and many more.

Comment

Additional Info on the web-app:

  • If the layout of the draggable tab on the Explore page is weird, we suggest you to adjust your browser’s zoom to 75%
  • If the Google Map API doesn’t show up when you click on the explore page, make sure to refresh the page.

Inspiration

Indonesia is known for its extensive beaches, rich marine biodiversity and breathtaking aquatic environments. Unfortunately, because of the invasion of trash, these stunning beaches are no longer suitable for relaxing on.We've seen lots of movements and initiative trying to solve these problems such as the Pandawara group, an Indonesian environmental influencer group that encourages people to join forces in removing trash from Indonesia's water bodies. We thought that if we could make something that can maximize the movement's efficiency, we could actually have better beaches in Indonesia and so, we created naara.

What it does

The website provides features like the map feature, where organizations or companies may promote their events, especially the ones which are directly related to the environment such as cleaning events. Still in the map feature, we also allow people to locate places with untreated or unmanaged trash to allow government or willing organizations to be more aware of these locations and conduct cleaning more often as well as efficiently. We also believe that many people are going to be more aware of the environment and willing to contribute to the environment. With our web-app which will also have its mobile app version in the future, we provide the ease to contribute and therefore hopefully improve people’s enthusiasm to give impact to the world. Through this platform, we would also be able to conduct education events related to the environment in which the traffic will be boosted by this platform and therefore create a more efficient conduct of these events. Our web-app will also benefit people because the data from the amount of trash collected, which will be calculated, can be used by researchers and environment analysts to conduct research and development for the future of our environment. To mention, this project will promote and embody SDG no. 6, and SDG no. 14.

How we built it

To start off, we installed Next.js and set-up the GitHub collaboration repository. Since our team consisted of 4 members, 3 of us did the programming, while the other one designed the UI/UX on Figma. We started by planning out what we are going to put in the web-app and designing the structures as well as the layout on Figma. Next, we applied the design from the figma by making the core of the web-app first. Afterwards, we integrated the Google Maps API into a page in the web-app. To maximize our time and efficiency, we created the navbar, footer, profile and buttons by making custom components. We continued developing the maps, homepage, and navbar at the same time. After that, we started working on the footer, draggable tab on the maps, and also the profile page. In the end, we added the final touches and went over the codes again in case there were any bugs or mistakes that we hadn't resolved.

Challenges we ran into

Our progress was quite slow in the first few hours because we were unfamiliar with the next.js framework. We're new to next.js and this is our first hackathon. As a result, we had to check websites and forums in case we got stuck on error codes that kept coming up while we were coding. Since the API key was not correctly imported into the API, we were unable to install the Google Map API on the back-end. We turned to our mentors for assistance in resolving this, and they not only assisted in doing so but also offered suggestions on what needed to be added and improved.

Accomplishments that we're proud of

We were pleased with our team's performance in finishing our project during our first hackathon, and we hope to participate in more events of this kind in the future. Since we are new to the Next.js platform, it was also a new environment for all of us. Ultimately, we are pleased that our project fulfilled our goals and closely mirrored the Figma designs. Unfortunately, the time constraints prevented us from developing the web application's mobile version as well as improving the web-app features.

What we learned

We learn a great deal throughout our 36-hour journey of coding a pilot project. When it comes to teamwork, we hone our abilities by closely planning and overseeing the project workflow in addition to working together and communicating effectively. Through a variety of online documentations and forums, we successfully got familiar with the Next.js framework, the Typescript (.tsx) language, and the setup of the Github Collaboration Repository in terms of programming.

What's next for naara.

Our long-term objective is to have users from all over the world. To that end, we intend to partner with numerous organizations worldwide, participate in related hackathons, and generally grow and promote this project in the future. Additionally, we have put in place a few measures to help us achieve this. First and foremost, we'll work to update and enhance the web-app as much as we can by including improved features. Next, we'll attempt to provide our prospective mobile users with the same features we developed for our web-app by putting them in a mobile application that works with both iOS and Android. We would also attempt to use Arduino to develop a product prototype, such as an automated beach trash collection system or new ideas that might come up in the future. We are looking forward to present this to the world because we are incredibly inspired and passionate about it.

Built With

Share this project:

Updates