german_notes_cursor_instructions.md

📒 German Notes App with Cursor (React Native + Expo + Gemini API)

This document provides step-by-step instructions to build your journaling app using React Native + Expo and integrate it with the Gemini API for word suggestions and grammar corrections. The workflow is designed for use with Cursor AI to generate boilerplate code, components, and logic.

We will not use Xcode — instead, you’ll test the app on your iPhone using the Expo Go app by scanning a QR code. This avoids the App Store and simplifies testing.

---

🛠 Tools You’ll Use

• Node.js → like Python runtime, runs JS locally.
• npm (or yarn) → package manager (like pip).
• React Native → framework for mobile UI.
• Expo → toolkit to run React Native apps easily.
• Expo Go (iPhone app) → run your app by scanning a QR code.
• React Navigation → navigation between screens.
• AsyncStorage / SQLite → save notes locally.
• Gemini API → Google’s LLM for word lookup & grammar correction.

---

📆 Project Roadmap

Phase 1: Setup & Hello World

1. Install Node.js (from nodejs.org).

2. Install Expo CLI globally:

   npm install -g expo-cli

3. Create new project:

   expo init german-notes
   cd german-notes

   Choose blank (TypeScript) template.

4. Start development server:

   expo start

5. Install Expo Go app on iPhone → scan the QR code from terminal/browser → app runs live.

✅ Now you can run apps without Xcode or App Store.

---

Phase 2: Basic Journal App

Tasks for Cursor:

• Create NotesListScreen.tsx → list of saved notes.
• Create NoteEditorScreen.tsx → text editor to add/edit notes.
• Use AsyncStorage for saving notes.
• Add navigation (@react-navigation/native).

Example Structure:

src/
  screens/
    NotesListScreen.tsx
    NoteEditorScreen.tsx
  components/
    NoteItem.tsx
  storage/
    notesStorage.ts

---

Phase 3: Command Parser & Gemini API

Feature: When user types /word sleep, app calls Gemini API and suggests the right German translation.

Tasks for Cursor:

1. Create utils/commandParser.ts:

   export function parseCommand(text: string): string | null {
     if (text.startsWith("/word ")) {
       return text.replace("/word ", "").trim();
     }
     return null;
   }

2. Add Gemini API integration:

   • Install fetch polyfill if needed:

     npm install cross-fetch

   • Create services/gemini.ts:

     import fetch from "cross-fetch";
     
     const API_KEY = process.env.GEMINI_API_KEY;
     const API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent";
     
     export async function translateWord(word: string): Promise<string> {
       const body = {
         contents: [{
           parts: [{ text: `Translate the English word "${word}" into natural German for journaling.` }]
         }]
       };
     
       const res = await fetch(`${API_URL}?key=${API_KEY}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body)
       });
     
       const data = await res.json();
       return data?.candidates?.[0]?.content?.parts?.[0]?.text || "No result";
     }

3. In NoteEditorScreen, whenever /word command is detected, call translateWord(word) and show result as suggestion popup.

---

Phase 4: UI/UX Polishing

• Clean minimal design using react-native-paper or tailwind-rn.
• Add floating button for “New Note”.
• Show suggestions inline below input field.

---

Phase 5: Grammar Correction (Optional, Phase 2.0)

Feature: User presses “Check Grammar” → text is sent to Gemini for correction.

Gemini Prompt Example:

Correct this German journal entry. Highlight mistakes and suggest corrections with explanations:
[ENTRY]

---

Phase 6: Vocab Bank (Optional, Phase 3.0)

• Every looked-up word gets stored in a vocab DB.
• Add VocabScreen.tsx → flashcards for practice.

---

🚀 Deployment (Without Xcode)

1. Keep using Expo Go for daily use.
2. If you want a standalone app without App Store:

   expo build:ios

   Then install via QR code (needs Apple account but no Xcode).

---

📖 Instructions for You (Using Cursor)

1. Copy this plan into Cursor.

2. Assign tasks step by step:

   • First: create project + Hello World.
   • Next: build NotesList + NoteEditor.
   • Then: implement parser + Gemini API.

3. Provide Cursor exact prompts, e.g.:

   • “Create a NotesListScreen.tsx in React Native with a FlatList showing notes from AsyncStorage.”
   • “Implement Gemini API service in services/gemini.ts for translation requests.”

4. Add your Gemini API Key in .env:

   GEMINI_API_KEY=your_api_key_here

   Install dotenv:

   npm install react-native-dotenv

5. Restart dev server and scan QR again with Expo Go.

---

✅ With this, you’ll have a German-learning journaling app running locally on your iPhone via Expo Go + Gemini API — no Xcode, no App Store.