Noma - Melanoma/Skin Cancer Detection App

▒█▀▀▄ █▀▀ █▀▀ █▀▀ █▀▀█ ░▀░ █▀▀█ ▀▀█▀▀ ░▀░ █▀▀█ █▀▀▄
▒█░▒█ █▀▀ ▀▀█ █░░ █▄▄▀ ▀█▀ █░░█ ░░█░░ ▀█▀ █░░█ █░░█
▒█▄▄▀ ▀▀▀ ▀▀▀ ▀▀▀ ▀░▀▀ ▀▀▀ █▀▀▀ ░░▀░░ ▀▀▀ ▀▀▀▀ ▀░░▀

Noma is an AI-powered skin cancer detection app built with React Native and Expo. Skin cancer is the #1 most diagnosed cancer in the world, and accessing a dermatologist can take weeks to months. We aim to solve this by providing a tool for early screening and detection. Simply point your camera at a suspicious skin lesion and receive instant analysis across seven diagnostic categories—from melanoma and basal cell carcinoma to benign moles—with color-coded severity indicators (red/yellow/green) and confidence scoring. Powered by a deep learning model trained on the HAM10000 dermoscopic dataset and enhanced with Google Gemini for natural language explanations, Noma aims to make early skin cancer screening accessible to everyone, with a 83% accuracy rate on a random selection of images across the internet.

▒█░░░ █▀▀ █▀▀█ █▀▀█ █▀▀▄ 　 ▒█▀▄▀█ █▀▀█ █▀▀█ █▀▀
▒█░░░ █▀▀ █▄▄█ █▄▄▀ █░░█ 　 ▒█▒█▒█ █░░█ █▄▄▀ █▀▀
▒█▄▄█ ▀▀▀ ▀░░▀ ▀░▀▀ ▀░░▀ 　 ▒█░░▒█ ▀▀▀▀ ▀░▀▀ ▀▀▀

RPReplay_Final1769336934.MOV

▒█▀▀▀█ ▒█░░▒█ ░█▀▀█ ▒█▀▄▀█ ▒█▀▀█ ▒█░▒█ ░█▀▀█ ▒█▀▀█ ▒█░▄▀ 　 ▀▄▒▄▀ ▀█▀
░▀▀▀▄▄ ▒█▒█▒█ ▒█▄▄█ ▒█▒█▒█ ▒█▄▄█ ▒█▀▀█ ▒█▄▄█ ▒█░░░ ▒█▀▄░ 　 ░▒█░░ ▒█░
▒█▄▄▄█ ▒█▄▀▄█ ▒█░▒█ ▒█░░▒█ ▒█░░░ ▒█░▒█ ▒█░▒█ ▒█▄▄█ ▒█░▒█ 　 ▄▀▒▀▄ ▄█▄

UF SwampHacks XI Listing: https://devpost.com/software/noma-t0ysng

Features

• Interactive Health Dashboard: View weekly health summaries with real-time metrics
• Dynamic HRV Chart: Interactive Heart Rate Variability visualization with live data updates
• AI-Powered Skin Analysis: Capture and analyze skin conditions using machine learning
• Health Score Tracking: Monitor your overall health at a glance
• User Personalization: Sign-in system with personalized greetings and data
• Camera Integration: Built-in camera with crosshair overlay for precise skin imaging
• Cross-Platform Support: Native iOS, Android, and web support

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI: npm install -g expo-cli
• iOS Simulator (macOS & Xcode) or Android Emulator (Android Studio) for mobile testing

Getting Started

1. Install dependencies

   npm install

2. Start the development server

   npm start

3. Run on your platform

   • iOS Simulator: Press i
   • Android Emulator: Press a
   • Web Browser: Press w

Project Structure

