Skip to content
BranchesTags

Repository files navigation

💊 Rx-UI - Prescription Management System

A modern, offline-first prescription management application built with React and Supabase, featuring TOTP authentication and seamless online/offline synchronization.

⚠️ IMPORTANT: This project is currently NOT production-ready. See PRODUCTION_READINESS_REPORT.md for a complete security and compliance assessment before deployment.

📋 Table of Contents

✨ Features

  • 📱 Offline-First Architecture - Works without internet using IndexedDB
  • 🔄 Automatic Sync - Bi-directional sync with Supabase when online
  • 🔐 TOTP Authentication - Two-factor authentication with authenticator apps
  • 💾 Local Storage - Prescriptions cached locally for instant access
  • 🌐 Progressive Enhancement - Graceful degradation when offline
  • 📊 Real-time Sync Status - Visual indicators for connection and sync state
  • 🎨 Modern UI - Clean, mobile-responsive interface
  • ⚡ Fast Performance - Built with Vite for instant hot module reload

Prescription Management

  • Add, edit, and delete prescriptions
  • Patient information (name, age, gender)
  • Doctor details and SIP number
  • Medication lists with dosage instructions
  • Expiration tracking and status badges
  • Medication validity warnings

🛠️ Tech Stack

Frontend

  • React 19.1.1 - UI framework
  • Vite 7.1.7 - Build tool and dev server
  • TanStack Router 1.133.36 - Type-safe routing
  • Framer Motion 12.23.24 - Animations

Backend & Database

  • Supabase 2.76.1 - Backend-as-a-Service (PostgreSQL, Auth, RLS)
  • IndexedDB (idb 8.0.3) - Local database for offline support

Authentication & Security

  • OTPAuth 9.4.1 - TOTP two-factor authentication
  • QRCode 1.5.4 - QR code generation for authenticator setup

Code Quality

  • ESLint 9.36.0 - Code linting
  • React Hooks ESLint Plugin - React-specific linting rules

📦 Prerequisites

  • Node.js >= 18.0.0
  • npm >= 9.0.0
  • Supabase Account (free tier works) - Sign up here

🚀 Installation

  1. Clone the repository

    git clone https://github.com/yourusername/rx-ui.git
cd rx-ui

  2. Install dependencies

    npm install

  3. Set up environment variables

    # Copy the example env file
copy .env.example .env

# Edit .env with your Supabase credentials
# Get these from: https://supabase.com/dashboard/project/_/settings/api

  4. Configure Supabase

    • Create a new project in Supabase Dashboard
    • Copy your project URL and anon key
    • Update .env file with these values

⚙️ Configuration

Environment Variables

Create a .env file in the root directory:

# Supabase Configuration (Optional - app works offline-only without these)
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

Note: The app works in offline-only mode if Supabase is not configured. All data is stored locally in IndexedDB.

Supabase Project Settings

  1. Enable Email Authentication (if using email/password login)

    • Go to Authentication > Providers
    • Enable Email provider

  2. Set up TOTP (already implemented in app)

    • TOTP secrets are stored in totp_secrets table
    • No additional Supabase configuration needed

🗄️ Database Setup

1. Run the Schema Script

  1. Open your Supabase project
  2. Go to SQL Editor
  3. Copy the contents of supabase/schema.sql
  4. Run the SQL script

This creates:

  • totp_secrets table - Stores TOTP authentication secrets
  • prescriptions table - Stores prescription data
  • Row Level Security (RLS) policies
  • Indexes for performance
  • Triggers for auto-updating timestamps

2. Database Schema

totp_secrets

- user_email (TEXT, PRIMARY KEY)
- secret (TEXT, NOT NULL)
- created_at (TIMESTAMPTZ)
- updated_at (TIMESTAMPTZ)

prescriptions

- id (TEXT, PRIMARY KEY)
- user_id (TEXT, FOREIGN KEY -> totp_secrets.user_email)
- patient_name (TEXT, NOT NULL)
- gender (TEXT)
- age (TEXT)
- doctor_name (TEXT, NOT NULL)
- sip_number (TEXT)
- date (TEXT, NOT NULL)
- validity (TEXT)
- status (TEXT)
- medications (JSONB)
- synced (BOOLEAN)
- created_at (TIMESTAMPTZ)
- updated_at (TIMESTAMPTZ)

👨‍💻 Development

Start Development Server

npm run dev

The app will be available at http://localhost:5173 (default Vite port)

Available Scripts

Command Description
npm run dev Start development server with HMR
npm run build Build for production
npm run preview Preview production build locally
npm run lint Run ESLint to check code quality

Development Workflow

  1. First-time Setup

    • Open app, you'll see TOTP setup wizard
    • Scan QR code with authenticator app (Google Authenticator, Authy, etc.)
    • Verify with 6-digit code
    • You're logged in!

  2. Adding Prescriptions

    • Click floating + button (bottom-right)
    • Fill in patient and doctor information
    • Add medications with dosage instructions
    • Save - data is stored locally and synced to Supabase if online

  3. Viewing Sync Status

    • Check sync indicator (bottom-left)
    • Click to see detailed sync statistics
    • Manual refresh button available

🏗️ Build & Deployment

Production Build

npm run build

