Afterparty AI
Frontend Engineering & Product Design

A Web3 creator community platform with AI-powered features

Afterparty AI
Favorite
When2021 — 2024
ForAfterparty AI
Sector
AIWeb3Social Media
Discipline
Frontend EngineeringProduct Design
Technologies
ReactAgora

About the Company

Afterparty is a creator community platform that empowers innovative creators, artists, and builders in Web3 with tools to deliver world-class experiences to their biggest fans. For the first time, fans can participate in the success of their favorite artists and creators through Web3 technology.

My Story

After working at MAX for nearly 2 years, I took some time off to work in the music industry to brand and market my artist project. During that time, my VP of engineering at MAX left to start Afterparty, a Web3 startup where membership was granted through the purchase of a premium NFT. I came on as the first engineer, and after six months we were able to get a product to market and secure funding to expand the team.

I led the entire frontend development and contributed significantly to the product design. My experience in the music industry and working with content creators proved invaluable, as Afterparty was partnering with artists and influencers.

Afterparty pivoted multiple times throughout its evolution – from live streaming services to NFT marketplaces, exclusive events, festivals, and eventually AI-powered voice cloning and interactive AI chat platforms. Across all iterations, I maintained object-oriented frontend engineering practices, contributed to product design, and ensured responsive design consistency and cross-browser compatibility.

Afterparty Live Streaming

I built the frontend in React and integrated Agora for the live streaming engine. The platform enabled multi-stream functionality which allowed the creator to livestream simultaneously from different devices and also allowed multiple streamers and fans to also stream alongside them. The system featured interactive chat with hand raising, fan participation capabilities, real-time stream updates, and monetization features like paid shoutouts.

Retrospective

If I were to rebuild this project today, I would incorporate TypeScript earlier and prioritize comprehensive testing. Testing the live streaming functionality required multiple devices and browsers to verify interactions, which was time-consuming and frought with transient issues. I would develop automated testing tools and test suites to streamline this process, though startup constraints and tight deadlines prioritized rapid feature delivery which was always a balancing act.

CMS

As Afterparty frequently pivoted between products, the marketing team needed constant updates to main website and other marketing materials. I helped develop a fully custom-built CMS that wrapped our UI elements and complex components, enabling marketing and business teams to create pages independently using prebuilt components and branding. The fully responsive CMS ultimately powered hundreds of pages for events, check-ins, logins, and email and phone capture forms.

Retrospective

If I were to rebuild this project today, I would implement a drag and drop functionality instead of arrow buttons for moving content blocks around. I would also incorporate Tailwind CSS for cleaner, more maintainable styling that's easier for non-technical team members to read and use. Additionally, I would implement Storybook UI for component documentation and regression testing, replacing our custom Elements page with a more robust solution for showcasing UI variations.

Afterparty Homepage
The marketing team built the Afterparty Homepage using the CMS

AI Chat Personas

I built the frontend interface that enabled fans to chat with AI-powered versions of their favorite creators. The platform integrated voice cloning technology and knowledge bases built from internet crawling and reputable sources, ensuring the AI could answer questions accurately and contextually as well as generate compelling images. The app utilized audio chips and audio-autoplay which was interesting to implement because the DOM needed user interaction before the audio could be played. I then needed to create an audio player singleton to manage all the audio playback and state across all the audio chips generated by the AI persona.

Retrospective

If I were to rebuild this project today I would incorporate far more animations to make the experience more engaging and immersive for the user. As much as the interface was robust and functional across all devices, browsers, and screen sizes, I think animating the audio chips and the images being generated would have enriched the experience.

Afterparty AI Chat
AI Chat Personas Splash Page