Frontend Deployment - Kin Conecta

Overview

The Kin Conecta frontend is built with vanilla JavaScript, HTML5, CSS3, and Bootstrap 5. It provides a responsive web interface for tourists and guides to interact with the platform.

Tech Stack

HTML5

Semantic markup for all pages and components

CSS3

Custom styles with modern CSS features

JavaScript

Vanilla JavaScript (ES6+) for interactivity

Bootstrap 5

Responsive framework for UI components

Frontend Structure

The frontend is organized as a static web application:

KinConecta/
├── index.html                    # Landing page
├── frontend/
│   └── src/
│       ├── pages/                # Application pages
│       │   ├── login/
│       │   │   ├── login.html
│       │   │   └── register.html
│       │   ├── profiler/
│       │   │   └── profiles-wizard.html
│       │   ├── Dashboard/
│       │   │   ├── turista/      # Tourist dashboard pages
│       │   │   │   ├── mainUserTourist.html
│       │   │   │   ├── profileTourist.html
│       │   │   │   ├── profileTouristEdit.html
│       │   │   │   ├── explore.html
│       │   │   │   ├── trips.html
│       │   │   │   ├── favorites.html
│       │   │   │   ├── reviewsTourist.html
│       │   │   │   └── help.html
│       │   │   └── guia/         # Guide dashboard pages
│       │   │       ├── mainUserGuide.html
│       │   │       ├── profileGuide.html
│       │   │       ├── profileGuideEdit.html
│       │   │       ├── tours.html
│       │   │       ├── calendar.html
│       │   │       ├── incomes.html
│       │   │       ├── reviewsGuide.html
│       │   │       └── helpGuide.html
│       │   └── aboutus.html
│       ├── components/            # Reusable components
│       │   ├── tourist-sidebar.html
│       │   ├── guide-sidebar.html
│       │   ├── guide-chat-widget.html
│       │   ├── language-modal.html
│       │   ├── security-settings-modal.html
│       │   └── legal/
│       │       ├── privacy-policy.html
│       │       ├── terms-of-service.html
│       │       ├── site-map.html
│       │       └── help-center.html
│       ├── assets/               # Images, icons, media
│       ├── css/                  # Stylesheets
│       ├── js/                   # JavaScript files
│       └── lib/                  # Third-party libraries

Development Server

Since this is a static web application, you can serve it using any HTTP server.

Navigate to Frontend Directory

cd KinConecta

Choose a Server Method

Select one of the following methods to serve the frontend:

Option 1: Python HTTP Server

# Serve on port 8000
python -m http.server 8000

# Or specify a different port
python -m http.server 3000

Access at: http://localhost:8000

Option 2: Node.js HTTP Server

Install http-server globally:

npm install -g http-server

Then run:

http-server -p 8000

Access at: http://localhost:8000

Option 3: PHP Built-in Server

php -S localhost:8000

Access at: http://localhost:8000

Option 4: Live Server (VS Code)

If using Visual Studio Code:

Install the “Live Server” extension
Right-click on index.html
Select “Open with Live Server”

The page will open automatically with hot reload enabled.

Option 5: Local Web Server (XAMPP/WAMP/MAMP)

Copy the KinConecta folder to your web server’s document root:
- XAMPP: C:\xampp\htdocs\
- WAMP: C:\wamp\www\
- MAMP: /Applications/MAMP/htdocs/
Start the web server
Access at: http://localhost/KinConecta/

Connecting to the Backend

The frontend makes API calls to the Spring Boot backend. Ensure the backend is running before using the frontend.

API Configuration

In your JavaScript files, configure the API base URL:

const API_BASE_URL = 'http://localhost:8080';

