Skin Disease Detection App: A React Native mobile app that uses Computer Vision API to detect skin diseases

Overview

1. Server Architecture

For the development of the server-side functions for our skin disease detection app, we use the following technical stacks:

• NodeJs Express Framework (for utility API)
• Flask Framework (for providing skin disease detection API)
• Firebase Authentication (for authentication)
• Firebase Storage (for image storage)
• Hasura GraphQL Engine (for providing instant GraphQL & REST APIs on existing PostgreSQL data source)
• PostgreSQL & nhost (for hosting PostgreSQL database)

2. Client Architecture

For our skin disease detection app, we use React Native (with Expo) as the main framework for developing our graphical interface. The details of our core libraries are:

• React Native: core UI framework
• Expo Go: open-source client for testing React Native apps on Android and iOS without building app locally
• NativeBase: UI library, providing styled components
• react-native-paper: UI library, providing Material UI styled components
• react-navigation: routing and navigation for Expo and React Native apps

3. Skin Disease Detection API

The skin disease detection system that our team develops and is integrated in our app utilizes a combination of a Deep Learning model (DenseNet, InceptionNet, ResNet, etc) with Soft-Attention, which unsupervisedly extract a heat map of main skin lesions to identify patterns associated with different diseases.

Details about our skin diseases detection system can be found in this paper:

Nguyen, V.D.; Bui, N.D.; Do, H.K. Skin Lesion Classification on Imbalanced Data Using Deep Learning with Soft Attention. Sensors 2022, 22, 7530. https://doi.org/10.3390/s2219753

Demo

1. Login/Register Screens

2. Patient Screens

3. Doctor Screens