Beacon

A native usability testing and analytics platform built as a Miro application. It enables UX researchers and designers to overlay real-time heatmaps directly on Miro boards and gain AI-powered insights from user interaction data, all without leaving their design workflow.

Prerequisites

• Node.js 18.x or higher
• npm 9.x or higher(or pnpm)
• A Miro account with developer access

Getting Started

1. Clone the repository:

git clone https://github.com/dayview/beacon.git
cd beacon

Install dependencies

npm install
cd beacon-backend && npm install && cd ..
# or
pnpm install

Start the development server

Frontend and backend are separate apps (see beacon-backend/README.md for backend env setup) and both need to be running. Start both at once from the repo root:

npm run dev:all

Or run them separately in two terminals:

npm run dev           # frontend, http://localhost:5173
npm run dev:backend   # backend,  http://localhost:3001

Scripts

Command	Description
npm run dev	Starts the frontend dev server only
npm run dev:backend	Starts the backend dev server only
npm run dev:all	Starts both frontend and backend together (via concurrently)
npm run build	Builds the app for production
npm run preview	Previews the production build locally
npm run lint	Runs ESLint for code quality checks

Project Structure

beacon/
├── src/
│   ├── app/                  # Main application component
│   │   ├── App.tsx           # Root component with routing logic
│   │   └── components/       # App-specific components
│   ├── components/           # Shared/reusable UI components
│   ├── screens/              # Main application screens
│   │   ├── Dashboard.tsx
│   │   ├── LiveAnalytics.tsx
│   │   └── Comparison.tsx
│   ├── lib/                  # Utility functions and helpers
│   ├── styles/               # Global styles and fonts
│   └── main.tsx              # Application entry point
├── guidelines/               # Project guidelines and documentation
├── index.html                # HTML template
├── vite.config.ts            # Vite configuration
└── package.json              # Project dependencies

Tech Stack

Core

Package	Version	Purpose
React	18.3	UI Library
TypeScript	5.x	Type Safety
Vite	6.x	Build Tool & Dev Server

UI & Styling

Package	Purpose
Radix UI	Accessible base components
Material UI	Additional UI components
Tailwind CSS	Utility-first styling
Lucide React	Icon library

Data & Interaction

Package	Purpose
Recharts	Chart library for analytics
Motion	Animation library
React Hook Form	Form management
React DnD	Drag and drop

Contributing

Contributions are welcome! If you have suggestions or find bugs, feel free to open an issue or submit a pull request.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/your-feature-name
3. Commit your changes: git commit -m 'feat: add your feature'
4. Push to the branch: git push origin feature/your-feature-name
5. Open a Pull Request