As the world is changing, technology is greatly dependent on as rising developers and large corporations invent new ideas to help the world. In terms of this perception, we decided to create an app that would showcase the details of the organisms living around us and the climate problems they continuously endure. Climate change, global warming and multiple other environmental problems shape the living things that reside in our neighbourhoods. With animals and plants being harmed unintentionally by human development, people do not obtain a chance to give back to the planet and fix their mistakes. Natrify enables users to become educated on the wildlife that resides around them as it also permits them to provide assistance by following the description assigned to every picture. With a picture only remaining for a certain period of time, we decided to give users an unlimited real-life experience by assigning a QR to each picture, which would open up an AR version of the organism.

What it does

The Natrify app allows you to sign in and then connects you to the discovery feed where you can see various posts by other users of the app, and you can also take pictures from the app. The picture will be taken after you chose a category of nature, and after taking the picture, it will be uploaded to your account, and be saved in the gallery section of the app. In the gallery, you can see different information of the animal/plant identified in the picture and the information includes a description, current status, and how you would be able to help it if it was endangered. The website which allows you to login with the same account as the mobile app will show all the saved pictures in the gallery section of the website. There will be a QR code beside each picture in your gallery which can be used to view a 3D augmented reality model of the animal/plant on echo-AR.

How we built it

We first created the application using Adobe Xd, in order to construct the prototype. In adobe xd, we efficiently implemented user-friendly designs to make it the most effective in the real world. After a click of a button on the prototype, the user would travel to our Natrify's website. The website was made on VsCode using HTML5 and CSS. Using HTML we were able to create the base content which was on the website, such as Text labels, Buttons and Headers, and with the CSS aspect, we were able to style the code to make it appear professional. In the end, we also utilized EchoAR to give the users the opportunity to view an augmented version of the picture they had taken.

Challenges I ran into

Choosing an appropriate project to work on was by far the hardest aspect of the hackathon, as we would often disagree on the ideas which were delivered. It took a couple of hours just to decide on an idea, however, it was appropriate to spend a great time on the idea as that depicts the final performance of the project. As beginners to hackathons, we witnessed multiple challenges creating the prototype on Adobe XD, as it was difficult to decide on the animations and the UI design. Nevertheless the mobile aspect of the project, we ran into a couple of issues when working with the website. Utilizing basic concepts of HTML and CSS was fairly simple, however, implementing them into the design we had thought of beforehand was much more difficult. After hours of reading, trial and error and cooperative work, we managed to resolve all issues.

Accomplishments that I'm proud of

Having a nice and friendly looking UI is often seen as a challenge since it needs to be pleasing to the eye in order for people to use it. If there is too much white space then the app looks unfinished, but if there is too much information on the screen at once no one will want to read it. We believe that we have made a UI that both please the eye and has the right amount of information on screen for the user to consume.

Another accomplishment we are both proud of is how we managed to collaborate and finish the hackathon remote from one another. We initially thought that this hackathon would be a major challenge since we could not meet to work together, however, we managed to develop the project in real-time, remotely, showing that we have great collaboration skills.

We are also proud that we were able to take an idea, spend a long time on it, and achieve what we were hoping for. We achieved a good looking app and website which works, which is fully functional.

What we learned

We both learned how to use Adobe XD prototyping software which allowed us to create the Natrify mobile app prototype. This was something fairly new to both of us and once using this software to create a prototype for our mobile app, we realized it is a very useful piece of software and we got more experienced with it. We also strengthened our HTML and CSS skills when we created our website since we had to create it from scratch, and after experimenting with the code and trying out new things, we got results we were satisfied with. This gave us more experience with front-end scripting and helped boost out collaboration skills especially in times like this when we were working remotely.

What's next for Natrify

With adequate support from organizations, we can set up a cloud to store all the data of the images the user would take a picture of, and we would work alongside EchoAr to acquire QR codes for each organism in the database. With proper funding and organizational support, Natrify can truly become a successful and dominant application.

Built With

  • adobexd
  • canva
  • css
  • echoar
  • html5
  • movavi-video-suite
  • visual-studio-code
Share this project: