La Quinta Pata - Frontend

🎯 Project Overview

The Community Archive of Migrant Memories Exhibition (MACMM) is a web platform created to catalog and disseminate audiovisual records that narrate migrant experiences. The videos are organized into five thematic axes: autobiography, objects, discrimination based on origin, gender discrimination, and resistance. In addition to the catalog, the platform allows users to view the participants’ journeys to Barcelona on an interactive map and to consult general information about the project and its team. Built with React (frontend), Spring Boot (backend), and PostgreSQL (database), the application follows an MVC architecture and implements a RESTful API.

📸 Screenshots

⚙️ Technology Stack

Category	Technologies
Frontend Framework	React 19 + Vite 7
Styling	Tailwind CSS v4 + PostCSS
Routing	React Router DOM v7
State Management	React Context API (Auth, Toast)
HTTP Client	Axios with JWT Authentication
UI Components & Icons	Lucide React + React Icons
Notifications	React Hot Toast
Testing	Vitest
Version Control	Git + GitHub

✨ Features

🔓 Public Access

• Landing page with platform overview
• Hero section with call-to-action
• Features showcase
• How it works section
• Participants and collaborators information
• Video catalog browsing
• Interactive map showing participants' journeys
• Footer with links and information

🔐 Authentication

• User registration with email and password
• Secure login with JWT tokens in Authorization header
• Persistent authentication (localStorage)
• Secure logout functionality
• Password visibility toggle
• Form validation with error messages
• Admin authentication for management panel

📹 Video & Content Management

• Browse: View all videos organized by thematic axes
• Search: Find videos by title, keywords, and themes
• Filter: Filter content by categories (autobiography, objects, discrimination, gender, resistance)
• Details: View comprehensive video information and metadata
• User comments and community engagement
• Video player with controls

📍 Interactive Map

• View all participants' journeys on an interactive map
• Click marker to see Barcelona map
• Responsive design for mobile and desktop

🎛️ Admin Dashboard

• Comprehensive management panel for administrators
• Video content management (CRUD operations)
• User management
• Content moderation capabilities
• Upload and manage video content

📊 User Dashboard

• User profile and preferences
• Video content management (CRUD operations)

🔔 User Feedback

• Toast notifications for success messages
• Toast notifications for error messages
• Toast notifications for warnings
• Loading spinner during async operations
• Error boundary for handling runtime errors
• Form validation feedback

🌍 Multilingual Support

• Support for multiple languages via i18next
• Browser language detection
• Easy language switching
• Translated UI elements

📱 Responsive Design

• Mobile-first design approach
• Optimized for all screen sizes (mobile, tablet, desktop)
• Accessible navigation
• Touch-friendly interface
• 3D animated elements on landing page

🧭 Architecture

The application follows a component-based architecture with clear separation of concerns:

Directory Structure

