top of page

Griddle

JavaScript / Python / SQL /
React.js / Docker / PostgreSQL/ AWS S3 / HTTP

For my graduate-level graphics course CIS 7000: Production Pipeline, I worked on a semester-long class-wide project to create our very own 3D asset management and browser tool prototype, called Griddle. Griddle mirrors tools that are used in professional animation and game studio pipelines, such as Autodesk ShotGrid or Sketchfab, allowing teams of artists to upload, store, search, and update 3D assets (i.e. objects, character models, etc.). Griddle also stores and displays asset metadata, such as commit history, authors, and keywords.  As the graphics industry has been moving towards the use of the open-source Universal Scene Description (USD) file type over solely OBJ, FBX, or other traditional 3d model types, we took it upon ourselves to include USD file type support and integration.  Inspired by project management tools such as Github, our team also created file syncing and user features such as user creation, permissions, login, and socials. 

​​

For this project, I took part in all areas from Griddle's planning stages to its implementation and testing. I also worked as a full-stack engineer for this project, tackling areas both in the backend and frontend. Below I have included images of the frontend features that I built along with a list of ​​​my responsibilities for the project: ​​​

​

  • PostgreSQL Asset Database 

    • Created SQL tables in PostgreSQL to store asset and user information 

    • Used Docker and AWS S3 for handling networking and cloud-based storage  

    • Asset information included UUID, asset name, author, keywords, asset image, status, and version mapping

    • User information included username, first name, last name, email, profile picture, and password 

  • API

    • Used FastAPI web framework for building routes and handlers for HTTP-based service API in Python  

    • Created API endpoints for accessing SQL database and connected them to frontend calls 

      • Ex: Adding a new user to the table, updating an existing asset's metadata, etc. ​

  • User Permissions and Login ​

    • Used React Hook Form API to streamline form component creation

    • Built new Griddle account creation forms 

      • Added automatic login future upon successful account creation 

    • Built user log in and log out form 

    • Prevented a non-logged in user from being able to access user features

      • User features include being able make commits, create new assets, download assets, etc. 

    • Added profile pictures to have better visual recognition of users 

      • Profile picture upload available upon account creation 

      • Displayed default grey icon for non-logged in users 

      • Default profile picture created based on username if no profile picture is supplied during user creation 

      • Successful profile pictures would be showcased in user tab and next to user commits in metadata panel   

  • Asset Forms 

    • Build asset creation form for users to upload a new asset to the database 

      • Took in asset name, thumbnail, and keywords for asset metadata 

      • Included drag and drop feature as well as file explorer for file and thumbnail uploading ​

    • Built asset update form for users to commit their changes to the database 

      • Users could add a comment to their commit in the same style as GitHub ​

      • Commit history would be added to asset metadata and displayed in metadata panel 

  • Error Messaging 

    • Used Toast UI elements for displaying error messages to users

      • Ex: Invalid login credentials, trying to create an existing user account, etc. 

bottom of page