PetrPedia | Devpost

User profile page
Sticker information page
Home Page
Trade Page
Create a User
Create a Template
Create a Drop
sample stickers
sample user

Inspiration

Collecting Petr stickers is a fun and unique part of the culture at UCI. However, the number of drops and new designs can make keeping up overwhelming. We wanted Petr lovers to have a resource where they can easily keep track of Petrs, find ones they want to trade for, and enjoy other’s collections.

What it does

We realize that there was a lack of a centralized website dedicated to tracking Petrs. To solve this issue, we decided to make a website that gives users the ability to upload existing Petrs, contact other users for trades, and look at potential Petrs they may be interested in. The four main objects on this page are Designs, Users, Stickers (designs owned by a user), and Drop dates. The goal is for users to be able to filter through stickers using these different classes to find stickers they may want to trade for.

How we built it

We started off with a Class UML diagram to keep track of Users, Stickers, Drops, and PetrTemplates, along with their respective attributes. After that, we began working on the backend in FastAPI for the 4 main classes. We utilized the SQLalchemy and Pydantic libraries extensively to create schemas and models for these classes to process these requests.

We started on the frontend by learning how React routing works because we needed to be able to create multiple pages. We then started sketching out page layouts on paper, translating them to HTML, and styling the content with CSS.

Challenges we ran into

We had trouble with Cross Origin Requests being blocked even though we had allowed all origins on the backend hosting. This wasn’t a problem on some of our computers so it only prevented testing in some cases.

We realized that HTML files couldn’t be connected to the main site, so we had to paste their contents into JSX files, but sometimes, elements of the original HTML files would be lost upon integration into a JSX or translated differently.

Accomplishments that we're proud of

With no experience on creating backend code, we were able to successfully design an API to handle GET/POST requests for our 4 main classes: Stickers, PetrTemplates, Drops, and Users. Additionally, POST requests created objects of classes that went into our relational database; GET requests returned a query of all objects matching a filter, just the first, or an object by its ID. We were surprisingly able to connect our main python backend to our React.js frontend, with our webpage successfully interacting with and making requests to our backend.

What we learned

First, we learned to use Class UML diagrams in order to structure our project, by keeping track of the various classes, attributes, and data types we would need. We learned a lot of React.js, HTML/CSS, and FastAPI on the fly, and as mentioned above, learning how to program an effective backend that can communicate with the frontend was especially useful.

With a hackathon under our belt, we’re better able to comprehend the scope of future project proposals. We might have underestimated the amount of work required for this project, but with a lot of determination (and eleventh-hour luck) we managed to pull through.

What's next for PetrPedia

What’s next for PetrPedia is to improve our security systems and add a login system. Our original idea was to implement sign in with Google and have certain controls over your own profile, but we didn’t have enough time to build all of that.