Skip to content
/ CharityEvent Public

CharityEvent - Event Management Platform using Next.js 14

1 star 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

SultanMalik1/CharityEvent

BranchesTags

Repository files navigation

CharityEvent - Event Management Platform using Next.js 14

charityEvent-screenshot

Features of Eventbrite clone for Non Profit Organization

  • Authentication with Clerk: User management through Clerk, ensuring secure and efficient authentication.
  • Events (CRUD): Comprehensive functionality for creating, reading, updating and deleting events, giving users full control over event management.
  • Related Events: Smartly connects events that are related and displaying on the event details page, making it more engaging for users.
  • Organized Events: Efficient organization of events, ensuring a structured and user-friendly display for the audience, i.e., showing events created by the user on the user profile.
  • Event Orders: Comprehensive order management system, providing a clear overview of all event-related transactions.
  • Search & Filter: Empowering users with a robust search and filter system, enabling them to easily find the events that match their preferences.
  • Checkout and Pay with Stripe: Smooth and secure payment transactions using Stripe, enhancing user experience during the checkout process.
  • Multiple Layouts & Grouped Routes: Explore a well-organized interface with various layout options and grouped routes for intuitive navigation.
  • Responsive UI: Enjoy a responsive user interface that adapts seamlessly to different screen sizes.
  • Form Handling: Efficiently handle forms for seamless user interactions.
  • Webhooks for Authentication Service: Utilize webhooks for streamlined authentication and payment services.
  • Filter and Search Functionality: Easily filter and search across pages for quick access to relevant content.
  • Pagination: Navigate through content effortlessly with paginated views.
  • Loading UI: Experience a user-friendly loading interface for improved responsiveness.
  • SEO Optimization: Enhance discoverability.

and many more, including code architecture and reusability.

📷 Screenshots:

charityEvent-screenshot

events

Screenshot (165)

⚙️ Tech Stack

React JS Next JS Typescript Tailwind CSS Vercel MongoDB

🔧 Stats

image

📔 Table of Contents

‼️ Folder Structure

Here is the folder structure of this app.

charityEvent/
  |- 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

🧰 Getting Started

  1. Make sure Git and NodeJS is installed.
  2. Clone this repository to your local computer.
  3. Create .env.local file in root directory.
  4. 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

  1. 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.

  2. 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=/
  1. 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.

  1. Stripe

    • Sign in to Stripe Dashboard and obtain your publishable and secret keys.
    • Set up a webhook and copy the secret.

  2. App Base URL

NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000
  1. Uploadthing Keys

To obtain Uploadthing keys, follow these steps:

  1. Sign up for an Uploadthing account:

  2. Create a new application:

    • Log in to your Uploadthing account.
    • Navigate to the dashboard and create a new application.

  3. 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

  1. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

  2. Now app is fully configured 👍 and you can start using this app using npm run dev or yarn dev.

📚 Additional Resources

Production Dependencies

Development Dependencies

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

🙌 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.

💎 Acknowledgements

Useful resources and dependencies that are used in Evently.

Production Dependencies

Development Dependencies

📚 Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

📃 Deploy on Vercel

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.


(back to top)

About

CharityEvent - Event Management Platform using Next.js 14

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages