iAlerta – Front-end

Overview

This repository contains the front-end of iAlerta, a web application designed to detect AI-generated content in texts, images and files.

The front-end focuses on performance, strong typing and maintainability, providing a clear user experience and reliable communication with the back-end API.

The project is built with React + Vite + TypeScript, using TailwindCSS to deliver a clean, responsive, and scalable user interface, ready to integrate with multiple AI detection APIs.

Techologies Used

• React — Main library for building the UI
• Vite — Fast and lightweight bundler
• TypeScript — Static typing for better safety and scalability
• TailwindCSS — Utility-first CSS framework
• React Router — Routing management

Project Goal

• Detect content potentially generated by Artificial Intelligence
• Provide a simple, intuitive, and modern user interface
• Centralize multiple types of content analysis in one platform
• Enable easy integration with external AI detection APIs
• Serve as a scalable base for future features (dashboard, history, reports, etc.)

Best Practices

• Component-based architecture
• Strong typing with TypeScript
• Clear separation between business logic and UI
• Error handling and loading states
• Consistent styling with Tailwind CSS

Project Architecture

📁 src/
┣ 📁 components/      → Reusable UI components
┣ 📁 pages/           → Application pages / screens
┣ 📁 adapters/        → Data adapters between layers
┣ 📁 hooks/           → Custom React hooks
┣ 📁 services/        → Services (APIs, Axios, configs)
┣ 📁 providers/       → Global Context Providers
┣ 📁 reducers/        → Context API reducers
┣ 📁 types/           → Global types (DTOs, interfaces, enums)
┣ 📁 models/          → Domain models
┣ 📁 router/          → Routing configuration (React Router)
┣ 📁 templates/       → Base UI layouts
┣ 📁 utils/           → Utility functions and helpers
┣ main.tsx            → Application entry point
┗ App.tsx             → Main app configuration

Getting Started

1. Clone the repository

git clone https://github.com/ryannardelli/IAlerta_front_end.git

2. Navigate to the project directory

cd IAlerta_front_end

3. Install dependencies

npm install

4. Run the project in development mode

npm run dev

The application will be available at:

http://localhost:5173