// Example API call
fetch(`${API_BASE_URL}/api/users`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Ensure the backend API is running on http://localhost:8080 before testing frontend functionality that requires data.

Key Features

User Roles

The application supports three user roles:

Tourist - Browse destinations, book tours, leave reviews
Guide - Create tours, manage calendar, respond to bookings
Admin - System administration (future feature)

Tourist Dashboard

Tourists have access to:

Explore - Search and filter tours by destination and interests
Trips - View and manage bookings
Favorites - Saved guides and tours
Reviews - Leave feedback on completed experiences
Profile - Edit personal information and preferences
Help - Access support and FAQs

Guide Dashboard

Guides have access to:

Profile - Showcase expertise and experience
Tours - Create and manage tour offerings
Calendar - Manage availability and bookings
Incomes - Track earnings and payments
Reviews - View and respond to tourist feedback
Help - Guide-specific support resources

Compatibility Profiler

The platform includes a unique profiler wizard (profiles-wizard.html) that:

Analyzes compatibility between tourists and guides
Generates personalized recommendations
Considers travel style, interests, pace, and logistics
Based on a proprietary matching algorithm

The profiler is designed to optimize travel experiences and increase satisfaction for both tourists and guides.

Building for Production

Since this is a static site, there’s no build process required. However, consider these optimization steps:

Minify JavaScript

Use a tool like Terser to minify JavaScript files:

npm install -g terser
terser app.js -o app.min.js -c -m

Minify CSS

Use a tool like cssnano or clean-css:

npm install -g clean-css-cli
cleancss -o styles.min.css styles.css

Optimize Images

Compress images using tools like ImageOptim, TinyPNG, or sharp:

npm install -g sharp-cli
sharp -i input.jpg -o output.jpg --mozjpeg

Enable Caching

Configure your web server to enable browser caching for static assets.

Deployment Options

Static Hosting Services

Deploy the frontend to any static hosting service:

Netlify

Connect your Git repository
Set build command: none
Set publish directory: KinConecta
Deploy automatically on push

Vercel

Import your project
Configure root directory
Deploy with one click
Get automatic HTTPS

GitHub Pages

Push code to GitHub
Enable Pages in repo settings
Select branch and folder
Access at username.github.io/repo

Firebase Hosting

Install Firebase CLI
Run firebase init
Deploy with firebase deploy
Get custom domain support

Traditional Web Hosting

For shared hosting or VPS:

Upload Files - Transfer all files via FTP/SFTP to your web root
Configure Domain - Point your domain to the server
Set Permissions - Ensure files are readable (644 for files, 755 for directories)
Test - Access your domain and verify functionality

CORS Configuration

If the frontend and backend are on different domains, you’ll need to configure CORS in the backend. In your Spring Boot application, add:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8000", "https://yourdomain.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

Environment-Specific Configuration

Create different API endpoint configurations for different environments:

const API_BASE_URL = 'http://localhost:8080';

Testing the Frontend

Start the Development Server

Use any of the methods described above to serve the frontend.

Start the Backend API

Ensure the Spring Boot backend is running:

cd backendKC
./gradlew bootRun

Test Landing Page

Open your browser and navigate to:

http://localhost:8000/index.html

Test Authentication

Navigate to the login page:

http://localhost:8000/frontend/src/pages/login/login.html

Test User Dashboards

After logging in, test tourist and guide dashboard pages to ensure API integration works correctly.

Troubleshooting

API Connection Errors

If the frontend cannot connect to the backend:

Verify the backend is running on http://localhost:8080
Check browser console for CORS errors
Ensure API base URL is correct in JavaScript files
Test API endpoints directly with cURL or Postman

Pages Not Loading

If pages are blank or not loading:

Check browser console for JavaScript errors
Verify all file paths are correct (case-sensitive on Linux)
Ensure all dependencies (Bootstrap, etc.) are loaded
Check network tab for failed resource requests

Styling Issues

If styles are not applied:

Verify CSS files are in the correct location
Check that Bootstrap CSS is loaded
Inspect elements to see which styles are applied
Clear browser cache and hard refresh (Ctrl+Shift+R)

Next Steps

Configuration - Configure API endpoints and environment settings
Database Setup - Ensure data is properly seeded for testing
Test user workflows end-to-end
Customize branding and styles

Setup

​Overview

​Tech Stack

HTML5

CSS3

JavaScript

Bootstrap 5

​Frontend Structure

​Development Server

​Option 1: Python HTTP Server

​Option 2: Node.js HTTP Server

​Option 3: PHP Built-in Server

​Option 4: Live Server (VS Code)

​Option 5: Local Web Server (XAMPP/WAMP/MAMP)

​Connecting to the Backend

​API Configuration

​Key Features

​User Roles

​Tourist Dashboard

​Guide Dashboard

​Compatibility Profiler

​Building for Production

​Deployment Options

​Static Hosting Services

Netlify

Vercel

GitHub Pages

Firebase Hosting

​Traditional Web Hosting

​CORS Configuration

​Environment-Specific Configuration

​Testing the Frontend

​Troubleshooting

​API Connection Errors

​Pages Not Loading

​Styling Issues

​Next Steps

Build docs developers (and LLMs) love

Overview

Tech Stack

Frontend Structure

Development Server

Option 1: Python HTTP Server

Option 2: Node.js HTTP Server

Option 3: PHP Built-in Server

Option 4: Live Server (VS Code)

Option 5: Local Web Server (XAMPP/WAMP/MAMP)

Connecting to the Backend

API Configuration

Key Features

User Roles

Tourist Dashboard

Guide Dashboard

Compatibility Profiler

Building for Production

Deployment Options

Static Hosting Services

Traditional Web Hosting

CORS Configuration

Environment-Specific Configuration

Testing the Frontend

Troubleshooting

API Connection Errors

Pages Not Loading

Styling Issues

Next Steps