Quill - The SaaS for Students

📔 Table of Contents

• Folder Structure
• 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

‼️ Folder Structure

Here is the folder structure of this app.

quill/
  |- prisma/
    |- schema.prisma
  |- public/
  |- src/
    |-- app/
        |--- _trpc/
        |--- api/
        |--- auth-callback/
        |--- dashboard/
        |--- pricing/
        |--- favicon.ico
        |--- globals.css
        |--- layout.tsx
        |--- page.tsx
    |-- components/
        |--- chat/
        |--- ui/
        |--- billing-form.tsx
        |--- dashboard.tsx
        |--- delete-user-modal.tsx
        |--- icons.tsx
        |--- max-width-wrapper.tsx
        |--- mobile-nav.tsx
        |--- navbar.tsx
        |--- pdf-fullscreen.tsx
        |--- pdf-renderer.tsx
        |--- providers.tsx
        |--- upgrade-button.tsx
        |--- upload-button.tsx
        |--- user-account-nav.tsx
    |-- config/
        |--- infinite-query.ts
        |--- links.ts
        |--- message.ts
        |--- stripe.ts
    |-- db/
        |--- index.ts
    |-- lib/
        |--- validators/
        |--- openai.ts
        |--- pinecone.ts
        |--- stripe.ts
        |--- uploadthing.ts
        |--- utils.ts
    |-- trpc/
        |--- index.ts
        |--- trpc.ts
    |-- types/
        |--- message.ts
    |-- middleware.ts
  |- .env
  |- .env.example
  |- .eslintrc.js
  |- .gitignore
  |- components.json
  |- environment.d.ts
  |- next.config.mjs
  |- 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 file in root directory.
4. Contents of .env:

# .env

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# kinde keys and urls
KINDE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXX
KINDE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
KINDE_ISSUER_URL=https://example.kinde.com
KINDE_SITE_URL=http://localhost:3000
KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

# neon db uri
DATABASE_URL="postgresql://<user>:<password>@<hostname>:<port>/quill?sslmode=require"

# uploadthing api key and app id
UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
UPLOADTHING_APP_ID=xxxxxxxxxxx

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

# pinecone api key
PINECONE_API_KEY=xxxxxxxxxx-xxxxx-xxxx-xxxxxx-xxxxxxxxxxx

# openai api key
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# stripe secret key, price id and webhook secret
STRIPE_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_PRICE_ID=price_XXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

5. Next.js Telemetry

• Environment Variable: NEXT_TELEMETRY_DISABLED=1
• Instructions:
  • Open your Next.js project.
  • Locate the .env file.
  • Add or update the line NEXT_TELEMETRY_DISABLED=1 to disable Next.js telemetry.

6. Kinde

• Environment Variables:
  • KINDE_CLIENT_ID
  • KINDE_CLIENT_SECRET
  • KINDE_ISSUER_URL
  • KINDE_SITE_URL
  • KINDE_POST_LOGOUT_REDIRECT_URL
  • KINDE_POST_LOGIN_REDIRECT_URL
• Instructions:
  • Visit Kinde's website and sign in to your account.
  • Navigate to your account settings or developer dashboard to find the API credentials.
  • Retrieve the following:
    • KINDE_CLIENT_ID
    • KINDE_CLIENT_SECRET
    • KINDE_ISSUER_URL
  • For redirect URLs:
    • KINDE_SITE_URL
    • KINDE_POST_LOGOUT_REDIRECT_URL
    • KINDE_POST_LOGIN_REDIRECT_URL

7. Neon Database URI

• Environment Variable: DATABASE_URL="postgresql://<user>:<password>@<hostname>:<port>/quill?sslmode=require"
• Instructions:
  • Access your PostgreSQL database management interface.
  • Locate the database connection details.
  • Construct the URI following the provided template and replace the placeholders with your actual database credentials.

8. Uploadthing

• Environment Variables:
  • UPLOADTHING_SECRET
  • UPLOADTHING_APP_ID
