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
 
nghialele profile image
Nghia Lele

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

Collapse
 
arshadayvid profile image
David Asaolu

Awesome, 💪

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
 
fursaweb profile image
Oleg

Great article and interesting idea for project!

Collapse
 
arshadayvid profile image
David Asaolu

Thank you, Oleg! 🙂

Collapse
 
aviavinav profile image
Avi Avinav

Awesome article!

Collapse
 
arshadayvid profile image
David Asaolu

Thank you, Avi! 😍

Collapse
 
damilola_farawe profile image
Farawe Damilola

great article

Collapse
 
arshadayvid profile image
David Asaolu

Thank you, Dami 💪

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?