overview
Papaya asset browser (deployed here) provides a structured, centralized tool for the searching, previewing, and updating of 3D assets, including their models, versions, and associated metadata.
USD assets are stored in AWS S3 and metadata is stored in MySQL. We used Django for backend development, Railway for server hosting, Swagger for API editing, Astro for frontend React development, and Vercel for deployment.
This was the semester project for a Production Pipelines course at Penn, and was developed by the entire 13-person class. I worked within a 6-person core team, leading the frontend development and helping out with crucial backend connections.
For source code, check out the project's Github organization, including both frontend and backend repositories.
details
The asset browser required streamlined asset management tools to support artist workflows while maintaining data integrity. To do so, we designed a centralized system with support for a list of user stories, including:
Accessing the database from any computer
Logging into the asset browser with a unique username and password
Searching, sorting, and filtering assets
Viewing asset details
Editing asset metadata
Downloading assets, including specific versions
Uploading new versions of assets
Uploading new assets
The 13-person class was split into three teams. The USD structure team designed the USD-based asset storage structure, including multiple LODs (levels of detail), material variants, and asset versions. They also developed a Python-based validation engine for quality control during the asset uploading step. Meanwhile, the DCC team worked on integration with Houdini, allowing artists to easily interface with and update assets, accessing API checkpoints from within Houdini itself.
I was part of the core team, which handled the full-stack development of the browser, including API design, user interface design, and integration with S3 and MySQL for storage. This was accomplished with separate Github repositories for frontend and backend.
I led frontend development with React, initially using the Vite wrapper for frontend tooling but eventually using Astro for easy connection to backend. I used Tailwind CSS with core components from React Native and Radix UI, and I designed and iterated upon the interface multiple times before landing upon an ideal theme and design language. I designed almost every page of the site, including the asset grid, the asset details page, the steps for uploading and checking in assets, and the user page.
At the same time, I helped with API design and wrote Astro actions to interface with endpoints in the frontend. In this stage, I worked closely with both the backend team and the quality control team to bring their work to the frontend. This included implementing endpoints for quality control, uploading assets, checking in assets, downloading assets, and accessing specific users, assets, and asset versions. Throughout this process, Swagger Editor was very helpful for testing API endpoints.
This was my first project involving intensive API design and the most extensive React project I've worked on. My teammates helped greatly with aspects I was more unfamiliar with, especially with backend hosting and project deployment, and introduced me to some really powerful development tools.