Anava API - Recording Management System

A comprehensive recording management system with API endpoints and a web dashboard for managing and analyzing audio recordings from mobile applications.

🚀 Features

• RESTful API for recording management (CRUD operations)
• Web Dashboard for visualizing recordings and analytics
• Daily, Weekly, and Monthly Analytics with detailed statistics
• User-based Recording Management
• Real-time Data Visualization with charts and graphs
• Responsive Modern UI built with React and TailwindCSS

📁 Project Structure

anava-api/
├── supabase/
│   ├── functions/
│   │   └── anava/
│   │       ├── index.ts          # Main API endpoints
│   │       └── Recording.kt      # Kotlin data model (reference)
│   └── migrations/
│       └── 001_create_recordings_table.sql  # Database schema
├── anava-web/                    # Netlify React app
│   ├── src/
│   │   ├── components/
│   │   │   ├── RecordingsList.tsx
│   │   │   ├── AnalyticsDashboard.tsx
│   │   │   └── ui/              # Shadcn/ui components
│   │   ├── lib/
│   │   │   ├── api.ts           # API client
│   │   │   └── utils.ts
│   │   ├── types/
│   │   │   └── index.ts         # TypeScript types
│   │   ├── App.tsx
│   │   └── main.tsx
│   ├── netlify.toml             # Netlify configuration
│   └── package.json
└── CHANGELOG.md

🔧 Installation

Prerequisites

• Node.js 18+
• Supabase CLI
• npm or yarn

Backend Setup (Supabase Function)

1. Install Supabase CLI:

   npm install -g supabase

2. Initialize Supabase (if not already done):

   supabase init

3. Start Supabase locally:

   supabase start

4. Run database migrations:

   supabase db push

5. Deploy the function:

   supabase functions deploy anava

Frontend Setup (Netlify App)

1. Navigate to the web app directory:

   cd anava-web

2. Install dependencies:

   npm install

3. Configure environment variables:

   cp .env.example .env

   Edit .env and set your Supabase URL:

   VITE_API_URL=http://localhost:54321/functions/v1  # For local development
   # or
   VITE_API_URL=https://your-project.supabase.co/functions/v1  # For production
   

4. Run the development server:

   npm run dev

📡 API Documentation

Base URL

• Local: http://localhost:54321/functions/v1/anava
• Production: https://your-project.supabase.co/functions/v1/anava

Endpoints

Health Check

GET /health

Create Recording

POST /recordings
Content-Type: application/json

{
  "userId": "user1",
  "date": "2024-01-15",
  "slotId": 1,
  "timestamp": 1705334400000,
  "amplitudesJson": "{}",
  "activityType": "meditation",
  "activityTimestamp": 1705335000000,
  "longitude": 40.7128,
  "latitude": -74.0060,
  "thumbnail": "base64_encoded_image"
}

Get All Recordings

GET /recordings?userId=user1&date=2024-01-15&limit=100&offset=0

Get Recording by ID

GET /recordings/:id

Get User Recordings

GET /recordings/user/:userId?date=2024-01-15&limit=100

Get User Analytics

GET /recordings/analytics/:userId

Response includes:

• Daily stats (today)
• Weekly stats (last 7 days with daily breakdown)
• Monthly stats (last 30 days)

Update Recording

PUT /recordings/:id
Content-Type: application/json

{
  "activityType": "updated_meditation"
}

Delete Recording

DELETE /recordings/:id

🚀 Deployment

Deploy API to Supabase

1. Configure Supabase project:

   supabase link --project-ref your-project-ref

2. Deploy function:

   supabase functions deploy anava

3. Run migrations:

   supabase db push

Deploy Web App to Netlify

1. Build the app:

   cd anava-web
   npm run build

2. Deploy using Netlify CLI:

   npm install -g netlify-cli
   netlify deploy --prod --dir=dist

   Or connect your GitHub repository to Netlify for automatic deployments.

3. Set environment variables in Netlify:

   • Go to Site Settings > Environment Variables
   • Add: VITE_API_URL = https://your-project.supabase.co/functions/v1

📊 Database Schema

The recordings table structure:

Column	Type	Description
id	SERIAL	Primary key
userId	VARCHAR(255)	User identifier
date	DATE	Recording date
slotId	INTEGER	Time slot identifier
timestamp	BIGINT	Start timestamp
amplitudesJson	TEXT	Audio amplitude data (JSON)
activityType	VARCHAR(100)	Type of activity
activityTimestamp	BIGINT	End timestamp
longitude	DECIMAL(10,7)	GPS longitude (optional)
latitude	DECIMAL(10,7)	GPS latitude (optional)
thumbnail	TEXT	Base64 encoded thumbnail (optional)
duration	INTEGER	Duration in seconds (calculated)
percentage	INTEGER	Progress percentage (calculated)
created_at	TIMESTAMP	Creation timestamp
updated_at	TIMESTAMP	Last update timestamp

🔒 Security

• Row Level Security (RLS) is enabled on the recordings table
• Users can only access their own recordings
• API endpoints validate user permissions
• CORS is configured for the web application

🛠️ Development

Running Tests

cd anava-web
npm run test

Linting

npm run lint

Type Checking

npm run type-check

📱 Mobile App Integration

The API is designed to accept data from mobile apps. The data structure matches the Kotlin Recording data class:

data class Recording(
    val id: Int,
    val date: LocalDate,
    val slotId: Int,
    val timestamp: Long,
    val amplitudesJson: String,
    val activityType: String,
    val activityTimestamp: Long,
    val longitude: Double?,
    val latitude: Double?,
    val thumbnail: ByteArray?
)

Mobile apps should:

1. Convert the Recording object to JSON
2. Send POST request to /anava/recordings endpoint
3. Include user authentication token in headers

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📝 License

This project is licensed under the MIT License.

🆘 Support

For issues and questions, please open an issue on GitHub or contact the development team.