Whiteboard · Code Diagrams · AI Study Planner — 100% Free Forever
| Feature | Description |
|---|---|
| Infinite Canvas | Pan, zoom, draw on an infinite dark canvas with no size limits |
| 9 Drawing Tools | Rectangle, circle, arrow, pencil, text, eraser, select and pan |
| Auto-Save | Everything saved instantly in your browser, no account needed |
| Export Anywhere | Export as PNG, SVG, PDF or .antigravity JSON files |
| Multiple Boards | Unlimited canvas boards — create, name and switch in one click |
| Dev Templates | Flowcharts, DB schemas, DSA visualizations ready to use |
| Keyboard Shortcuts | Every tool has a hotkey: Ctrl+Z undo, Delete, Ctrl+A select all |
| Code to Diagram | Paste code and get an instant class diagram — 12+ languages |
| AI Study Planner | Smart timetable, spaced repetition, streak tracker, 100% offline |
| Firebase Auth | Google and email sign-in to protect your boards |
Sketchbyte is a PWA (Progressive Web App) — install it like a native app on any platform in under 60 seconds. No App Store required.
| Platform | Method |
|---|---|
| Android | Chrome > Menu (three dots) > Add to Home Screen |
| iPhone / iPad | Safari > Share > Add to Home Screen |
| Windows | Chrome or Edge > Install icon in address bar |
| macOS | Chrome > Install icon in address bar |
Full install guide: sketchbyte.vercel.app/download
Every version tag automatically builds a signed .apk via GitHub Actions (Bubblewrap TWA):
git tag v1.0.0
git push origin v1.0.0The APK will appear under Releases within ~5 minutes.
| Store | Link | Status |
|---|---|---|
| GitHub Releases | View Releases | Auto-published on tag |
| Aptoide | Developer Portal | Upload APK manually |
| APKPure | Developer Portal | Upload APK manually |
- Node.js 18+
- npm or yarn
# Clone the repo
git clone https://github.com/dhruva8214/Sketchbyte-Notes-Taking-App.git
cd Sketchbyte-Notes-Taking-App
# Install dependencies
npm install
# Start dev server
npm run devnpm run buildOutput goes to dist/. Ready to deploy on Vercel, Netlify, or any static host.
The workflow in .github/workflows/release.yml automatically builds a signed APK on every v* tag push.
1. Generate your signing keystore (requires Java):
.\scripts\generate-keystore.ps12. Add 4 GitHub Secrets — go to repo > Settings > Secrets > Actions:
| Secret | Value |
|---|---|
KEYSTORE_BASE64 |
Contents of keystore-base64.txt |
KEY_ALIAS |
sketchbyte |
KEYSTORE_PASSWORD |
Your chosen password |
KEY_PASSWORD |
Your chosen key password |
3. Publish a release:
git tag v1.0.0
git push origin v1.0.0Important: Never commit
*.keystoreorkeystore-base64.txtto Git — they are already in.gitignore.
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build Tool | Vite 7 |
| Canvas | Konva / React-Konva |
| Styling | Vanilla CSS + inline styles |
| Auth | Firebase (Google + Email) |
| PWA | vite-plugin-pwa + Workbox |
| Android | Bubblewrap TWA via GitHub Actions |
| State | Zustand |
| Router | React Router v7 |
| Deploy | Vercel |
src/
├── pages/
│ ├── Landing.tsx # Home page
│ ├── DownloadPage.tsx # Download and install guide
│ ├── CanvasApp.tsx # Whiteboard app
│ ├── CodeToDiagramPage # Code to Class Diagram tool
│ ├── StudyPlannerPage # AI Study Planner
│ └── AuthPage.tsx # Login / Register
├── canvas/ # Konva canvas components
├── components/ # Shared UI components
├── store/ # Zustand state stores
├── utils/ # Diagram generator, code parser
└── firebase/ # Firebase config and auth
.github/workflows/
└── release.yml # Auto APK build and GitHub Release
scripts/
└── generate-keystore.ps1 # Android signing key generator
twa-manifest.json # Bubblewrap TWA configuration
Sketchbyte is deployed on Vercel with automatic deployments from main.
Built with love by Dhruva M — Think Without Limits.
Sketchbyte is 100% free, forever. No paywalls, no subscriptions. Built for students, by a student.