Here is the folder structure of this app.
evently/
|- app/
|-- (auth)/
|--- sign-in/[[...sign-in]]/
|--- sign-up/[[...sign-up]]/
|--- layout.tsx
|-- (root)/
|--- events/
|---- [id]/update/
|---- create/
|--- orders/
|--- profile/
|--- layout.tsx
|--- page.tsx
|-- api/
|--- uploadthing/
|---- core.ts
|---- route.ts
|--- webhook/
|---- clerk/
|----- route.ts
|---- stripe/
|----- route.ts
|-- favicon.ico
|-- globals.css
|-- layout.tsx
|- components/
|-- shared/
|-- ui/
|- config/
|-- site.ts
|- constants/
|-- index.ts
|- lib/
|-- actions/
|--- category.actions.ts
|--- event.actions.ts
|--- order.actions.ts
|--- user.actions.ts
|-- database/
|--- models/
|---- category.model.ts
|---- event.model.ts
|---- order.model.ts
|---- user.model.ts
|--- index.ts
|-- uploadthing.ts
|-- utils.ts
|-- validator.ts
|- public/assets/
|-- icons/
|-- images/
|- types/
|-- index.ts
|- .env.example
|- .env.local
|- .gitignore
|- components.json
|- middleware.ts
|- next.config.js
|- package-lock.json
|- package.json
|- postcss.config.js
|- tailwind.config.ts
|- tsconfig.json- Make sure Git and NodeJS is installed.
- Clone this repository to your local computer.
- Create
.env.localfile 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
CLERK_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-depsoryarn install --legacy-peer-deps. -
Now app is fully configured 👍 and you can start using this app using
npm run devoryarn dev.
- @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.
- @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.
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.
Useful resources and dependencies that are used in Evently.
- @clerk/nextjs: ^4.28.1
- @hookform/resolvers: ^3.3.2
- @radix-ui/react-alert-dialog: ^1.0.5
- @radix-ui/react-checkbox: ^1.0.4
- @radix-ui/react-dialog: ^1.0.5
- @radix-ui/react-label: ^2.0.2
- @radix-ui/react-select: ^2.0.0
- @radix-ui/react-separator: ^1.0.3
- @radix-ui/react-slot: ^1.0.2
- @stripe/stripe-js: ^2.2.2
- @uploadthing/react: ^6.0.2
- class-variance-authority: ^0.7.0
- clsx: ^2.0.0
- lucide-react: ^0.298.0
- mongodb: ^6.3.0
- mongoose: ^8.0.3
- next: 14.0.4
- query-string: ^8.1.0
- react: ^18
- react-datepicker: ^4.24.0
- react-dom: ^18
- react-hook-form: ^7.49.2
- stripe: ^14.10.0
- svix: ^1.15.0
- tailwind-merge: ^2.1.0
- tailwindcss-animate: ^1.0.7
- uploadthing: ^6.1.0
- zod: ^3.22.4
- @types/node: ^20
- @types/react: ^18
- @types/react-datepicker: ^4.19.4
- @types/react-dom: ^18
- autoprefixer: ^10.0.1
- postcss: ^8
- tailwindcss: ^3.3.0
- typescript: ^5
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out Next.js deployment documentation for more details.
You can also give this repository a star to show more people and they can use this repository.
