Files
MyClub/DOCS/SETUP_SIMPLIFIED.md
T
Tomáš Dvořák 12cba639b9 upload
2025-10-16 13:32:05 +02:00

5.3 KiB

Simplified Initial Setup - GPS Location Only

Overview

The initial setup has been streamlined to focus on GPS location import, making it faster and easier for users. Full contact details (address, city, postal code, country) can be added later in the admin panel.

Setup Flow Changes

What's Included in Initial Setup:

  1. Admin Account

    • Email
    • Password
    • Name (optional)
  2. Club Information

    • Club search/selection from FACR
    • Club name
    • Club logo
    • Club type (football/futsal)
  3. Social Media

    • Facebook URL
    • Instagram URL
    • YouTube URL
    • Gallery URL
  4. GPS Location (Simplified!)

    • Primary Method: Paste URL from Google Maps or mapy.cz
    • Secondary Method: Manual GPS coordinate entry
    • Address fields removed (add later in admin)
  5. Appearance

    • Color scheme
    • Theme selection
  6. SMTP Settings (optional)

    • Email configuration

What's Moved to Admin Settings:

These fields are now available in Admin → Settings → "Kontakt & Mapa" tab:

  • Street Address (Adresa)
  • City (Město)
  • Postal Code (PSČ)
  • Country (Země)
  • Phone Number
  • Email Address

User Experience

Initial Setup (Fast):

1. Club Selection → Auto-fills name and logo
2. Social Media → Paste Facebook/Instagram/YouTube
3. GPS Location → Paste map URL (1 click!)
4. Choose Colors → Auto-generated from logo
5. Done! → Website ready

Full Contact Details (Later):

Admin Panel → Settings → "Kontakt & Mapa" tab
→ Fill in complete address and contact information

Benefits

Faster Setup: Reduced from 10+ fields to just GPS location Less Intimidating: Users can start quickly Map-First Approach: Easy URL paste from familiar map services Flexible: Full details can be added anytime Better UX: Focus on essentials during setup

Technical Changes

Frontend (SetupPage.tsx)

Removed State Variables:

// ❌ Removed from setup
const [contactAddress, setContactAddress] = useState('');
const [contactCity, setContactCity] = useState('');
const [contactZip, setContactZip] = useState('');
const [contactCountry, setContactCountry] = useState('');

Kept State Variables:

// ✅ Kept for GPS location
const [locationLatitude, setLocationLatitude] = useState<string>('');
const [locationLongitude, setLocationLongitude] = useState<string>('');

UI Changes:

// Before: Multiple address fields + GPS
<FormControl>
  <FormLabel>Adresa</FormLabel>
  <Input ... />
</FormControl>
<FormControl>
  <FormLabel>Město</FormLabel>
  <Input ... />
</FormControl>
// ... etc

// After: Just GPS with map import
<MapLinkImporter 
  onImport={(coords) => { ... }}
/>
<SimpleGrid columns={2}>
  <FormControl>
    <FormLabel>GPS šířka (latitude)</FormLabel>
    ...
  </FormControl>
  <FormControl>
    <FormLabel>GPS délka (longitude)</FormLabel>
    ...
  </FormControl>
</SimpleGrid>

Payload Changes:

// ❌ Removed from setup payload
contact_address: undefined,
contact_city: undefined,
contact_zip: undefined,
contact_country: undefined,

// ✅ GPS location still sent
location_latitude: parseFloat(locationLatitude),
location_longitude: parseFloat(locationLongitude),

Backend

No changes needed - Backend still supports all fields. Address fields simply remain NULL until user fills them in admin panel later.

User Instructions

During Initial Setup:

Option 1: Import from Map URL (Recommended)

  1. Go to Google Maps or mapy.cz
  2. Find your stadium location
  3. Copy the URL from browser address bar
  4. Paste into "Import souřadnic z URL mapy" field
  5. Click "Importovat" when preview appears
  6. Done!

Option 2: Manual GPS Entry

  1. Find coordinates (from Google Maps, right-click → coordinates)
  2. Enter latitude (e.g., 50.0947)
  3. Enter longitude (e.g., 17.6997)
  4. Done!

Adding Full Contact Details Later:

  1. Login to admin panel
  2. Go to Settings
  3. Click "Kontakt & Mapa" tab
  4. Fill in:
    • Street address
    • City
    • Postal code
    • Country
    • Phone
    • Email
  5. Click "Uložit nastavení"

Example: Krnov Stadium Setup

Step 1: Paste this URL during setup:

mapy.com/en/letecka?q=krnov%20stadion&x=17.6996859&y=50.0947150&z=19

Result:

  • Latitude: 50.0947150
  • Longitude: 17.6996859
  • Zoom: 19
  • Map preview shows location

Step 2: Complete setup

  • Setup takes ~2 minutes instead of ~5 minutes

Step 3: Add address later (optional):

  • Go to Admin → Settings → "Kontakt & Mapa"
  • Add: "Tyršova 242, 794 01 Krnov, Česká republika"
  • Add phone and email

Migration from Old Setup

If users completed the old setup with address fields, no data is lost. The fields still exist in the database and are editable in admin settings.

Summary

Aspect Before After
Setup Time ~5 minutes ~2 minutes
Required Fields 10+ 2 (lat/lng)
Address Collection During setup Later in admin
GPS Methods Manual only URL import + manual
User Friction High Low
Flexibility Low High

Result: Faster, simpler setup with map URL import as the primary method. Full details can be added anytime in admin panel.