Mapa Mental

Introduction

The "Mapa Mental" project aims to create a comprehensive mental map that guides users through the chronological steps and actions required to enroll in a university in Spain, obtain a study and work visa, secure accommodation, purchase an airline ticket, and manage necessary documents.

System Overview

The system will provide a structured and interactive mental map that outlines each step in the process of enrolling in a Spanish university and related tasks. This will serve as a guide for users to ensure they complete all necessary actions in the correct order.

Functional Requirements as Story Points

• As a User, I should be able to view a chronological list of steps for enrolling in a university in Spain.
• As a User, I should be able to access detailed information on obtaining a study and work visa.
• As a User, I should be able to find guidance on securing accommodation in Spain.
• As a User, I should be able to view steps for purchasing an airline ticket to Spain.
• As a User, I should be able to manage and track necessary documents for the entire process.

User Personas

• Prospective Student: Individuals planning to enroll in a university in Spain and requiring guidance through the entire process.
• International Advisor: Professionals assisting students with the enrollment and visa process.

Core User Flows

• Prospective Student reviews enrollment steps -> gathers required documents -> applies for university admission -> receives acceptance -> applies for a study and work visa -> secures accommodation -> purchases airline ticket -> prepares for travel.
• International Advisor provides guidance -> assists with document preparation -> supports visa application process -> helps in finding accommodation.

Visuals Colors and Theme

• primary: #1E90FF (Dodger Blue)
• primary_light: #87CEFA (Light Sky Blue)
• secondary: #FF6347 (Tomato)
• accent: #32CD32 (Lime Green)
• highlight: #FFD700 (Gold)
• bg: #F5F5F5 (White Smoke)
• surface: rgba(255, 255, 255, 0.8)
• text: #333333 (Dark Gray)
• text_muted: #777777 (Gray)
• border: rgba(0, 0, 0, 0.1)

Signature Design Concept

The homepage will feature an interactive "Journey Map" where users can visually navigate through the steps of the enrollment process. Each step will be represented as a node on a path, with animations that highlight the current step and provide detailed information upon clicking. The map will have a dynamic background that changes color as users progress, creating an engaging and immersive experience. This will be implemented using framer-motion for smooth animations and transitions.

Interaction Model & Motion Direction

The landing page will adopt a "parallax" interaction model, providing a layered depth experience as users scroll through the journey map. Decorative elements will move at different speeds to create a sense of depth, while the main content remains in the natural flow. This approach will enhance storytelling and provide a visually rich first impression.

Non-Functional Requirements

• The system should be responsive and accessible on both desktop and mobile devices.
• The system should load quickly and efficiently, with minimal latency.
• The system should ensure data privacy and security for all user information.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• AI Tools: Not applicable
• Orchestration: Docker and Kubernetes for deployment

Assumptions and Constraints

• Users have access to the internet and a compatible device to access the system.
• The system will only provide guidance and not handle actual applications or document submissions.
• The information provided will be accurate and up-to-date based on current Spanish university and visa requirements.

Glossary

• Node: A point on the journey map representing a specific step in the process.
• Parallax: A scrolling technique that creates an illusion of depth by moving background images slower than foreground images.
• Framer-motion: A library used for creating animations and transitions in React applications.