Initialize Expo app structure

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.expo/
+dist/
+web-build/
+.idea/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

App.js

@@ -0,0 +1,20 @@
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaView, StyleSheet } from 'react-native';
+
+import HomeScreen from './src/screens/HomeScreen';
+
+export default function App() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <HomeScreen />
+      <StatusBar style="dark" />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f7f3ea'
+  }
+});

README.md

@@ -1,2 +1,75 @@
 # Shoppy
+
 Smart Shopping Companion
+
+## App-Idee
+
+Shoppy ist eine mobile Expo-App, die Einkaufsvorbereitung einfacher macht. Nutzerinnen und Nutzer sollen Einkaufslisten schnell erfassen, organisieren und im Laden effizient abarbeiten koennen.
+
+## Zielgruppe
+
+Die App richtet sich an Studierende, Familien und Berufstaetige, die regelmaessig einkaufen und ihre Einkaufsplanung uebersichtlich digitalisieren moechten.
+
+## Wichtigste Funktionen
+
+- Einkaufslisten erstellen und bearbeiten
+- Artikel nach Status markieren
+- Uebersichtlicher Startbildschirm mit aktuellem Listenstatus
+- Spaeter geplant: Kategorien, Favoriten, Budget-Hinweise und geteilte Listen
+
+## One-Pager
+
+Der One-Pager aus Aufgabe 6.1 wird hier verlinkt:
+
+- One-Pager: TODO Link eintragen
+
+## Geplanter Tech-Stack
+
+- Expo
+- React Native
+- JavaScript
+- GitHub oder GitLab fuer Versionsverwaltung und Abgabe
+
+## Ordnerstruktur
+
+```text
+Shoppy/
+├── assets/
+├── src/
+│   ├── assets/
+│   ├── components/
+│   │   └── PrimaryButton.js
+│   └── screens/
+│       └── HomeScreen.js
+├── App.js
+├── app.json
+├── babel.config.js
+├── package.json
+└── README.md
+```
+
+## Runbook
+
+Projekt installieren:
+
+```bash
+npm install
+```
+
+Projekt starten:
+
+```bash
+npm start
+```
+
+Alternativ direkt mit Expo:
+
+```bash
+npx expo start
+```
+
+Danach kann die App mit Expo Go auf einem Smartphone oder in einem Emulator gestartet werden.
+
+## Repository teilen
+
+Nach dem Push zu GitHub oder GitLab den Repository-Link an den Kursleiter senden.

app.json

@@ -0,0 +1,23 @@
+{
+  "expo": {
+    "name": "Shoppy",
+    "slug": "shoppy",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "backgroundColor": "#f7f3ea"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#f7f3ea"
+      }
+    }
+  }
+}

assets/.gitkeep

@@ -0,0 +1 @@
+

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo']
+  };
+};

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "shoppy",
+  "version": "1.0.0",
+  "private": true,
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~51.0.0",
+    "react": "18.2.0",
+    "react-native": "0.74.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0"
+  }
+}

src/assets/.gitkeep

@@ -0,0 +1 @@
+

src/components/PrimaryButton.js

@@ -0,0 +1,34 @@
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+export default function PrimaryButton({ label, onPress }) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.button,
+        pressed ? styles.buttonPressed : null
+      ]}
+    >
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#256f5b',
+    borderRadius: 8,
+    paddingHorizontal: 20,
+    paddingVertical: 14
+  },
+  buttonPressed: {
+    opacity: 0.82
+  },
+  label: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '700'
+  }
+});

src/screens/HomeScreen.js

@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import PrimaryButton from '../components/PrimaryButton';
+
+export default function HomeScreen() {
+  const [status, setStatus] = useState('Bereit fuer deine erste Einkaufsliste.');
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.header}>
+        <Text style={styles.eyebrow}>Smart Shopping Companion</Text>
+        <Text style={styles.title}>Shoppy</Text>
+        <Text style={styles.subtitle}>
+          Plane Einkaeufe schneller, behalte Listen im Blick und spare Zeit im Laden.
+        </Text>
+      </View>
+
+      <View style={styles.panel}>
+        <Text style={styles.panelTitle}>Startseite</Text>
+        <Text style={styles.status}>{status}</Text>
+        <PrimaryButton
+          label="Liste vorbereiten"
+          onPress={() => setStatus('Demo-Status: Deine Einkaufsliste wird vorbereitet.')}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24
+  },
+  header: {
+    marginBottom: 28
+  },
+  eyebrow: {
+    color: '#256f5b',
+    fontSize: 14,
+    fontWeight: '700',
+    marginBottom: 8,
+    textTransform: 'uppercase'
+  },
+  title: {
+    color: '#18201d',
+    fontSize: 42,
+    fontWeight: '800',
+    marginBottom: 10
+  },
+  subtitle: {
+    color: '#4f5f59',
+    fontSize: 17,
+    lineHeight: 24
+  },
+  panel: {
+    backgroundColor: '#ffffff',
+    borderRadius: 8,
+    gap: 16,
+    padding: 20,
+    shadowColor: '#000000',
+    shadowOffset: {
+      height: 4,
+      width: 0
+    },
+    shadowOpacity: 0.08,
+    shadowRadius: 12
+  },
+  panelTitle: {
+    color: '#18201d',
+    fontSize: 20,
+    fontWeight: '700'
+  },
+  status: {
+    color: '#4f5f59',
+    fontSize: 16,
+    lineHeight: 22
+  }
+});