For my 33rd birthday, I decided to get a little self-indulgent and ask my friends for 30 - 90 minute conversations (see the website below for more context!)
After recording two conversations, I was thinking about the best way for myself, my partner, and the broader public to access the conversations. The easy solution would have been to manage 3 separate notion pages with Google Drive embeds, but I decided to create a website instead.
GitHub: github.com/shudshudshud/33foramoment
Live Site: 33foramoment.irsyadramthan.com
Status: Proof-of-Concept (Deployed on Vercel)
Timeline: April 2025
Project Overview
"33 For A Moment" is a personal podcast project celebrating my 33rd birthday through meaningful conversations with friends. Named after the Five for Fighting lyric "I'm 33 for a moment, still the man, but you see I'm a they...", this project creates a space to capture and share these meaningful conversations with varying levels of privacy.
As an alternative to managing separate Notion pages with Google Drive embeds, I built this website as a one-day proof-of-concept to provide a more elegant solution for sharing these conversations.
Core Features:
- Multi-Level Access Control: Different access portals for me, my partner, and the public
- Password-Protected Access: Secure access to different sections of the site
- Friend Management: Each friend gets their own profile to manage the visibility of their conversation
- Google Drive Integration: Embedded audio player for podcast episodes stored on Google Drive
Tech Stack:
- Framework: Next.js
- Styling: CSS Modules with responsive design
- Authentication: Simple password protection with client-side verification
- Hosting: Vercel for the front-end
- Audio Storage: Google Drive
Lessons & Next Steps
Key Learnings:
- Attempted to use environment variables as a placeholder backend, but discovered the limitations of this approach for data that needs to be updated
- Building frontend components that could later be hooked up to proper backend APIs
- Working with Google Drive's audio embedding capabilities
- Creating a responsive design that works well for audio content
Technical Challenges:
- My hypothesis that I could use environment variables as a stand-in for backend storage didn't work as expected, particularly for data that needed to be updated (like friendship permissions)
- Client-side password verification has security limitations that would be better addressed with server-side authentication
- While environment variables worked for static configuration, they couldn't support the dynamic data needs of the application
Future Development Plans:
- Server Implementation: My immediate next step is to implement a proper backend with Express.js and MongoDB, deployed on fly.io to take advantage of their free tier
- Enhanced Authentication: Replace the simple password system with a more robust auth solution using JWT
- Audio Processing: Add waveform visualization and better playback controls
- Friend Access Management: Build proper database models for friends and their access permissions
- Mobile Responsiveness: Ensure the site works well on mobile devices with appropriate touch controls for audio playback
Version History:
- v0.1 (April 2025): Initial proof-of-concept with basic audio embedding and password protection
- v0.2 (Planned): Server implementation with proper authentication and database
- v0.3 (Planned): Enhanced audio player and mobile optimization