Trello Clone

Database Design (ERD)

Screenshots

Technologies Used

• Frontend Framework: Next.js - server actions
• Styling: Tailwind CSS
• ORM: Prisma ORM
• Database: MongoDB
• Authentication: NextAuth.js
• Data Fetching and Query: SWR
• State Management: Zustand
• UI Components: Shadcn
• Drag&Drop: dnd-kit
• File Storage: AWS S3
• Payment: Stripe

Environment Variables

NODE_ENV="development"
DATABASE_URL="mongodb+srv://<username>:<password>@<cluster>/<database>"
AUTH_SECRET=<your_auth_secret_key>

# Auth Providers
GITHUB_CLIENT_ID=<your_github_client_id>
GITHUB_CLIENT_SECRET=<your_github_client_secret>
GOOGLE_CLIENT_ID=<your_google_client_id>
GOOGLE_CLIENT_SECRET=<your_google_client_secret>

# AWS S3
AWS_BUCKET_REGIONN=
AWS_S3_ACCESS_KEY=
AWS_SECRET_ACCESS_KEY=
AWS_BUCKET_NAMEE=

# App URLs
NEXT_PUBLIC_APP_MAIN_URL=<your_app_main_url>
NEXT_PUBLIC_APP_URL=<your_app_url>

# Stripe
STRIPE_PUBLISHED_KEY=<your_stripe_published_key>
STRIPE_SECRET_KEY=<your_stripe_secret_key>
STRIPE_WEBHOOK_SECRET=<your_stripe_webhook_secret>

Getting Started

1. Clone the repository:

   git clone https://github.com/AbdelrahmanAbounida/trellofy.git

2. Install dependencies:

   cd trello-clone
   bun install

3. Set up the environment variables:

   Create a .env file based on the provided template and set up the required environment variables.

4. Run the development server:

   bun run dev

5. Open the Application:

   Open http://localhost:3000 in your browser to see the application.

Folder Structure

- src
  - actions: Contains server actions.
  - app: Main routes of the application.
    - auth: Authentication-related routes.
    - main: Main routes of the application.
  - api/auth/[...nextauth]: NextAuth.js authentication endpoint.
- components: Reusable UI components.
- const: Constants and configurations.
- hooks: Custom React hooks.
- lib: Utility functions and libraries.
- schemas: Prisma ORM schemas.