KeyVerse 🎹

Everything can be done online these days, except finding the right piano for you without having to go to the music store.
KeyVerse is my take on tackling this problem.

(proof of concept not production app) A site that lets you test drive your piano remotely.

🔗 Live Demo: https://keyverse-abcb4.web.app/
(BTW This was Honours Information Systems Mini Project)

---

✨ Features

🤖 We gotta have AI Right?

• Gemini Integration, allowing users to search using natural language:
  • "I'm a beginner"
  • "I'm a pro and need the absolute best"
• AI Summaries of each product should you wish to have a digestible way to read specs.
• If you're even lazier, Upload a picture of a piano you saw, and if we have it in stock we will find it.

---

🎹 Virtual Tryout Experience

The idea behind this is piano players care about keybed feel, hammer action, but most importantly piano sound.

This feature allows you to use your keyboard and mouse to play the piano to preview its sound.
If it is for you, then it's a match.

You can even connect your MIDI device for a more wholistic experience, almost all piano players have some MIDI lying around.

---

🎛 Core Platform Features

• Virtual Synthesiser
  In-browser piano and synth powered by Tone.js + Web MIDI for hardware controllers

• Smart Audio Matching
  Deterministic algorithm that auto-assigns sound profiles to products

• Serverless Checkout
  Secure cart + HTML-formatted email receipts via EmailJS

• Admin Dashboard
  KPIs, Recharts visualizations, and inventory/user management

• Role-Based Access
  Secure admin portal with authentication

---

🚀 Quick Start

cd keyverse
npm install
npm run dev

Open locally: http://localhost:5173

---

⚙️ Setup

✅ Prerequisites

• Node.js

🔐 Environment Variables

Create a .env file inside the keyverse/ folder:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

---

📦 Tech Stack

Layer	Technology
Frontend	React + Vite + Tailwind CSS
Audio	Tone.js + Web Audio API
Backend	Firebase (Auth, Firestore, Hosting)
Email	EmailJS
Charts	Recharts
Routing	React Router DOM

---

🧠 Architecture Overview

User
 │
 ▼
React Frontend (Vite)
 │
 ├── Tone.js Audio Engine
 ├── Web MIDI API
 ├── Gemini AI Search
 │
 ▼
Firebase Backend
 ├── Authentication
 ├── Firestore Database
 └── Hosting
 │
 ▼
EmailJS → Receipt Delivery

🎯 Project Goal

KeyVerse explores how musical instrument shopping can move beyond static product browsing into an interactive digital experience.

Instead of imagining how a piano sounds, users can:

• Play it
• Hear it
• Match their skill level
• Decide remotely

---

Life's too short to not make music.