HOUSE TREE PERSON (HTP) – Frontend

This is the frontend application for the House-Tree-Person (HTP), developed as part of an interdisciplinary TÜBİTAK 3005 project. The platform is powered by articial intelligence (AI) in reviewing, managing, and analyzing children's HTP drawings to help extract emotional indicators such as anxiety, depression, and aggression, contributing to clinical assessments.

✨ Features

• ⚛️ Built with React and TypeScript
• 🎨 Styled using Tailwind CSS and Shadcn UI (Radix UI)
• 🌐 Multilingual support with i18next (currently English & Turkish)
• 🔐 Role-based authentication via JWT
• 📦 Efficient data fetching and caching with React Query (TanStack Query)
• 📥 Form handling with React Hook Form and validation via Zod
• ⚡ Lazy loading for optimal performance
• 🔗 Integrated with backend APIs for user management and drawing data
• 🤝 Collaborative development with AI researchers for model integration

🧑‍🤝‍🧑 Project Context

This project is part of an interdisciplinary AI research initiative under the TÜBİTAK 3005 program. The frontend is designed to support clinical workflows, allowing psychologists and experts to interact with machine learning analyses of children's drawings in a secure and user-friendly environment.

🚀 Getting Started

Prerequisites

• Node.js ≥ 18
• npm or yarn

Installation

git clone https://github.com/makifcevik/house-tree-person-react.git
cd house-tree-person-react
npm install

Running the App

npm run dev

The app should now be running at http://localhost:3000

Environment Configuration

Create a .env file at the root with your backend API setting:

VITE_API_BASE_URL=https://your-backend-url.com/api

🧪 Technologies

• React (TypeScript)

• Vite

• Tailwind CSS

• Shadcn UI (Radix UI)

• React Hook Form + Zod

• React Query

• i18next

• JWT Authentication

This project was developed under the guidance of academic supervisors and experts in clinical psychology and artificial intelligence.