FULL-STACK MERN BUILD

Bamvsthewrld

React | MongoDB | Three.js | Firebase | Full-Stack MERN

A full-stack MERN platform for music artist Gavin Di Fresco — immersive 3D, Firebase auth, embedded media, and an interactive audio image map.

Bamvsthewrld hero preview

Project Snapshot

Client

Gavin Di Fresco — Bamvsthewrld

Project Type

Full-Stack MERN Web Application

Platform

React + Node + Express + MongoDB

My Role

Sole Developer — Frontend, Backend, UI/UX, Deployment

Key Achievements

  • Designed, built, and deployed the full-stack MERN platform end-to-end as sole developer
  • Architected an immersive 3D cosmic UI with a custom ThreeJS planetary model and animated star backgrounds
  • Integrated Firebase Google authentication for secure fan accounts and sessions
  • Embedded SoundCloud playlist + React-Player YouTube video for in-app music and video playback
  • Built an interactive audio-enabled image map — clickable planets trigger song playback from the Thoughts section
  • Managed environment configuration, Cloudinary asset pipeline, and production deployment debugging

The Challenge

One of the biggest challenges in building Bamvsthewrld was creating a platform that combined immersive visual design with full-stack functionality while maintaining performance and responsiveness across devices. The project included dynamic animations, interactive UI elements, authentication systems, media handling, database integration, and responsive layouts — all within a single cohesive experience. Balancing creative freedom with technical stability became a major focus throughout development.

Another significant challenge was deployment and infrastructure management. The application required coordinating frontend and backend environments, configuring authentication workflows, managing environment variables, handling cloud-hosted assets, and troubleshooting production issues that did not appear in development. Integrating features such as Google authentication, user sessions, comment functionality, and cloud image storage introduced additional complexity, especially while working through real-world deployment limitations and debugging across multiple services and platforms.

My Approach

I approached the project by treating it as both a technical learning experience and a production-level application. I designed the frontend using React with a strong focus on creating an engaging user experience through animation, layered visuals, and responsive layouts. At the same time, I structured the backend using Node.js, Express, and MongoDB to support scalable data management, authentication, and API functionality. I worked iteratively, simplifying and rebuilding sections when necessary to isolate issues and improve long-term maintainability.

Performance and user experience were also central to my process. I optimized visual effects such as animated star backgrounds and interactive elements to reduce unnecessary rendering overhead while preserving the atmosphere of the site. I implemented responsive styling across screen sizes and continuously tested layouts to ensure consistency between desktop and mobile experiences. The project pushed me to strengthen my debugging skills, especially when working with deployment environments, authentication services, and third-party integrations.

Throughout development, I handled every stage of the project independently — from UI/UX design and frontend implementation to backend architecture, deployment configuration, and troubleshooting. This experience helped me develop a deeper understanding of full-stack workflows, production problem-solving, and the importance of balancing creativity with technical execution.

Project Timeline

1

Discovery

Aligned with Bam on the artistic vision — cosmic, immersive, fan-first — and the technical scope (full-stack MERN)

2

Design system

Built the cosmic visual identity: color palette, typography, 3D planetary motifs, animated star backgrounds

3

Build

Frontend in React + ThreeJS + Styled Components + Tailwind; backend in Node, Express, MongoDB; Firebase auth wired in

4

Integrate + optimize

SoundCloud playlist, React-Player video, interactive image map, Cloudinary asset pipeline, responsive layouts across breakpoints

5

Launch + debug

Production deployment, environment configuration, auth-flow debugging, and troubleshooting cross-service integrations

Features

Vivid Galactic Experience

Vivid Galactic Experience

Traverse the cosmic expanse of Bam's Wrld through stunning sections rich with a 3D planetary model and celestial imagery. As users navigate the interface, they embark on a virtual tour, immersing themselves in the artistic universe curated by Bamvsthewrld — a visually rich exploration that captures the essence of the artist's vision.

Embedded SoundCloud Playlist

Embedded SoundCloud Playlist

The app incorporates a sleek, in-built music player that streams Bamvsthewrld's SoundCloud playlist directly. Users can indulge in the artist's tracks seamlessly within the app's environment — no need to visit an external SoundCloud page.

Integrated Video Player

Integrated Video Player

Powered by React-Player, the app provides a window into Bamvsthewrld's visual world with the latest YouTube releases. Fans can watch new videos from the artist without ever leaving the site, ensuring an uninterrupted and engaging multimedia experience.

Interactive Audio-Enabled Image Map

Interactive Audio-Enabled Image Map

The Thoughts section introduces an innovative way to experience the artist's music through an interactive image map. Clicking on any planet within the visual display triggers playback of a unique song, providing an immersive auditory journey through Bamvsthewrld's discography. This feature blends visual storytelling with auditory pleasure, creating a memorable exploration of the artist's work.

Built Mobile-First

Bamvsthewrld on a phone, section by section. Every layout adapts — the 3D galactic hero, embedded SoundCloud playlist, video player, and interactive image map all carry across breakpoints without losing their cosmic identity.

Bamvsthewrld — Hero on a phone

Hero

Bamvsthewrld — Bio on a phone

Bio

Bamvsthewrld — Music on a phone

Music

Bamvsthewrld — Video on a phone

Video

Bamvsthewrld — Thoughts on a phone

Thoughts

Gallery

Bio section
Bio section
Music — embedded SoundCloud playlist
Music — embedded SoundCloud playlist
Video — React-Player YouTube integration
Video — React-Player YouTube integration
Thoughts — interactive audio image map
Thoughts — interactive audio image map
Style tile — brand identity and visual system
Style tile — brand identity and visual system

Tech Stack

ReactNodeExpressMongoDBThree.jsFirebaseTailwindCloudinary

What the Client Says

"
"

What it's like to work with Tisha

Working with Tish on Bamvsthewrld was an incredible experience. She brought creativity, technical skill, and persistence to every part of the project. From the immersive design and animations to the full-stack functionality behind the scenes, she handled every challenge with determination and attention to detail. The final result feels unique, modern, and professionally built from top to bottom.

What stood out most was her ability to combine artistic vision with real development expertise. She didn't just create a website — she built an experience. Her dedication to learning, problem-solving, and pushing the project forward through every obstacle was inspiring to watch. I would absolutely recommend her for any creative or full-stack web development project.

Gavin Di Fresco
Artist, Bamvsthewrld

Client

  • Gavin Di Fresco — Bamvsthewrld

Services

  • Custom React + TypeScript Build
  • UI / UX Design
  • Performance Engineering
  • SEO + Analytics

Stack

  • React.js
  • Node.js
  • Express
  • MongoDB
  • Three.js
  • Firebase

Results

  • bamvsthewrld.com
  • Shipped a production full-stack MERN application end-to-end as sole developer
  • Immersive 3D cosmic UI with custom ThreeJS planetary model and celestial backgrounds
  • Firebase Google authentication wired in for secure fan accounts
  • Embedded SoundCloud playlist + YouTube video player for unified media experience
  • Interactive audio-enabled image map — clickable planets trigger song playback
  • Live at bamvsthewrld.com

Let's build something together

Want a custom-built site that loads fast and tells your story? I'd love to talk.