• Instructions:
  • Visit the Uploadthing developer dashboard or website.
  • Log in to your account and navigate to the API or application settings.
  • Retrieve UPLOADTHING_SECRET and UPLOADTHING_APP_ID.

9. App Base URL

• Environment Variable: NEXT_PUBLIC_BASE_URL=http://localhost:3000
• Instructions:
  • Simply set NEXT_PUBLIC_BASE_URL=http://localhost:3000 in your .env file.

10. Pinecone API Key

• Environment Variable: PINECONE_API_KEY=xxxxxxxxxx-xxxxx-xxxx-xxxxxx-xxxxxxxxxxx
• Instructions:
  • Visit Pinecone's official website and log in to your account.
  • Navigate to the API or developer section to find your API key.
  • Retrieve PINECONE_API_KEY.

11. OpenAI API Key

• Environment Variable: OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
• Instructions:
  • Log in to your OpenAI account on the official website.
  • Navigate to the API or developer dashboard.
  • Retrieve your API key.

12. Stripe

• Environment Variables:
  • STRIPE_SECRET_KEY
  • STRIPE_PRICE_ID
  • STRIPE_WEBHOOK_SECRET
• Instructions:
  • Log in to your Stripe account.
  • Navigate to the API or developer section.
  • Retrieve the following:
    • STRIPE_SECRET_KEY
    • STRIPE_PRICE_ID
    • STRIPE_WEBHOOK_SECRET

13. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

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.

💎 Acknowledgements

Useful resources and dependencies that are used in quill.

• @hookform/resolvers: ^3.3.4
• @kinde-oss/kinde-auth-nextjs: ^2.2.3
• @langchain/openai: ^0.0.28
• @langchain/pinecone: ^0.0.4
• @mantine/hooks: ^7.8.0
• @pinecone-database/pinecone: ^2.2.0
• @prisma/client: ^5.12.1
• @radix-ui/react-avatar: ^1.0.4
• @radix-ui/react-dialog: ^1.0.5
• @radix-ui/react-dropdown-menu: ^2.0.6
• @radix-ui/react-progress: ^1.0.3
• @radix-ui/react-slot: ^1.0.2
• @radix-ui/react-tooltip: ^1.0.7
• @tailwindcss/typography: ^0.5.12
• @tanstack/react-query: ^5.28.14
• @trpc/client: ^11.0.0-rc.330
• @trpc/next: ^11.0.0-rc.330
• @trpc/react-query: ^11.0.0-rc.330
• @trpc/server: ^11.0.0-rc.330
• @uploadthing/react: ^6.4.4
• ai: ^3.0.21
• class-variance-authority: ^0.7.0
• clsx: ^2.1.0
• date-fns: ^3.6.0
• langchain: ^0.1.33
• lucide-react: ^0.364.0
• next: 14.1.4
• next-themes: ^0.3.0
• openai: ^4.33.0
• pdf-parse: ^1.1.1
• react: ^18
• react-dom: ^18
• react-dropzone: ^14.2.3
• react-hook-form: ^7.51.2
• react-loading-skeleton: ^3.4.0
• react-markdown: ^9.0.1
• react-pdf: ^7.7.1
• react-resize-detector: ^10.0.1
• react-textarea-autosize: ^8.5.3
• simplebar-react: ^3.2.4
• sonner: ^1.4.41
• stripe: ^15.1.0
• tailwind-merge: ^2.2.2
• tailwindcss-animate: ^1.0.7
• uploadthing: ^6.9.0
• zod: ^3.22.4
• @types/node: ^20
• @types/react: ^18
• @types/react-dom: ^18
• autoprefixer: ^10.0.1
• eslint: ^8
• eslint-config-next: 14.1.4
• postcss: ^8
• prisma: ^5.12.1
• tailwindcss: ^3.3.0
• typescript: ^5

☕ Buy Me a Coffee

🚀 Follow Me

📚 Learn More

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!

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

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

(back to top)