Evently | Event Management Platform :tada:

Inspired by Eventbrite, Evently was built to enhance your ablity to create, organize, and manage events with features like authentication, search, dynamic categories, and seamless Stripe powered checkout.

Built with cutting-edge tools like Next.js 14, Tailwind CSS, and Clerk for a secure, scalable, and user-friendly experience.

Evently Live Link

Source Code . Report Bug . Request Feature

Features

• Robust User Authentication: Leveraging Clerk to implement secure, scalable user authentication and management with seamless account creation, login, and session handling.
• Dynamic Event Lifecycle Management: Building end-to-end features for events, including -
  • Creation: Crafting user-friendly event creation forms with React Hook Form and Zod validation.
  • Detail Views: Optimizing event detail pages with advanced database queries using Mongoose and Next.js routing.
  • Edit Existing Events: Enable real-time updates to event information while preserving data accuracy through validation and user feedback.
  • Remove Events: Implement straightforward yet secure deletion workflows, empowering users to manage their events effectively.
• Intelligent Event Recommendations: Designing a recommendation engine to enhance user engagement by showcasing related events on profile and event detail pages.
• Personalized User Dashboards: Creating visually compelling dashboards with Tailwind CSS, displaying user-specific events for intuitive organization.
• Advanced Search and Filters: Implementing efficient search and filtering functionality using server-side rendering and client-side interactivity for precise results.
• Dynamic Event Categories: Designing a flexible category management system to accommodate evolving event types with ease.
• Integrated Payment System: Developing secure and seamless payment processing powered by Stripe, ensuring user-friendly checkout experiences.
• Comprehensive Order Management: Building an intuitive order tracking system, including searchable transaction histories for both users and administrators.
• Scalable Architecture: Architecting a modular, reusable Next.js codebase for enhanced scalability, maintainability, and team collaboration.

(top of page)

Project Structure

(top of page)

Installation

Prerequisites

• Next.js
• React
• Nodejs
• npm
• Shadcn/ui
• Tailwind CSS
• Clerk
• MongoDB
• Zod
• UploadThing
• Postman
• Stripe

Steps to Install

Set up the project locally on your machine by following these steps. Keep in mind, they are specific to using Windows.

1. Clone the Repository:

   git clone https://github.com/AmberForrester/evently
   

2. Navigate to the project directory:

   cd evently
   

3. Install Required Dependencies:

Run the following command to install the project dependencies using npm:

npm install

4. Set Up Environment Variables:

Create a new file named .env.local in the root of your project directory and add the following:

 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=
 SIGNING_SECRET=

 NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
 NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

 MONGODB_URI=

 UPLOADTHING_SECRET=
 UPLOADTHING_APP_ID=
 UPLOADTHING_TOKEN=''

 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=

 STRIPE_WEBHOOK_SECRET=

 NEXT_PUBLIC_SERVER_URL=http://localhost:3000/ or your_custom_domain

5. Add .env.local to .gitignore

[!CAUTION] To ensure your sensitive information does not get committed to version control:

• Open (or create) the .gitignore file in the root directory.
• Add the following line to the file:

  .env.local
  

This step will prevent the .env.local file from being tracked by Git and keep your sensitive credentials secure.

Special Considerations

Use the following links below to help you configure your project for seamless integrations.

1. Add custom session tokens to include additional claims in your application

Clerk - Customize Session Tokens

Add any claim to your session token that you need -

2. Sync your Clerk data to your application using webhooks

Clerk - Webhooks

Following the above documentation to subsribe to all user events -

3. Secure your webhook enpoint to receive real-time event data from Stripe:

Listen to events in your Stripe account on your webhook endpoint - Stripe - Webhook Endpoint

Register your endpoint within Stripe - Dashboard

Follow Stripe-hosted page (Next.js) using their interactive working code samples to integrate with Stripe Checkout.

[!WARNING] Make sure within your Stripe Dashboard it is set to "Test Mode"

Simulate payments with your integration using their test cards -

Stripe Test Cards

(top of page)

How to Run the Application

1. Open your terminal in the project directory and run the following command:

   npm run dev
   

2. Paste http://localhost:3000 in your browser to view the project.

(top of page)

Contributing

I have learned that contributions are the heart of what makes the open source community such an amazing place! We are constantly able to learn, grow, inspire eachother, and create incredible things. Any contributions you make are greatly appreciated, we are so lucky to be here together.

If you have a suggestion that would make this project better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please, don't forget to give the project a :star:!

I appreciate you!

(top of page)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(top of page)

Acknowledgments

Please take some time to check out the links below! I found value in each and every one of them while creating this project, so my hope is that you will to!

• Full Stack Next 14 MERN Events App - Special thank you to JavaScript Mastery for the tutorial!
• Next.js deployment documentation
• Vercel Functions
• useDropzone - uploadthing for Next.js
• Mongoose
• Best README Template
• Basic Syntax: Markdown Guide
• Formatting Syntax: GitHub
• Choose an Open Source License
• GitHub Emoji Cheat Sheet

[!TIP] Deploy your Next.js application using the Vercel Platform directly from the creators of Next.js

(top of page)