src/
├── assets/
│   └── images/
│       ├── collaboration/
│       ├── team/
│       ├── ImagenTitulo.png
│       ├── Logo_macmm.png
│       └── map.jpg
│
├── components/
│   ├── cards/
│   │   ├── AcademicCollaboCard.jsx
│   │   ├── DevTeamCard.jsx
│   │   └── TeamCard.jsx
│   ├── login/
│   │   ├── AdminRouter.jsx
│   │   ├── Button.jsx
│   │   ├── EditProfileForm.jsx
│   │   ├── ErrorMessage.jsx
│   │   ├── FormActions.jsx
│   │   ├── FormHeader.jsx
│   │   ├── InputField.jsx
│   │   ├── LoginForm.jsx
│   │   ├── PrivateRoute.jsx
│   │   ├── RegisterForm.jsx
│   │   └── SelectField.jsx
│   ├── map/
│   │   ├── AnimatedRoute.jsx
│   │   ├── Globe.jsx
│   │   ├── GlobeExperience.jsx
│   │   └── MarkerPin.jsx
│   ├── sections/
│   │   ├── AboutUsSection.jsx
│   │   ├── Collaboration.jsx
│   │   ├── Hero.jsx
│   │   ├── Information.jsx
│   │   ├── Team.jsx
│   │   └── Title.jsx
│   ├── themes/
│   │   └── ThemeForm.jsx
│   ├── toasts/
│   │   ├── ConfirmToast.jsx
│   │   └── MyToast.jsx
│   ├── ui/
│   │   └── Pagination.jsx
│   └── videos/
│       ├── AxisSidebar.jsx
│       ├── Card.jsx
│       ├── EditVideoForm.jsx
│       ├── FormButtons.jsx
│       ├── FormField.jsx
│       ├── FormModal.jsx
│       ├── VideoActions.jsx
│       ├── VideoForm.jsx
│       └── VideoModal.jsx
│
├── context/
│   ├── AuthContext.jsx
│   └── AuthProvider.jsx
│
├── data/
│   ├── academicCollaborationData.js
│   ├── collaborationData.js
│   ├── teamData.js
│   └── webDesignData.js
│
├── hooks/
│   ├── useAuth.js
│   ├── useLoginForm.jsx
│   ├── useRegisterForm.jsx
│   ├── useVideoForm.jsx
│   └── useVideoFormData.js
│
├── layout/
│   ├── Footer.jsx
│   ├── LanguageSwitcher.jsx
│   ├── Layout.jsx
│   ├── Navbar.jsx
│   ├── PageBanner.jsx
│   ├── ScrollUpButton.jsx
│   └── Wave.jsx
│
├── pages/
│   ├── AboutUs.jsx
│   ├── Catalog.jsx
│   ├── Contact.jsx
│   ├── Dashboard.jsx
│   ├── Home.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   └── ThemesManager.jsx
│
├── router/
│   └── Router.jsx
│
├── services/
│   ├── auth.js
│   ├── axes.js
│   ├── catalogService.js
│   ├── config.js
│   ├── countries.js
│   ├── migrants.js
│   ├── themesService.js
│   ├── user.js
│   └── videos.js
│
├── tests/
│   ├── cards/
│   ├── login/
│   ├── map/
│   ├── sections/
│   ├── services/
│   ├── toasts/
│   └── videos/
│
├── translation/
│   ├── index.js
│   └── locales/
│       ├── ca/
│       └── es/
│
├── utils/
│   ├── getEmbedUrl.jsx
│   ├── latLonToXYZ.js
│   ├── videoFormConfig.js
│   └── videoHelpers.js
│
├── App.jsx
└── main.jsx

🚀 Getting Started

Prerequisites

• React 19
• npm ≥ 10.x
• Backend server running on http://localhost:8080

Installation

1. Clone the repository

git clone https://github.com/La-Quinta-Pata/front.git
cd front

2. Install dependencies

npm install

3. Configure environment variables Create a .env.local file in the root directory:

VITE_API_BASE_URL=http://localhost:8080/api

4. Start the development server

npm run dev

The application will be available at http://localhost:5173

🧪 Testing

The project includes comprehensive tests:

# Run all tests
npm test

📝 Git Workflow

The project uses feature branch workflow:

• main - Production-ready code
• dev - Development integration branch
• feature/* - Feature branches for new functionality
• fix/* - Bug fix branches
• chore/* - Maintenance and polish branches

👥 Team Members

Role	Name	GitHub	LinkedIn
🧠 Product Owner & Developer	Suraya Mattar	GitHub	LinkedIn
🧩 Scrum Master & Developer	Daniella Pacheco	GitHub	LinkedIn
💻 Developer	Ana Aguilera	GitHub	LinkedIn
💻 Developer	Montserrat Muñoz	GitHub	LinkedIn
💻 Developer	Estefanía Secanell	GitHub	LinkedIn
💻 Developer	Mio Ogura	GitHub	LinkedIn