Quill - Chat with PDF

This website let's you chat with your PDF. You can upload a PDF and start asking questions to the AI.

Table of contents

• Quill - Chat with PDF
  • Table of contents
  • Overview
    • The challenge
    • Screenshots
    • Links
  • My process
    • Built with
    • Challenges I faced
  • Acknowledgements
  • Author
  • Run Locally

Overview

The challenge

Users should be able to:

• Upload a PDF to the website
• Ask questions about the PDF to AI
• Subscribe to Pro membership for larger PDF sizes

Screenshots

Homepage Desktop PDF Chat Page

Links

• Solution URL: GitHub
• Live Site URL: Quill - Chat with PDF

My process

Built with

• Next.js - The React framework for the web
• OpenAI - For responding to chat questions
• Langchain - Used to create and retrieve vectors of PDF
• Planetscale - SQL Database over http
• Drizzle ORM - ORM for interacting with database
• Pinecon - A vector database to store PDF vectors
• Uploadthing - To store PDF files
• Kinde Auth - A service for User Authentication
• tRPC - A typesafe way to handle APIs
• TanStack Query - Used as wrapper around tRPC api calls and also for Infinite query and streaming responses to chat
• React Hook Form - For managing forms on website with a lot of functionalities like error handling
• Zod - For type validations
• Stripe - For payment processing
• React PDF - Used to load PDF on client side
• Shadcn UI - UI framework for react
• Tailwind - CSS framework

Challenges I faced

• The project was originally built using Prisma ORM and it was really hard and learning journey of moving to Drizzle ORM for database interactions\
• It was really challenging to make the stream responses to the chat working properly

Acknowledgements

• Chat GPT - My developer buddy who helped me brainstorm various approaches to tackle my issues and gave solutions. (Though it frustrates sometimes when it doesn't have answer and keeps on giving same invaluable output, it was a good help overall)

Author

• Frontend Mentor - @ChaudharyPradip
• Twitter - @thePradiptalks

Run Locally

Clone the project

  git clone https://github.com/ChaudharyPradip/quill

Go to the project directory

  cd quill

Install dependencies

  pnpm install

Copy env.example as .env and fill in the required Environment variables

  cp .env.example .env

Start the server

  pnpm run dev