DEV Community

Cover image for How I built an event ticketing system with Next.js and Firebase

How I built an event ticketing system with Next.js and Firebase

David Asaolu on May 16, 2023

After excessive procrastination, I decided to improve my developer portfolio by building real-world projects that stand out from the job-hunting po...
Collapse
 
iamhectorsosa profile image
Hector Sosa •

Incredibly detailed post! Kuddos on this! Another alternative to email or to include in email is a ticket created using Vercel’s Image Generation.

Also a chef’s kiss would’ve been to frame the screenshots included in this post. I’ve created a simple OSS tool for this. Check it out and let me know what you think.

github.com/ekqt/screenshot

Collapse
 
arshadayvid profile image
David Asaolu •

Sure, thank you, Hector!

Collapse
 
roniardynt profile image
Ron •

Great and detail explanation ✨

Collapse
 
arshadayvid profile image
David Asaolu •

Thank you, Ron 🔥

Collapse
 
aviavinav profile image
Avi Avinav •

Awesome article!

Collapse
 
arshadayvid profile image
David Asaolu •

Thank you, Avi! 😍

Collapse
 
nghialele profile image
nghialele •

Just what I needed. Saved for tonight’s session.

Collapse
 
arshadayvid profile image
David Asaolu •

Awesome, 💪

Collapse
 
fursaweb profile image
Oleg •

Great article and interesting idea for project!

Collapse
 
arshadayvid profile image
David Asaolu •

Thank you, Oleg! 🙂

Collapse
 
damilola_farawe profile image
Farawe Damilola •

great article

Collapse
 
arshadayvid profile image
David Asaolu •

Thank you, Dami 💪

Collapse
 
femi_akinyemi profile image
Femi Akinyemi •

Nice Article and well written! Thanks for sharing

Collapse
 
arshadayvid profile image
David Asaolu •

Glad, you enjoyed reading it Femi!

Collapse
 
arshadayvid profile image
David Asaolu •

Thank you, Abdullah

Collapse
 
maschmi profile image
Martin •

Thank you for this detailed post. For me, as a mostly BE developer it was impressive to see what is possible to do with firebase. For me as a person also interested a bit in security I had to give it a spin and see if I can manipulate others events. Took some searching, but it does work.

By changing a query in the browsers dev tool
Image description

I was able to see all events (excluding my own in this case)

Image description

I was also able to delete a event created by a second user I've registered.

Any idea how to prevent such attacks in your app?

Collapse
 
arshadayvid profile image
David Asaolu •

Wow, this is new to me. I don't have any idea about this at the moment.
But, I will make some research, maybe it's from my end or Firebase.
Thank you for pointing it out, Martin.🫡

Collapse
 
maschmi profile image
Martin •

I'm curious what you find.

Maybe explaining how this came to my mind helps in figuring out how to prevent such attacks.

Seeing the listing to get all events by a user from firebase triggered me to try and modify the query. I was aiming for changing the network request directly but could not figure this out. Then I took a look at the source code in the developer tools and after some searching and debugging I found the correct place to edit the query in code while debugging.

Collapse
 
yoadev profile image
Younes •

Have a look here 😉

Collapse
 
reacthunter0324 profile image
React Hunter •

THANK YOU SO MUCH :)

Collapse
 
r4e profile image
Richie Permana •

How do you handle concurrent users?