Event Finder
Event Finder is a modern web application built with Next.js that helps users discover and track events in Turkiye.
Features
- Search and filter events by location, date, and category
- See event details and link to the ticketing site
- Responsive design for optimal viewing on all devices
- Dark/light theme support
Tech Stack
- Language: Typescript
- Frontend: Next.js 15, React
- Backend: Next.js 15, Ticketmaster API
- Styling: Tailwind CSS, shadcn/ui
- Deployment: Vercel
Details
Why build this app?
I built this app to be able to use a third party API. Reading API docs, using necessary API keys in environment variables, fetching data from correct endpoints, understanding data format that is received from the API and displaying the data in a desired way were the challenges of working with Ticketmaster API.
Another reason for building this app is to be able to filter and paginate through results in an elegant way.
What were the challenges and how did I overcome them?
The biggest challenge was to use an external API and converting their data format to something useful for my app. I overcame this by reading the API docs and carefully planning the types and format of data I am getting while fetching from the API.
Another challenge was to implement the search and filter features. I implemented this by using search parameters in the url and passing these parameters to the API when fetching data. This app doesn't use any state management like context. I only used some useState hooks in client side components.
Displaying a dynamic pagination component based on the number of results was the final challenge. I overcame this with the help of a custom algorithm to calculate total pages to display, then calculating which page numbers to show on the pagination component based on total pages.