Black Digital Style Archive

app item page with top nav includes search bar, button, and user profile. content is 2 column grid with image of whoopi goldberg on the left and information about the photo on the right (editorial, Variety Magazine, 2021) with an AI produced analysis of the mood and color
Role
Software Engineer
1 week
Contributions
App
About
This project is a digital archive focusing on Black style icons in American entertainment and the global Black diaspora.
My goal is to create a stylistically forward UI that documents and stores public archival content to later be analyzed by AI.

Background

There are a number of Black creatives who have taken the initiative to document Black fashion - many using social media to catalog and spread awareness of Black culture and it’s impact on society from past to present day: archivealive by Tianni Janae', Black Fashion Fair by Antoine Gregory, and Black Fashion Archive by Rikki Byrd. However the social media accounts aren't optimal to search through, leaving users scrolling through the accounts for inspiration.

Shelby Ivey Christie, a prominent Black fashion historian, discusses record-keeping as a means to right the wrong of American society's erasure of Black contributions for centuries, especially with its export of Black American culture. This in combination with cultural appropriation and the exit of iconic subcultures like GHE20G0TH1K, the need to document and simultaneously protect culture is evident. This digital archive centers around recognizing Black American cultural impact in entertainment, including across the global Black diaspora, and cataloging personal style.

The Code

Tech Stack

  • Next.js
  • React
  • TypeScript

My professional experience is mainly with client side Javascript and React apps, so this was the perfect opportunity to learn more about server side rendering. I wanted to include AI personalization in this app so we're starting with OpenAI and later will compare to Google's Gemini.

Auth

For this app to scale, I included authentication with Clerk. They offer quick and easy user management - no more trying to figure out google auth!

ORM Database vs Headless CRM

I created a local database to quickly get started with the app using prisma and postgresql. Starting with the ORM gave me an idea of how I wanted to structure the data. Once I established that, I decided to switch over and use a headless CRM to pull content from - that way anyone could add data using the Prismic UI at a later point and not have to be an engineer by any means.

OpenAI and Langchain

Langchain and zod made it pretty easy for me to interact with OpenAI. With our Next.js app, it'll run server side in node. First, I'll use StructuredOutputParser and zod to create a schema of instructions to feed to OpenAI. That will be passed to Langchain's prompt template that will be used to ask the language model for an answer. We then format that answer into the data structure we want!

UI/UX

Want more insight into the product UI and UX? Read more here!

Homage, enter buttonScreenshot of discover page with 3 column grid of archival posts
Impact