This creates an optimized production build in the dist/ directory.

Preview Build

npm run preview

Test the production build locally before deploying.

Deployment Options

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Netlify

# Install Netlify CLI
npm i -g netlify-cli

# Deploy
netlify deploy --prod

Manual Deployment

  1. Build the project: npm run build
  2. Upload dist/ folder to your hosting provider
  3. Configure environment variables in hosting dashboard
  4. Set up custom domain and SSL

Environment Variables in Production

⚠️ NEVER commit .env to version control!

For production:

  1. Set environment variables in hosting dashboard
  2. Use different Supabase projects for dev/staging/production
  3. Rotate credentials if accidentally exposed

📁 Project Structure

rx-ui/
├── .github/
│   └── copilot-instructions.md    # GitHub Copilot configuration
├── public/                         # Static assets
├── src/
│   ├── assets/                     # Images, fonts, etc.
│   ├── components/                 # React components
│   │   ├── ConnectionStatus.jsx
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── PrescriptionDetail.jsx
│   │   ├── PrescriptionList.jsx
│   │   ├── SyncStatus.jsx
│   │   ├── SyncStatusDropdown.jsx
│   │   └── TOTPSetup.jsx
│   ├── data/                       # Sample/seed data
│   ├── hooks/                      # Custom React hooks
│   ├── lib/                        # Core utilities
│   │   ├── auth.js                 # Authentication logic
│   │   ├── db.js                   # IndexedDB + Supabase sync
│   │   ├── supabase.js             # Supabase client config
│   │   └── utils.js                # Helper functions
│   ├── routes/                     # Route components
│   ├── App.jsx                     # Main app component
│   ├── index.css                   # Global styles
│   ├── main.jsx                    # App entry point
│   ├── PrescriptionDetail.jsx      # Legacy component
│   ├── PrescriptionList.jsx        # Legacy component
│   └── router.jsx                  # Router configuration
├── supabase/
│   └── schema.sql                  # Database schema
├── .env.example                    # Environment variables template
├── .gitignore                      # Git ignore rules
├── eslint.config.js                # ESLint configuration
├── index.html                      # HTML entry point
├── package.json                    # Dependencies and scripts
├── PRODUCTION_READINESS_REPORT.md  # Security assessment
├── README.md                       # This file
└── vite.config.js                  # Vite configuration

Key Files

  • src/lib/db.js - Core sync logic between IndexedDB and Supabase
  • src/lib/auth.js - TOTP authentication implementation
  • src/lib/supabase.js - Supabase client and connection utilities
  • supabase/schema.sql - Complete database schema with RLS

🔒 Security Considerations

⚠️ Current Security Issues

This project has critical security vulnerabilities. See PRODUCTION_READINESS_REPORT.md for details.

Critical Issues:

  1. ❌ RLS policies allow public access to all data
  2. ❌ TOTP secrets stored in plain text
  3. ❌ No input validation or sanitization
  4. ❌ Environment variables may be committed to git
  5. ❌ No rate limiting on authentication attempts

Before Production Deployment

MUST FIX:

  • Fix RLS policies with proper user authentication
  • Encrypt TOTP secrets at rest
  • Remove .env from git history (if committed)
  • Rotate all exposed credentials
  • Add input validation and sanitization
  • Implement rate limiting
  • Add error boundaries
  • Remove production console.logs
  • Set up monitoring (Sentry)
  • Configure CSP headers

HIPAA Compliance

If handling Protected Health Information (PHI) in the US:

  • Obtain Business Associate Agreement (BAA) from Supabase
  • Implement audit logging for all data access
  • Set up data retention and deletion policies
  • Configure automated backups
  • Document security controls
  • Conduct security audit

🧪 Testing

Currently: ❌ No tests implemented

Recommended Test Stack:

  • Vitest - Unit testing framework
  • React Testing Library - Component testing
  • Playwright or Cypress - E2e testing

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Code Style

  • Use ESLint configuration provided
  • Follow existing file structure patterns
  • Add JSDoc comments for complex functions
  • Keep components small and focused
  • Use descriptive variable names

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Support

For issues and questions:

🎯 Roadmap

Version 1.0 (Production Ready)

  • Fix all critical security issues
  • Add comprehensive test coverage
  • Implement proper error handling
  • Add monitoring and alerting
  • Complete documentation

Version 1.1 (Enhanced Features)

  • Multi-user support with proper auth
  • Role-based access control
  • Advanced search and filtering
  • Export prescriptions to PDF
  • Email notifications

Version 2.0 (Enterprise)

  • SSO integration
  • Audit logging
  • Advanced analytics
  • API for third-party integration
  • Mobile app (React Native)

⚡ Quick Start (TL;DR)

# Clone and install
git clone https://github.com/yourusername/rx-ui.git
cd rx-ui
npm install

# Set up environment
copy .env.example .env
# Edit .env with your Supabase credentials

# Run database setup (copy contents of supabase/schema.sql into Supabase SQL Editor)

# Start development
npm run dev

Open: http://localhost:5173

Built with ❤️ using React + Vite + Supabase

Last Updated: October 29, 2025
Version: 0.0.0 (Pre-release)

About

No description, website, or topics provided.

Resources

Readme

Security policy

Security policy
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages