Building a Star Wars Character Browser Kiosk Application: A Comprehensive Guide

1# Clone the repository
2git clone https://gitlab.com/kiosk-engine-io/star-wars-browser.git
3
4# Navigate to project directory
5cd star-wars-browser
6
7# Install dependencies
8npm install
9
10# Start development server
11npm run dev
12
13# Build for production
14npm run build

1{
2  "dependencies": {
3    "next": "^14.0.0",
4    "react": "^18.2.0",
5    "react-dom": "^18.2.0",
6    "@tanstack/react-query": "^4.0.0",
7    "tailwindcss": "^3.3.0",
8    "framer-motion": "^10.0.0",
9    "@radix-ui/react-navigation-menu": "^1.0.0"
10  }
11}

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  output: 'export',
4  images: {
5    unoptimized: true,
6    remotePatterns: [
7      {
8        protocol: 'https',
9        hostname: 'swapi.dev',
10      },
11    ],
12  },
13};
14
15module.exports = nextConfig;

1// app/components/KioskWrapper.tsx
2'use client';
3
4import { useRouter } from 'next/navigation';
5import { useEffect, useCallback } from 'react';
6
7const IDLE_TIMEOUT = 60000; // 60 seconds
8
9export function KioskWrapper({ children }: { children: React.ReactNode }) {
10  const router = useRouter();
11
12  const resetIdleTimer = useCallback(() => {
13    localStorage.setItem('lastActivity', Date.now().toString());
14  }, []);
15
16  useEffect(() => {
17    const interval = setInterval(() => {
18      const lastActivity = parseInt(localStorage.getItem('lastActivity') || '0');
19      if (Date.now() - lastActivity > IDLE_TIMEOUT) {
20        router.push('/');
21      }
22    }, 1000);
23
24    window.addEventListener('touchstart', resetIdleTimer);
25    window.addEventListener('mousemove', resetIdleTimer);
26
27    return () => {
28      clearInterval(interval);
29      window.removeEventListener('touchstart', resetIdleTimer);
30      window.removeEventListener('mousemove', resetIdleTimer);
31    };
32  }, [router, resetIdleTimer]);
33
34  return <div className="kiosk-wrapper">{children}</div>;
35}

1// app/character/[id]/page.tsx
2import { useQuery } from '@tanstack/react-query';
3
4interface Character {
5  name: string;
6  height: string;
7  mass: string;
8  birth_year: string;
9  // ... other properties
10}
11
12async function fetchCharacter(id: string): Promise<Character> {
13  const response = await fetch(`https://swapi.dev/api/people/${id}`);
14  if (!response.ok) throw new Error('Failed to fetch character');
15  return response.json();
16}
17
18export default function CharacterPage({ params }: { params: { id: string } }) {
19  const { data, isLoading, error } = useQuery(['character', params.id], 
20    () => fetchCharacter(params.id)
21  );
22
23  if (isLoading) return <LoadingSkeleton />;
24  if (error) return <ErrorDisplay error={error} />;
25
26  return (
27    <div className="character-details">
28      <h1>{data.name}</h1>
29      {/* Character details */}
30    </div>
31  );
32}

1// styles/globals.css
2@layer base {
3  html {
4    -webkit-tap-highlight-color: transparent;
5    user-select: none;
6  }
7}
8
9@layer components {
10  .character-card {
11    @apply relative p-6 rounded-lg shadow-lg transition-transform;
12    transform-style: preserve-3d;
13    perspective: 1000px;
14  }
15
16  .character-card:hover {
17    @apply transform scale-105;
18  }
19}

1// app/components/CharacterCard.tsx
2import { motion } from 'framer-motion';
3
4export function CharacterCard({ character }: { character: Character }) {
5  return (
6    <motion.div
7      className="character-card"
8      whileHover={{ scale: 1.05 }}
9      whileTap={{ scale: 0.95 }}
10      initial={{ opacity: 0 }}
11      animate={{ opacity: 1 }}
12      exit={{ opacity: 0 }}
13    >
14      {/* Card content */}
15    </motion.div>
16  );
17}

1# Build the application
2npm run build
3
4# Navigate to the dist directory
5cd dist
6
7# Create a tar archive
8tar -czf ../star-wars-browser.tar .
9
10# Return to project root
11cd ..