TikTok Concerts

Inspiration

The inspiration for this project was an event called TikTok In The Mix. This event was the first ever global live concert, and broke the record the biggest live event ever on TikTok. Since this event was so popular, I thought it would be a good idea to create features that enhance the experience of live concerts for both artists and fans. By creating features designed for live concerts, this will inspire artists to share their performances on TikTok Live, and welcome fans to view from the TikTok app. This will also help smaller artists by allowing them to gain a wider audience.

What it does

My project supports the following main features:

• Event Scheduling: Artists can schedule their live performances and make them publicly available.
• Global Events Map: A dynamic map showing all scheduled events worldwide.

Fans can navigate to /users to view upcoming events on a dynamic map, and view details such as the date and description of the event. Artists can navigate to /artists to view events that they have already scheduled, delete events, update events, and add new events. Finally, the website does have responsive design for smaller screens.

How we built it

This project is built using the following technologies:

• Framework: Next.js
• Language: TypeScript
• UI Library: React
• Styling: Tailwind
• Database: MongoDB
• API: Integration with Google Maps API
• Deployment: Vercel

I used Next.js on top of React to create the pages, app layout, client components, server components. I used TypeScript for type safety, and creating interfaces. I used MongoDB to create the database event schema and model.

Challenges we ran into

Some challenges I faced included:

• Adding authentication with TikTok Login Kit. I tried integrating TikTok Login Kit using NextAuth.js, although I was getting errors related to an incorrect configuration of NextAuth.js's built-in TikTok Provider. Specifically, I was getting errors that the configuration was missing a token and issuer definition, even though the token was defined in the configuration. This is a current Issue on NextAuth.js's GitHub. After attempting to fix it myself, I couldn't get it to work and decided to skip adding authentication.
• Handling server actions and requests to my database during deployment. During development, I didn't run into any issues, but when I deployed to Heroku, the server was not correctly fetching from the database, and the session would timeout when trying to POST to the database. After careful analysis of my code, I noticed the following issues:
  • I was connecting to the database within one of my client components, as well as the app layout.
  • I was forgetting to connect to the database within each server action function.
  • I had to revalidate /users and /artists after each server action, so that the cached data would be purged

After fixing these issues, all CRUD operations started to work as intended.

Accomplishments that we're proud of

I'm proud of myself for learning and using technologies that I have never used before.

In particular, it was my first time using:

• Next.js
• TypeScript
• Tailwind
• Google Maps API

Considering that I was able to quickly learn all these technologies and successfully use and implement them, I feel very accomplished.

What we learned

The biggest takeaways I learned from this project include:

• Realizing that a working development environment doesn't always equate to a working production environment.
• It's very useful to research issues you're having, especially when working with open-source software. Not only can you potentially discover solutions, but you can also potentially fix the problem yourself and make a contribution to the repository.
• It's worth it to leverage new technologies and ways of doing things to make the work easier. For example, I've traditionally always used vanilla CSS, but by using the Tailwind framework, I was able to style the website much faster which allowed me to put more focus on other tasks.

What's next for TikTok Concerts

I'd like to add the following features to my project:

• Adding authentication with TikTok Login Kit.
• Research Google Maps API docs to find a way for users to type in just the name of a location, instead of the whole address.
• Add a notification system so that fans can sign up to be notified when concerts are coming up.

Built With

• googlemapsjavascriptapi
• mongodb
• next.js
• react
• tailwind
• typescript