ZotDex | Devpost

Image of the Leaderboard page and their catches.
Image of the Login page
Image of the Home page and the Nav bar
Image of the lower part of the Home page showing the user's captures

Inspiration

We were inspired by the application PokemonGo and its Pokedex feature of being able to capture creatures while traveling around, and then learn things about them. We also liked and was inspired by the rarity systems of PokemonGo and PetrDrop Stickers.

What it does

The main feature of our project allows the user to take pictures of different kinds of plants, and then the identify the species of the plant. Every time the user captures a photo of a plant, it is saved in their account, while showing them how many other users have captured a photo of this plant. In addition, we created a leaderboard to compare the number of captures a user has with other people. To encourage finding new plants, we created a challenge system, where randomly the user is tasked with finding a specific plant to capture and rewarding them with Experience Points.

How we built it

To create the project, we used vscode, Github, and Liveshare. We used django and python to create the backend framework of our project and specific APIs to transmit information from the server, which we used SSH for, to the user interface. In order to properly identify plants and their information, we utilized an API called plant.id. We utilized mySQL to create a secure database to store the user's information, and then safely transmit it back to them. For the frontend, we used html, css, and javascript to create a user-friendly interface. Html and css were primarily used to style and structure the website, while javascript was used to communicate with the server to connect the frontend and backend.

Challenges we ran into

One of the main challenges was communicating between the frontend and backend features. We also had difficulties utilizing JSON files to properly set up information. We had problems trying to maintain our website's format and user-friendly interface to be responsive to the window size.

Accomplishments that we're proud of

One of our main accomplishments is creating a solid and stable data structure for the backend that easily transmit information for the frontend and backend. We were accomplished by the connection between the frontend and backend information. On the frontend side, we were proud of the responsiveness of the website window. We were also proud of the leaderboard system which tracks all of the user's captures and in real time updates them.

What we learned

We learned how to use javascript, html, css, utilizing new APIs, and communication between backend and frontend.

What's next for ZotDex

Right now ZotDex is meant only for UCI students, but eventually we want it to be accessible and fun for even people outside of UCI. In addition, we want to be able to make ZotDex an app that is accesible on both Android and IOS systems.