Building from scratch
The platform needed a complete frontend foundation, not just isolated screens.
I built the React architecture with reusable components, custom hooks, Redux state, and maintainable UI flows.
Case study
Sound Of Meme
Led frontend development from scratch for an AI music generation platform, including the music player, song generation experience, SEO architecture, and performance optimization.
- My role
- Lead Frontend Developer
- Timeline
- Nov 2024 - Dec 2025
- Status
- Live Product
What did I build for Sound Of Meme?
I led Sound Of Meme's frontend development from scratch using React, Redux, and Tailwind CSS. I built the music player and AI song-generation interface, established reusable components and hooks, and worked on bundle optimization and the SEO blog architecture. This case study documents that frontend scope and the engineering decisions behind it.
Evidence and scope: The approximately 8 MB to 2 MB bundle reduction is a historical project estimate. Before-and-after build artifacts and test conditions are not published here, so it is not a reproducible benchmark, a current site measurement or evidence of a ranking or conversion increase.
The brief
React.jsReduxTailwind CSS
The product needed a scalable frontend from scratch, smooth AI song generation flows, a music player system, and better production performance.
Sound Of Meme was an AI-powered music generation platform where I owned the frontend from scratch. The work covered scalable architecture, reusable components, custom hooks, maintainable UI flows, the core music player, AI song generation, SEO-focused frontend architecture, and production performance.
For similar work, explore Performance Optimization.
Planning a similar build? Read React and Next.js Performance Audit: What to Ask for Before a Rebuild.
Planning a similar build? Read Frontend Revamp Checklist for Websites and SaaS.
What I delivered
- Led frontend development from scratch.
- Built scalable React.js architecture with reusable components and custom hooks.
- Built the core music player system.
- Built the user-facing AI song generation experience.
- Implemented metadata optimization, structured content, and 25+ blog pages.
- Worked on production bundle reduction through lazy loading and code splitting.
How it was built
- Used React.js, Redux, and Tailwind CSS to build maintainable UI flows.
- Used lazy loading, route-level code splitting, shared/global components, and rendering optimization.
- Structured the frontend around reusable systems instead of one-off screens.
- Built SEO-focused architecture with metadata optimization and structured content.
Challenges & decisions
Performance at production size
The production frontend needed a smaller bundle and more selective loading.
I used lazy loading, route-level code splitting, shared/global components, and rendering optimization to reduce the bundle. The historical size estimate and its limitations are noted above.
AI music UX
The AI generation experience and music player needed to feel smooth and production-ready.
I built the core music player system and user-facing AI song generation experience with responsive layouts and smooth interactions.
Product features
- Scalable React architecture
- Reusable components
- Custom hooks
- Music player system
- AI song generation
- SEO blog architecture
Outcomes
- Reduced the production frontend bundle; the historical estimate is qualified above.
- Built the core AI song generation and music player experience.
- Implemented SEO-focused architecture with 25+ blog pages.
More of my work
Have something in mind?
Let’s talk it through. In a short intro call, we’ll explore your goals, scope, and the next step together.
Choose a time that works for you.