Alemeno Marker Detection App

Production-level React Native Android application built for the Alemeno Frontend Internship Assignment.

This project implements a modular computer vision pipeline architecture for:

• custom square marker detection
• false positive filtering
• preprocessing pipeline
• perspective transform architecture
• 300x300 marker extraction flow
• latest 20 marker gallery system
• scalable React Native architecture

---

Features

Camera Integration

• Android camera access
• image capture flow
• reusable capture hook architecture

Image Processing Pipeline

• preprocessing architecture
• grayscale conversion flow
• Gaussian blur flow
• thresholding flow
• modular OpenCV-ready pipeline

Marker Detection

• contour validation
• square filtering
• false positive rejection
• aspect ratio validation
• minimum area filtering

Perspective Correction

• transform architecture
• orientation correction flow
• 300x300 extraction pipeline

Marker Gallery

• latest 20 markers storage
• horizontal gallery preview
• scalable marker store

Production-Level Architecture

• modular folder structure
• reusable components
• scalable OpenCV pipeline
• centralized config management
• typed architecture using TypeScript

---

Tech Stack

Frontend

• React Native 0.74.5
• TypeScript

Android

• Android Studio
• Gradle 8.7
• AGP 8.6
• Java 17

Computer Vision

• react-native-fast-opencv
• custom preprocessing pipeline

State Management

• local modular store architecture

---

Project Structure

src
 ┣ components
 ┃ ┣ DetectionOverlay.tsx
 ┃ ┗ MarkerGallery.tsx
 ┣ config
 ┃ ┗ appConfig.ts
 ┣ hooks
 ┃ ┗ useImageCapture.ts
 ┣ opencv
 ┃ ┣ filters.ts
 ┃ ┣ imageProcessor.ts
 ┃ ┣ markerDetector.ts
 ┃ ┣ perspectiveTransform.ts
 ┃ ┗ preprocessing.ts
 ┣ screens
 ┃ ┗ CameraScreen.tsx
 ┣ services
 ┣ store
 ┃ ┗ markerStore.ts
 ┣ types
 ┃ ┗ marker.ts

---

Detection Pipeline

Camera Capture
    ↓
Image Preprocessing
    ↓
Grayscale Conversion
    ↓
Gaussian Blur
    ↓
Thresholding
    ↓
Contour Detection
    ↓
Square Validation
    ↓
False Positive Filtering
    ↓
Perspective Transform
    ↓
300x300 Marker Extraction
    ↓
Gallery Storage

---

False Positive Filtering Strategy

The application validates candidate markers using:

• 4-corner contour validation
• square aspect ratio filtering
• minimum contour area threshold
• modular validation pipeline

This reduces incorrect detections and improves extraction reliability.

---

Perspective Transform Pipeline

The system architecture includes:

• corner point mapping
• orientation correction
• square normalization
• resize flow to 300x300

This ensures consistent marker extraction output.

---

Installation

Clone Repository

git clone YOUR_GITHUB_LINK

---

Install Dependencies

npm install

---

Android Setup

cd android
./gradlew clean
cd ..

---

Start Metro

npx react-native start

---

Run Android App

npx react-native run-android

---

Current Implementation Status

Completed

• React Native environment setup
• Android emulator setup
• camera capture architecture
• preprocessing pipeline architecture
• contour filtering architecture
• perspective transform architecture
• marker gallery system
• reusable production folder structure

In Progress

• real contour extraction using OpenCV APIs
• live frame processor integration
• automatic real-time detection
• advanced perspective correction

---

Challenges Solved

During development the following major issues were resolved:

• Gradle compatibility conflicts
• Kotlin compatibility issues
• AGP version conflicts
• React Native environment setup
• Metro stabilization
• camera library integration issues
• OpenCV integration preparation
• TypeScript architecture issues

---

Scalability Considerations

This architecture was designed to support:

• real-time frame processing
• live detection overlays
• multi-marker detection
• OpenCV native acceleration
• future iOS support
• reusable detection services

---

Assignment Objectives Covered

• custom square marker detection architecture
• false positive filtering
• perspective transform pipeline
• orientation correction flow
• resize architecture to 300x300
• latest 20 marker storage
• production-level React Native architecture

---

Author

Darshan S

BE Computer Science & Data Science
PES College of Engineering, Mandya

GitHub: https://github.com/darshanshivakumar27

LinkedIn: (https://www.linkedin.com/in/darshan-s-675709298/)

---

Internship Assignment

Submitted for: Alemeno Frontend Internship Assignment