Skip to content

An event organization web app like Eventbrite or Meetup with authentication, event management, search, filtering, categories, checkout, and payments using Next JS 14, Tailwind CSS, Shadcn, React Hook Form, Zod, Uploadthing, React-Datepicker, Mongoose, Clerk, and Stripe.

Notifications You must be signed in to change notification settings

Alekhandro24/events-app-next14

Repository files navigation

Evently Web App

An event organization web app like Eventbrite or Meetup with authentication, event management, search, filtering, categories, checkout, and payments using Next JS 14, Tailwind CSS, Shadcn, React Hook Form, Zod, Uploadthing, React-Datepicker, Mongoose, Clerk, and Stripe. The app works well on all kinds of devices.

Home Page

Anybody can visit publicly without an account. Under hero section you can see events list made by people worldwide.Some of the events you pay for and some are free. you can search or peek a category you interested in. There is a pagination as well through wich you can keep exploaring the whole library of events.

After creating authentication you'll back on the homepage as an authenticated user. You'll see some new fields on the header - Create Event, My Profile.

Event Details Page

If you click of one of events it takes you to the page showcasing all the details: when and where is it, and other similar events. You can buy a ticket or get it for free.

Payment Details Page

If you try to buy a ticket without signing in it'll prompted you to create an account. Our OD is build with Clerk. After creating an authentication or logging in as an authenticated user you can buy a ticket. On the page you'll see all the details what ticket you're getting and buy it using with Stripe.

Profile Page

After you complete the order you'll end up on your profile page and youcan see the ticket you got.

Create Page

You can also make your own event by giving all the info: name, picture, category,description, where and when, and if it's free.Once you make it every one will be able to see it. There are many options including update where you can update any information related to the event or even deleted.

Order Details Page

There is also this order details option where we can see a list of people who got the tickets. There we have it a nice looking table showcasing the order details.

Technologies Used

The portfolio website is built using the following technologies:

  • Next.js 14
  • Next.js App Router
  • Next.js Server Actions
  • Client & Server Components
  • Shadcn
  • TypeScript
  • Tailwind CSS
  • Clerk
  • Mongoose & MongoDB
  • Webhooks
  • Zod
  • Dropdown & File uploader
  • React-Datepicker
  • Form Submission & Actions
  • Stripe
  • Pagination

Thanks

A big thank JavaScript Mastery for your tutorial of Next.js 😃

Contact Information

About

An event organization web app like Eventbrite or Meetup with authentication, event management, search, filtering, categories, checkout, and payments using Next JS 14, Tailwind CSS, Shadcn, React Hook Form, Zod, Uploadthing, React-Datepicker, Mongoose, Clerk, and Stripe.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published