Inspiration

As a coffee lover and tech enthusiast, I wanted to bring a touch of smart technology to the everyday café counter. Small coffee shops often can’t afford fancy POS systems, so my goal was to blend AI with the charm of local coffee service — making it quicker, more personal, and enjoyable for both the customer and the seller.

What it does

CoffAI is an AI-powered coffee ordering and billing assistant made for the sales counter. The salesperson can pick coffee type, milk options, add-ons, discounts, and quantity while the customer watches their order update in real time. The system instantly calculates the total, creates a neat, itemized bill with the café name, customer details, date, and time — and lets them download it as a PDF in one click.

How we built it

I built CoffAI as a solo project using:

  • Bolt AI for rapid AI-driven development support.
  • Builder.io for fast and flexible UI building.
  • Frontend Framework: React (with JSX/TSX) for a clean, interactive UI.
  • Build Tool: Vite for fast builds and smooth development.
  • Language: TypeScript for safety and maintainability.
  • Styling: Tailwind CSS + PostCSS for a modern, responsive design.
  • Icons: lucide-react for lightweight, scalable icons.
  • PDF Generation: jsPDF and html2canvas for downloadable bills.
  • Linting & Code Quality: ESLint with typescript-eslint.
  • Other: Autoprefixer for cross-browser CSS support.

The AI-powered bill summary uses the OpenAI API to create short, friendly descriptions of each purchase.

Challenges we ran into

  • Tuning AI prompts so bill summaries stayed clear and friendly.
  • Designing a flexible pricing system for milk types, add-ons, and custom prices.
  • Keeping the UI fast and smooth on the lower-end devices common in small cafés.
  • Perfecting PDF layouts so bills look clean on any screen or print.

Accomplishments that we're proud of

  • Built a fully functional AI-integrated billing tool alone from scratch.
  • Created a transparent, real-time calculator both customers and staff can see.
  • Designed a simple inventory manager for milk types , coffee types and add-ons.

What I learned

  • How to make AI enhance a workflow without overwhelming the user.
  • The value of instant visual updates in building customer trust.
  • How to structure and style a project for speed, clarity, and scalability.

What's next for CoffAI

  • Multilingual AI bill summaries to reach wider audiences.
  • QR code payments for faster checkout.
  • AI-powered sales insights for café owners.
  • Offline-first mode for places with poor internet.

Built With

  • autoprefixer
  • bolt.ai
  • builder.io
  • eslint
  • html2canvas
  • jspdf
  • lucide-react
  • postcss
  • react
  • tailwind-css
  • typescript
  • typescript-eslint
  • vite
Share this project:

Updates