The Petr Archives

Logo

Inspiration

** Petr Drops are very important to UCI’s Culture ** Although Petr stickers play such an important role to the culture of UCI students, the decentralization and amount of drops make it difficult for all students to participate or appreciate the stickers.

Challenges to Petr Culture

No single platform to keep track of all the previous stickers
Difficult to discover new artists
Too many stickers to keep track of, several drops every day

Our website is for students who want to appreciate the hard work of all the Petr Creators as well as those who want to get involved and learn more about previous drops. Whether you want to reminisce back to previous drops or discover new Petr artists, you can trust Petr Archives to collect them all!

What it does

Petr Archives creates a “yearbook” of Petr drops after each event UCI students are too busy running to Petr drops; they can’t keep up. This platform allows students to appreciate previous Petr drops. This could help them discover new Petr creators, analyze patterns between different drops, or look back at the history of Petrs.

Each archived item keeps track of:

sticker name
an image of the sticker
drop date
location
Creator’s Instagram handle

We did not include the functionality to see future drops, in order to preserve the exciting aspect of keeping up with each Petr creator on Instagram to participate in a drop.

How we built it

backend GET and POST functions Get: information about previous Petr drops Includes info about Petr names, pictures, dates, locations, and Petr instagrams Post: add a new Petr Adds information about the Petr drop to the database

frontend Design static webpage(s) Fetch backend data Display data on webpage

Challenges we ran into

backend Had trouble connecting to Cloudinary (image host) API Learned how to build a Fast API today Merging with Git How to process/store images Raw string

frontend Styling issues with Grid’s inherent flexbox, which would override all the formatting that we tried to implement Sending image to backend Using various third-party Python libraries

Accomplishments that we're proud of

backend Created a working endpoint for the frontend to pull from Being able to process and store images

frontend Learned how to display with React Resolved issue with sending image to backend

What we learned

overall How to effectively collaborate with others on bigger projects by using Git and VSCode Live Share How to search the right things in order to resolve any issues that we encounter Taking breaks is important for productivity

backend How to build and use a Fast API Using various third-party Python libraries Working with JSON files

frontend React Material UI to facilitate styling with CSS Fetch API

What's next for The Petr Archives

Search functionality to find Petr Stickers Filter/Organize Petr stickers (by name, instagram, etc.) Error handling Re-formatting image gallery Submission validation to ensure that the Petrs submitted are unique and correct Consider databases as a storage option