noma/
├── app/                          # Application screens and layouts
│   ├── (tabs)/                  # Main tabbed navigation
│   │   ├── index.tsx            # Home screen - health dashboard
│   │   ├── explore.tsx          # Camera and analysis screen
│   │   └── _layout.tsx          # Tab navigation layout
│   ├── questions/               # Assessment questionnaire flow
│   │   ├── index.tsx
│   │   ├── question-1.tsx
│   │   ├── question-2.tsx
│   │   └── question-3.tsx
│   ├── _layout.tsx              # Root layout and navigation
│   ├── sign-in.tsx              # Authentication
│   ├── loading.tsx              # Loading screen with image processing
│   ├── intro.tsx                # Introduction screen
│   ├── modal.tsx                # Modal screens
│   └── analytics.tsx            # Analytics view
├── components/                   # Reusable UI components
│   ├── ui/                      # Generic UI components
│   │   ├── collapsible.tsx
│   │   └── icon-symbol.tsx
│   ├── questions/               # Question-specific components
│   │   ├── question-screen.tsx
│   │   ├── pill-button.tsx
│   │   └── scroll-picker.tsx
│   ├── home/                    # Home screen components
│   │   └── hrv-chart-placeholder.tsx
│   └── ...                      # Other components
├── contexts/                     # React Context state management
│   ├── user-context.tsx         # User data and authentication
│   └── questions-context.tsx    # Questions completion state
├── hooks/                        # Custom React hooks
│   ├── use-color-scheme.ts      # Theme/color management
│   ├── use-color-scheme.web.ts  # Web-specific theming
│   └── use-theme-color.ts       # Theme utilities
├── tools/                        # Utility and integration code
│   ├── ai.ts                    # AI integration utilities
│   └── huggingface.tsx          # HuggingFace API integration
├── constants/                    # App-wide constants
│   └── theme.ts                 # Color and design tokens
├── assets/                       # Static assets
│   ├── images/                  # PNG/JPG images and icons
│   ├── fonts/                   # Custom font files
│   └── svg/                     # SVG vector graphics
├── scripts/                      # Build and automation scripts
│   └── reset-project.js
├── package.json                  # Dependencies and scripts
└── tsconfig.json                 # TypeScript configuration

Technologies Used

• React Native - Cross-platform mobile framework
• Expo - Development platform and build tools
• Expo Router - File-based navigation system
• React Native SVG - Vector graphics and animations
• Expo Camera - Camera access and image capture
• Expo Linear Gradient - Gradient backgrounds
• React Context API - State management
• HuggingFace - AI model integration
• TypeScript - Type-safe development
• React Native Safe Area Context - Safe area handling

Key Screens

Home Screen (app/(tabs)/index.tsx)

• Weekly health summary display
• Interactive HRV Chart: Tap to refresh with new data
• Health score visualization
• Recent scans carousel
• Floating action button for assessments

Camera/Explore Screen (app/(tabs)/explore.tsx)

• Real-time camera preview
• Centered crosshair overlay for positioning
• Camera flip functionality
• Capture button with image processing
• Error handling and feedback
• Gated access - requires completed questionnaire

Questions Flow (app/questions/)

• Multi-step assessment questionnaire
• Pill-button selections
• Scroll picker for options
• Progress tracking with context

Sign-In Screen (app/sign-in.tsx)

• User authentication
• Name input and personalization
• Session management

Available Commands

npm start          # Start development server with tunnel
npm run android    # Run on Android device/emulator
npm run ios        # Run on iOS simulator/device
npm run web        # Run on web browser
npm run lint       # Run ESLint checks
npm run reset-project  # Reset to blank project

Design System

Color Palette:

• Primary Gradient: #A7BAEB → #F6F3F1
• Accent: #4A9B9B (Teal)
• Text: #000000 (Black)
• Secondary: #999999 (Gray)
• Background: #F6F3F1 (Light)

Typography:

• Headings: Clash Display
• Body: Satoshi Medium

State Management

User Context

Manages user information and authentication state:

• User name and profile
• Session status
• User preferences

Questions Context

Tracks assessment completion:

• Question responses
• Completion status
• Answer history

Camera & Image Processing

The explore screen handles:

• Camera permission requests
• Image capture with quality settings
• Image cropping for focused analysis
• Automatic navigation to processing screen
• Error handling and user feedback

AI Integration

Uses HuggingFace models for:

• Skin condition analysis
• Image classification
• Health metric prediction

Access Control

• Questions must be completed before accessing camera screen
• Automatic redirect if requirements not met
• Context-based permission gating

Troubleshooting

Camera Permission Issues

• Check device settings for camera permissions
• Ensure app has been granted permissions

Module Not Found

npm install

Dependency Conflicts

npm install --legacy-peer-deps

Expo Tunnel Connection Issues

npm start --clear

Development Tips

• Use React DevTools for component debugging
• Check Expo Go for quick testing on physical devices
• Use TypeScript for type safety
• Leverage Context API for global state needs
• Keep components in their respective folders

Future Enhancements

• Backend database integration
• Historical data tracking and trends
• Advanced health analytics
• Push notifications
• Social features and sharing
• Offline support
• Dark mode theme
• Multi-language support

Resources

• Expo Documentation
• React Native Docs
• TypeScript Handbook
• HuggingFace API

License

This project is part of the Noma health monitoring initiative.

Contributing

Contributions are welcome! Please ensure code follows the ESLint configuration and TypeScript standards.