EasyDial

Inspiration

EasyDial was born from a deeply personal moment during my family’s annual gift exchange. This year, we played our usual game — each person drawing a name from a hat to choose someone to buy a gift for. By chance, I drew my uncle, who lives with a disability.

A few years back, I had tried to gift him a smartphone. He loved it, but the complexity of the interface made it hard for him to use independently as he cannot use his hands and feet the way I can when using the normal smartphones. Eventually, someone else in the household ended up using it more than he did. That experience stayed with me — I wanted him to have something that was truly his, and that he could use on his own.

Each time I or anyone visits him now, he eagerly asks to use their phone. Not to browse apps or scroll through news — but to call family. To check in. To reconnect. That simple act showed me that for him, connection is everything. But he doesn’t need a dozen apps or layers of complexity. He just needs a way to reach the people he loves — easily, visually, and directly.

So this years' Christmas, I’m giving him more than a gift. I’m building EasyDial: a tablet application designed specifically for people with disabilities similar ti his. With a tap on a familiar face, my uncle can start a voice call with someone he loves — no confusion, no small buttons, no long menus. Just connection.

What it does

EasyDial is a user-friendly tablet or smartphone application designed for individuals with disabilities. It allows users to:

See large, clear photo icons of their loved ones.
Start a voice call with a tap — no menus, no text-heavy screens.
Experience independence in communication through an accessible, intuitive design.
Optionally allow a caregiver or family member to manage contacts and settings.

The goal is to bring people closer through simplicity — empowering users to connect without assistance.

How we built it

To bring EasyDial to life quickly and accessibly, I’m using Bolt.new — a no-code platform ideal for building mobile-friendly apps with intuitive user interfaces. It was published live using Netlify and integrated supabase for saving contact information.

Why Bolt.new?

It's optimized for quick prototyping and deployment.
It allows drag-and-drop UI design, perfect for building accessible layouts.
It supports logic and external integrations without writing heavy code.
It helps my creativity come to like with thinking a lot about standard programming basics.

How the app is being structured:

Core Technology Stack

Frontend: React 18 + TypeScript + Vite
Styling: Tailwind CSS with custom accessibility enhancements
Database: Supabase (PostgreSQL with real-time capabilities)
Storage: Supabase Storage for contact photos
Authentication: Supabase Auth with email/password
PWA: Service Worker + Web App Manifest

src/
├── components/           # Reusable UI components
│   ├── AuthWrapper.tsx      # Authentication management
│   ├── ContactPhoto.tsx     # Main contact display component
│   ├── EditContactModal.tsx # Contact editing interface
│   ├── FaceDetectionUpload.tsx # Photo upload with validation
│   ├── CountryCodeSelect.tsx   # International phone support
│   ├── Logo.tsx             # Brand identity component
│   ├── PWAPrompt.tsx        # Progressive Web App features
│   └── TechnologyBadges.tsx # Attribution component
├── hooks/                # Custom React hooks
│   ├── useContacts.ts       # Contact data management
│   ├── usePWA.ts           # PWA functionality
│   └── useTextToSpeech.ts  # Accessibility features
├── lib/
│   └── supabase.ts         # Database configuration
└── App.tsx               # Main application component

Key Design Principles

Accessibility-First Design

Large touch targets (minimum 44px) for easy interaction
High contrast colors with WCAG compliance
Text-to-speech integration for contact names
Keyboard navigation support
Screen reader optimized markup

Visual-Centric Interface

Photo-based contacts - every contact requires a photo
Large, clear images for easy recognition
Gradient backgrounds and modern aesthetics
Smooth animations with reduced motion support

Performance Optimization

Image preloading for instant contact display
Optimized photo URLs with compression parameters
Hardware acceleration for smooth animations
Efficient re-rendering with React optimization patterns

Core Features: Contact Management

