Helsinki Guide - Airbnb Vierailijoiden Opas

Yleiskuvaus

Kevyt ja käyttäjäystävällinen verkkosovellus lyhyiden vierailujen aikana käytettäväksi. Opas esittelee Helsingin parhaita museoita, ravintoloita ja muita nähtävyyksiä helposti selattavassa muodossa.

Tavoitteet

• Kevyt ja nopea: Nopea lataus ja sujuva käyttökokemus mobiililaitteilla
• Helppo navigointi: Selkeä kategorisointi ja intuitiivinen käyttöliittymä
• Visuaalinen: Kuvat ja karusellit tekevät sisällöstä miellyttävän selattavan
• Lyhyt vierailu -optimoitu: Keskittyy olennaiseen, ei ylitä informaatiolla

Teknologiapino

• React (UI-kirjasto)
• Vite (nopea build-työkalu)
• CSS Modules tai Tailwind CSS (kevyt tyylitys)
• Swiper (karusellit)

Sovelluksen Rakenne

Sivut

1. Päänäkymä (Home)

   • Tervetuloviesti
   • Kategoriat: Museot, Ravintolat, Nähtävyydet
   • Jokaiselle kategorialle:
     • Featured-kohta (iso kuva + esittelyteksti)
     • Karuselli saman kategorian kohteista

2. Kategorianäkymä (Category Detail) - Vaihtoehtoinen

   • Kaikki kategorian kohteet listattuna
   • Museoille ja nähtävyyksille aukioloaika
   • Ravintoloille linkki ruokalistaan
   • Filtterit (esim. hinnataso, sijainti)

3. Kohteenäkymä (Attraction Detail) - Vaihtoehtoinen

   • Yksityiskohtaiset tiedot
   • Kuvat
   • Osoite, aukioloajat, hinnat
   • Linkit (verkkosivut, kartat)

Komponentit

Päänäkymä

• Header - Logo ja navigaatio
• HeroSection - Tervetuloviesti
• CategorySection - Kategorian osio
  • FeaturedCard - Featured-kohta (iso kuva + teksti)
  • AttractionCarousel - Karuselli kohteista
• Footer - Yhteystiedot ja linkit

Yleiset komponentit

• AttractionCard - Yksittäisen kohteen kortti
• Carousel - Uudelleenkäytettävä karuselli-komponentti
• Image - Optimoitu kuvakomponentti

Tietorakenne

Kategoriat

const categories = [
  {
    id: 'museums',
    name: 'Museot',
    description: 'Helsingin parhaat museot',
    icon: 'museum-icon'
  },
  {
    id: 'restaurants',
    name: 'Ravintolat',
    description: 'Suositeltuja ravintoloita',
    icon: 'restaurant-icon'
  },
  {
    id: 'attractions',
    name: 'Nähtävyydet',
    description: 'Muita nähtävyyksiä',
    icon: 'attraction-icon'
  }
]

Kohteet

const attractions = [
  {
    id: 'unique-id',
    category: 'museums',
    name: 'Kohteen nimi',
    description: 'Lyhyt kuvaus',
    featured: true, // Näytetäänkö featured-osiossa
    image: 'url-to-image',
    images: ['url1', 'url2'], // Lisäkuvat
    address: 'Osoite',
    openingHours: 'Aukioloajat',
    price: 'Hinta tai hintataso',
    website: 'https://...',
    mapLink: 'https://...',
    tags: ['tag1', 'tag2'] // Esim. 'budget', 'family-friendly'
  }
]

Design-ohjeet

Tyylit

• Kevyt ja iloinen: Vaaleat värit, runsaasti valkoista tilaa
• Moderni: Pyöristetyt kulmat, pehmeät varjot
• Responsiivinen: Toimii erinomaisesti mobiilissa
• Helppo lukea: Selkeä typografia, riittävä kontrasti

Väripaletti (ehdotus)

• Pääväri: Sininen (#0066CC - Suomen lippu -vihje)
• Toissijainen: Vaaleanharmaa (#F5F5F5)
• Teksti: Tummanharmaa (#333333)
• Korostus: Keltainen/Oranssi (#FFB800)

Typografia

• Otsikot: Moderni sans-serif (esim. Inter, Poppins)
• Teksti: Helppo lukea (esim. Open Sans, Roboto)

Toiminnallisuudet

Vaihe 1: Perustoiminnallisuus

• Päänäkymä kategorioilla
• Featured-kohta jokaiselle kategorialle
• Karusellit kategorioittain
• Responsiivinen design
• Perusdata (10-15 kohdetta)

Vaihe 2: Laajennukset (tulevaisuudessa)

• Yksityiskohtaiset näkymät kohteille
• Hakutoiminto
• Filtterit (hinta, sijainti, tagit)
• Karttanäkymä
• Kieli-valinta (suomi/englanti)
• Favoritit

Tiedostorakenne

helsinki-guide/
├── public/
│   ├── images/
│   │   ├── attractions/
│   │   └── categories/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   ├── HeroSection.jsx
│   │   ├── CategorySection.jsx
│   │   ├── FeaturedCard.jsx
│   │   ├── AttractionCarousel.jsx
│   │   └── AttractionCard.jsx
│   ├── data/
│   │   └── attractions.js
│   ├── styles/
│   │   └── globals.css
│   ├── App.jsx
│   └── main.jsx
├── package.json
├── vite.config.js
└── README.md

Data (Esimerkkejä)

Museot

• Kiasma
• Ateneum
• Amos Rex
• Kaapelitehdas
• Designmuseo

Ravintolat

• Savotta
• Deliberi
• Olo
• Bistro Bardot
• Kappeli

Nähtävyydet

• Suomenlinna
• Mustikkamaa
• Allas pool
• Oodi
• Löyly

Kehitysvaiheet

1. Projektin alustus x Asenna riippuvuudet x Konfiguroi build-työkalu x Perusrakenne

2. Komponenttien luonti x Peruskomponentit (Header, Footer) x Karuselli-komponentti x Korttikomponentit

3. Datan lisääminen x Luo datatiedosto x Täytä esimerkkidata

4. Stylaus x Perustyylit

   • Responsiivinen design
   • Animaatiot ja siirtymät

5. Testaus ja optimointi

   • Testaa eri laitteilla
   • Optimoi kuvat
   • Testaa suorituskyky

Huomioita

• Kuvat: Käytä optimoituja kuvia (WebP, lazy loading)
• Suorituskyky: Minimoi JavaScript-koko, käytä code splittingia
• Saavutettavuus: Varmista, että sovellus on saavutettava (ARIA-labels, näppäimistönavigointi)
• SEO: Lisää meta-tagit ja strukturoitu data

Seuraavat askeleet