Mobile Challenges

Try these after completing all 5 mobile steps.

Knowledge Check

  1. What does useState return? What are the two values?

  2. What is the difference between fetchMessages being called with useEffect vs. being called manually?

  3. Why do we use FlatList instead of ScrollView for the message list?

  4. What does response.json() do?

  5. What does Platform.OS === "ios" ? "padding" : "height" mean in KeyboardAvoidingView?

Code Challenges

Challenge 1: Clear Chat Button

Add a button in the header that clears all messages from both the app and the backend.

Hint: You'll need to call DELETE /api/messages and then clear the local state.

Challenge 2: Message Avatars

Add a small circle with the first letter of the sender's name next to each message bubble: - User messages: blue circle with "U" - AI messages: gray circle with "A"

Hint: Use a <View> with borderRadius: width/2 to make a circle.

Challenge 3: "Jump to Bottom" Button

When the user scrolls up in the chat history, show a floating button that says "↓" to jump back to the bottom. Hide it when already at the bottom.

Hint: Use onScroll on FlatList and check contentOffset.y.

Open-Ended Project: Multi-Provider Chat

Build a settings screen where users can switch between AI providers:

Requirements: - Add a "Settings" gear icon in the header - Tapping it shows a modal or new screen with options - User can pick a provider: OpenAI, Anthropic, or DeepSeek - User can enter their own API key - The chat endpoint changes based on the selected provider

Implementation ideas: - Store the selected provider and API key in component state (or AsyncStorage) - Pass them to the backend as headers in the request - Or create separate endpoints (/api/chat/openai, /api/chat/anthropic) - Add a system prompt text field

Stretch goals: - Add a "temperature" slider (0-2) to control creativity - Add a "model" dropdown (e.g., gpt-4o vs gpt-4o-mini) - Show token usage for each message

← Step 5: Polish