// Contacts are stored with comprehensive data
interface Contact {
  id: string;
  user_id: string;
  name: string;
  phone: string;           // International format with country code
  photo: string;           // Required - URL to contact image
  is_emergency: boolean;   // Favorite/emergency contact flag
  created_at: string;
  updated_at: string;
}

Authentication Flow

Supabase Auth with email/password
Row Level Security - users only see their own contacts
Session management with automatic token refresh
Password reset functionality
Photo Upload System
All image formats supported (JPG, PNG, GIF, WebP, HEIC, etc.)
Supabase Storage for secure cloud storage
Automatic optimization with size and quality parameters

PWA Capabilities

Installable on mobile devices and desktop
Offline functionality with Service Worker
App shortcuts for quick access to favourites
Native app experience when installed

Database Schema

-- Contacts table with RLS policies
CREATE TABLE contacts (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id uuid REFERENCES auth.users(id) ON DELETE CASCADE,
  name text NOT NULL,
  phone text NOT NULL,
  photo text DEFAULT 'fallback-image-url',
  is_emergency boolean DEFAULT false,
  created_at timestamptz DEFAULT now(),
  updated_at timestamptz DEFAULT now()
);

-- Storage bucket for contact photos
INSERT INTO storage.buckets (id, name, public)
VALUES ('contact-photos', 'contact-photos', true);

UI/UX Highlights Responsive Design

Mobile-first approach with touch-optimized interactions
Grid layouts that adapt from 2 columns (mobile) to 6 columns (desktop)
Consistent spacing using 8px grid system

Visual Hierarchy

Favourite contacts displayed prominently with heart indicators
Colour-coded sections (pink for favourites, emerald for regular)
Clear call-to-action buttons with gradient backgrounds

Micro-Interactions

Hover effects on contact photos
Scale animations on button presses
Loading states with progress indicators
Success/error feedback with animated messages

Security & Privacy

Row Level Security ensures data isolation between users
Secure file uploads with validation and size limits
HTTPS enforcement for all communications
No data tracking - privacy-focused design

Accessibility Features

Voice announcements when calling contacts
High contrast mode support
Reduced motion preferences respected
Focus management for keyboard users
Semantic HTML for screen readers

Using Bolt allows me to focus on what matters most: the user experience. It removes complexity from development while still giving me control over key interactions and flow.

Challenges we ran into

1. Image Upload Complexity The Challenge: Initially, the photo upload system was restrictive and only supported basic image formats.

2. Deployment & Infrastructure The Challenge: Getting the application properly deployed and accessible because it was my first time using Netlify.

3. Database Schema & Security The Challenge: Setting up proper data relationships and security policies because it was my first time using Supabase.

5. Progressive Web App (PWA) Integration The Challenge: Making the app feel native while remaining web-based, it was my first time learning about PWA.

6. State Management Complexity Managing contact data, upload states, authentication, and UI states simultaneously required careful coordination.

7. Cross-Browser Compatibility Ensuring the app works across different browsers, especially with PWA features and image formats.

8. Mobile-First Responsive Design Creating layouts that work seamlessly from mobile to desktop while maintaining accessibility.

9. Error Handling & User Experience Building robust error handling for network issues, upload failures, and authentication problems.

** 10. **Deploying the project to be a mobile application.

Accomplishments that we're proud of

Turning a personal moment of empathy into a tangible solution.
Designing an app that could empower not just one person, but many individuals with disabilities.
Creating an interface that’s centered around faces, not features — making connection immediate and human.
Building a tool that can truly give someone the ability to reach out to the people they love — on their own.

What we learned

Technology should be invisible when it comes to accessibility — the best design doesn’t make the user think twice.
Small features can have a big impact —tap calling sounds simple, but it can radically change someone’s sense of independence.
Empathy-driven design is not optional — it’s essential to truly inclusive technology.
Family experiences can spark real innovation — sometimes the best use case is the one closest to home.
EasyDial can be beneficial not just for disabled people but also for children and the elderly.
Basic programming skills is needed in articulating a clear prompt.