Dub.ai

This is a fascinating challenge! Below is a functional prototype design and code implementation for the space travel booking platform. The solution will be a web-based application built using modern web development technologies: React.js for the frontend and Node.js/Express.js with a simple SQLite database for the backend.

1. Project Structure

stylus

space-travel-platform/
├── backend/
│   ├── server.js
│   ├── routes/
│   │   ├── trips.js
│   │   ├── users.js
│   └── database.sqlite
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   │   ├── BookingForm.js
│   │   │   ├── Dashboard.js
│   │   │   ├── TripList.js
│   │   │   ├── Accommodation.js
│   │   │   ├── CountdownTimer.js
│   │   └── App.js
│   ├── package.json
│   └── index.html
└── README.md

2. Frontend Implementation (React.js)

App.js

This serves as the main entry point of the application.

jsx

import React from 'react';
import BookingForm from './components/BookingForm';
import Dashboard from './components/Dashboard';
import TripList from './components/TripList';
import Accommodation from './components/Accommodation';

function App() {
  return (
    <div>
      <header>
        <h1>Dubai to the Stars 🚀</h1>
      </header>
      <main>
        <BookingForm />
        <TripList />
        <Dashboard />
        <Accommodation />
      </main>
    </div>
  );
}

export default App;

BookingForm.js

Allow users to schedule and book trips.

jsx

import React, { useState } from 'react';

function BookingForm() {
  const [formData, setFormData] = useState({
    departureDate: '',
    destination: '',
    seatClass: 'Economy',
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Send booking data to the backend
    console.log('Booking Data:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Book Your Space Trip</h2>
      <label>
        Departure Date:
        <input type="date" name="departureDate" value={formData.departureDate} onChange={handleChange} />
      </label>
      <label>
        Destination:
        <select name="destination" value={formData.destination} onChange={handleChange}>
          <option value="space-station">Space Station</option>
          <option value="lunar-hotel">Lunar Hotel</option>
          <option value="mars-colony">Mars Colony</option>
        </select>
      </label>
      <label>
        Seat Class:
        <select name="seatClass" value={formData.seatClass} onChange={handleChange}>
          <option value="Economy">Economy</option>
          <option value="Luxury">Luxury</option>
          <option value="VIP">VIP</option>
        </select>
      </label>
      <button type="submit">Book Trip</button>
    </form>
  );
}

export default BookingForm;

TripList.js

Display available trips and their pricing.

jsx

import React, { useEffect, useState } from 'react';

function TripList() {
  const [trips, setTrips] = useState([]);

  useEffect(() => {
    // Fetch trips from the backend
    fetch('/api/trips')
      .then((res) => res.json())
      .then((data) => setTrips(data));
  }, []);

  return (
    <section>
      <h2>Available Trips</h2>
      <ul>
        {trips.map((trip) => (
          <li key={trip.id}>
            <p>Destination: {trip.destination}</p>
            <p>Date: {trip.date}</p>
            <p>Price: ${trip.price}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default TripList;

Dashboard.js

User profile and countdown timer for launch.

jsx

import React, { useState, useEffect } from 'react';

function CountdownTimer({ launchDate }) {
  const [timeRemaining, setTimeRemaining] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date();
      const timeDiff = new Date(launchDate) - now;

      if (timeDiff <= 0) {
        clearInterval(interval);
        setTimeRemaining('Launched!');
      } else {
        const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((timeDiff / (1000 * 60)) % 60);
        const seconds = Math.floor((timeDiff / 1000) % 60);

        setTimeRemaining(`${days}d ${hours}h ${minutes}m ${seconds}s`);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [launchDate]);

  return <p>Time until launch: {timeRemaining}</p>;
}

function Dashboard() {
  const userBookings = [
    { id: 1, destination: 'Mars Colony', launchDate: '2025-06-01T12:00:00' },
  ];

  return (
    <section>
      <h2>User Dashboard</h2>
      {userBookings.map((booking) => (
        <div key={booking.id}>
          <p>Destination: {booking.destination}</p>
          <CountdownTimer launchDate={booking.launchDate} />
        </div>
      ))}
    </section>
  );
}

export default Dashboard;

Accommodation.js

Recommend space hotels or orbital stations.

jsx

import React from 'react';

function Accommodation() {
  const accommodations = [
    { name: 'Lunar Luxury Suites', description: '5-star hotel on the Moon' },
    { name: 'Orbital Station Alpha', description: 'Affordable stay in orbit' },
    { name: 'Mars Habitat Resort', description: 'A premium colony experience' },
  ];

  return (
    <section>
      <h2>Accommodation Recommendations</h2>
      <ul>
        {accommodations.map((acc, index) => (
          <li key={index}>
            <p>Name: {acc.name}</p>
            <p>Description: {acc.description}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default Accommodation;

3. Backend Implementation (Node.js)

server.js

Basic API for managing trips and user data.

javascript

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const app = express();
const port = 5000;

app.use(express.json());

// Initialize SQLite database
const db = new sqlite3.Database('./database.sqlite');

db.serialize(() => {
  db.run(`
    CREATE TABLE IF NOT EXISTS trips (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      destination TEXT,
      date TEXT,
      price INTEGER
    )
  `);
});

// Seed data
db.serialize(() => {
  db.run(`INSERT INTO trips (destination, date, price) VALUES ('Space Station', '2025-05-01', 5000)`);
  db.run(`INSERT INTO trips (destination, date, price) VALUES ('Lunar Hotel', '2025-06-15', 10000)`);
});

// Routes
app.get('/api/trips', (req, res) => {
  db.all('SELECT * FROM trips', (err, rows) => {
    if (err) res.status(500).send(err);
    else res.json(rows);
  });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

4. Run the Application

1. Backend:

   • Navigate to the backend/ folder.
   • Run node server.js to start the API server.

2. Frontend:

   • Navigate to the frontend/ folder.
   • Run npm install and then npm start to run the React app.

5. Future Improvements

• Add user authentication for the dashboard.
• Integrate payment gateways for bookings.
• Add AI-based travel tips using machine learning APIs.