RedwoodJSTailwindFramer MotionPostgreSQLGraphQL

Awarded second place in the 2023 Redwood Build Competition, the-scene is a full-stack app with a punk rock aesthetic. It provides users with a sleek, interactive platform to find, create, and rate live music events.

the motivation

Build a unique and engaging full stack app for a build competition

The Infinity Keys team entered the 2023 Redwood Build Competition with the goal of building fully functional app that captured ephemeral events and focused strongly on creating an enjoyable user experience.

the solution

A geolocation-based music show app with a punk rock design

the-scene captures fleeting music events by allowing users to share and discover local shows. It emphasizes user participation with fun animations, location-based displays, and dynamic, aggregated data from other show-goers.

The Process

the-scene's development kicked off with setting up the project using RedwoodJS and hosting on Render. This combination, with the addition of Clerk for authentication, enabled us to rapidly launch a full-stack app.

We focused on building out the key features: creating a scene with show info and image uploads, finding nearby scenes with geolocation and a map view, and a gallery view where users could rate and find additional info.

Once the foundational elements were in place, we collaborated with our designer to bring in a slick, punk rock aesthetic. We then worked on enhancing user experience by adding animations, auto-refreshing data on the map, and developing a sharing feature, making it easier for users to locate and attend these events.

  • Initialize the project using RedwoodJS with TypeScript and deploy on Render for rapid full-stack app development.
  • Integrate Clerk for secure and efficient user authentication.
  • Develop core functionalities using multiple APIs.
  • Collaborate with a designer to create a unique, punk rock-themed aesthetic.
  • Implement custom Lottie and Framer Motion animations.
  • Upgrade the user experience with gallery views, auto-refreshing data for live updates, and a user-friendly sharing option.

The Challenges

We needed to ensure users had the latest show info without having to manually refresh. To solve this problem, we built data polling functionality to enhance the real-time experience of the app.

To capture the atmosphere of shows, users needed a way to upload images easily. Connecting Cloudinary's API on the server enabled them to efficiently upload and share real-time images of the bands.

The app focuses on local, live events, so we integrated the geolocation and Mapbox APIs allowing users not only to discover music events happening around them but also to post and navigate to these events with ease.

Let's Connect

I am always open to connecting with like-minded individuals in the tech community. Whether you have questions about my work or simply want to connect and network, feel free to reach out to me.

I look forward to exploring new opportunities, sharing ideas, and growing my professional network, and I would be happy to hear from you!