Eventrix - Event Management Platform using Next.js 14

📔 Table of Contents

Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

🧰 Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env.local file in root directory.
Contents of .env.local:

# .env.local

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk auth redirect url(s)
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# app base url
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

# mongodb database uri
MONGODB_URI="mongodb+srv://<your-db-username>:<your-db-password>@<your-cluster-url>/<your-db-name>"

# clerk webhook secret
WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXX

# uploadthing secret & app id
UPLOADTHING_SECRET=sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
UPLOADTHING_APP_ID=xxxxxxxx

# stripe keys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxx

Clerk Keys
- Visit Clerk Dashboard and create a new application.
- Copy the public and secret keys.
- Set up redirect URLs as specified in the environment variables.
- Set up a webhook and copy the secret.
Clerk Redirect URLs

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

MongoDB URI

MONGODB_URI="mongodb+srv://<your-db-username>:<your-db-password>@<your-cluster-url>/<your-db-name>"

Replace <your-db-username>, <your-db-password>, <your-cluster-url>, and <your-db-name> with your actual MongoDB credentials and database information.

Stripe
- Sign in to Stripe Dashboard and obtain your publishable and secret keys.
- Set up a webhook and copy the secret.
App Base URL

NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

Uploadthing Keys

To obtain Uploadthing keys, follow these steps:

Sign up for an Uploadthing account:
- Visit Uploadthing Signup to create an account.
Create a new application:
- Log in to your Uploadthing account.
- Navigate to the dashboard and create a new application.
Get Secret and App ID:
- Once the application is created, find or generate the Secret and App ID.

UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
UPLOADTHING_APP_ID=XXXXXXXXX

Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
Now app is fully configured 👍 and you can start using this app using npm run dev or yarn dev.

📚 Additional Resources

Production Dependencies

@clerk/nextjs: Authentication and user management for Next.js applications.
@hookform/resolvers: Resolvers for React Hook Form.
@radix-ui/react-alert-dialog: A primitive React component for creating accessible alert dialogs.
@radix-ui/react-checkbox: A primitive React component for creating accessible checkboxes.
@radix-ui/react-dialog: A primitive React component for creating accessible dialogs.
@radix-ui/react-label: A primitive React component for creating accessible labels.
@radix-ui/react-select: A primitive React component for creating accessible selects.
@radix-ui/react-separator: A primitive React component for creating accessible separators.
@radix-ui/react-slot: A primitive React component for creating slots.
@stripe/stripe-js: Stripe JavaScript library for frontend integration.
@uploadthing/react: A flexible file upload library for React.
class-variance-authority: Utility for working with class variance in TypeScript.
clsx: A tiny utility for conditionally joining class names.
lucide-react: React components for Lucide icons.
mongodb: The official MongoDB driver for Node.js.
mongoose: MongoDB object modeling for Node.js.
next: The React framework for production.
query-string: Parse and stringify URL query strings.
react: A JavaScript library for building user interfaces.
react-datepicker: A simple and reusable datepicker component for React.
react-dom: React package for working with the DOM.
react-hook-form: Performant, flexible, and extensible forms with easy-to-use validation.
stripe: Official Stripe API client for Node.js.
svix: Svix SDK for Node.js.
tailwind-merge: Merge utility for Tailwind CSS.
tailwindcss-animate: Animation utilities for Tailwind CSS.
uploadthing: A file upload library.
zod: TypeScript-first schema declaration and validation.

Development Dependencies

@types/node: TypeScript definitions for Node.js.
@types/react: TypeScript definitions for React.
@types/react-datepicker: TypeScript definitions for react-datepicker.
@types/react-dom: TypeScript definitions for ReactDOM.
autoprefixer: A plugin to parse CSS and add vendor prefixes.
postcss: A tool for transforming styles with JS plugins.
tailwindcss: A utility-first CSS framework.
typescript: TypeScript is a superset of JavaScript that adds static types to the language.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.