Assigned Readings

1. React Native + Expo
2. Expo Documentation - Getting Started
3. React Native Paper Documentation

For this homework assignment, your team will implement Module detail screen with post components in the mobile app, and enhance the Course detail screen to display modules. This involves:

1. Enhancing the Course detail screen to properly display modules from the course data.
2. Building a Module detail screen that displays module information and a list of dummy posts.
3. Creating reusable Post components for different post types (text, videos, PDF Attachments, Quizzes, etc.).
4. Handling loading / error / empty / success states.
5. Keeping your code TypeScript-safe and well-organized.

Note: Post endpoints are not yet implemented in the backend, so you will use dummy/mock post data for now. Each team member will build a different post type component. This gives you practice building React Native components without waiting for backend endpoints.

You can parallelize this work if you agree on shared types + helper functions early. Start by creating GitHub issues that match the “Person X checklist” items in Section 6, then have each person work from their issues.

1. New Files to Add

Your implementation does not need to match these files exactly, but the behavior should feel similar to the existing course screens.

Component	File
Course detail screen (enhanced)	mobile/app/(tabs)/courses/[id].tsx
Module detail screen	mobile/app/(tabs)/modules/[id].tsx
Module card component	mobile/components/modules/ModuleCard.tsx
PostGeneric component	mobile/components/posts/PostGeneric.tsx
PostAttachment component	mobile/components/posts/PostAttachment.tsx
PostVideo component	mobile/components/posts/PostVideo.tsx
PostQuiz component	mobile/components/posts/PostQuiz.tsx
QuizQuestion component	mobile/components/posts/QuizQuestion.tsx
Module API helpers	mobile/services/modules.ts
Module types (if needed)	mobile/types/api.ts
Post types (if needed)	mobile/types/api.ts
Dummy post data	mobile/utils/dummyPosts.ts (or similar)

2. Team workflow requirement

1. Each teammate must open at least one PR that includes React Native/TypeScript changes.
2. All HW5 changes must be merged into main by the deadline.
3. Before coding, create issues for your work:
   1. Make 1+ GitHub issues per teammate (one per “Person X checklist” in Section 6 works well).
   2. Put a short checklist + acceptance criteria in each issue (what should work when you’re done).
   3. Assign each issue to one person.
   4. Each PR should reference the issue(s) it addresses (and close them when merged).

3. UI requirements (Course detail, Module detail, and post components)

3.1. Course Detail Screen Enhancement Person 1

1. Enhance the existing course detail screen (mobile/app/(tabs)/courses/[id].tsx):

   • Ensure modules are properly displayed from the course data
   • Display module cards with title, description, and color indicator
   • Make module cards clickable to navigate to module detail screen
   • Handle empty state when course has no modules
   • Ensure proper styling and spacing

2. Module display requirements:

   • Show module title
   • Show module description (if available, truncated if long)
   • Show module color indicator (if available)
   • Sort modules by ordering if available
   • Navigate to /(tabs)/modules/[module_id] when tapped

3. Module Component:

   • Create a reusable ModuleCard component (mobile/components/modules/ModuleCard.tsx)
   • Display module title, description, and color indicator
   • Handle press events for navigation
   • Use TypeScript with proper prop types
   • Use React Native Paper components

3.2. Module Detail Screen Person 1

1. Display module information:

   • Module title
   • Module description (if available)
   • Module color indicator (if available)
   • Use GET /api/modules/{id} to fetch module data

2. Display list of dummy posts:

   • Create dummy/mock post data (see Section 3.4)
   • Display posts in a scrollable list
   • Each post should use the appropriate post component based on post type
   • Handle UI states: loading, error, empty, success

3. Navigation:

   • Back button returns to course detail screen (where module was accessed from)

3.3. Post Components Person 2-5

Each team member will build a different post type component:

1. PostGeneric Component (Person 2):

   • Display post title
   • Display text content
   • Display optional image (if provided)
   • Use React Native Paper components
   • Handle long text with scrolling or truncation
   • Handle image loading and display

2. PostAttachment Component (Person 3):

   • Display post title
   • Display text content
   • Show downloadable PDF attachment
   • Display download button/action (can be a placeholder for now)
   • Show PDF icon
   • Display file name and size if available

3. PostVideo Component (Person 4):

   • Display post title
   • Display text content
   • Embed Vimeo video (use Vimeo embed URL or video ID)
   • Handle video loading and display
   • Use appropriate React Native video component or WebView for embedding

4. PostQuiz Component (Person 5):

   • Display post title
   • Display text content
   • Display list of QuizQuestions
   • Use QuizQuestion component for each question
   • Handle quiz display (read-only for now, no submission)

5. QuizQuestion Component (Person 5):

   • Display question text
   • Display question type (Multiple Choice, True/False, Select All that are correct)
   • Display valid answers/options
   • Handle different question types appropriately
   • Use React Native Paper components for options/answers

Component requirements:

• Use TypeScript with proper prop types
• Use React Native Paper components for consistency
• Be reusable and well-named
• Handle different content lengths gracefully
• All components should accept a post prop with the appropriate type

3.4. Dummy Post Data Person 1

1. Create a file with dummy post data (e.g., mobile/utils/dummyPosts.ts):

   • Include 3-5 sample posts of different types
   • Each post should have: id, title, type, content (or appropriate fields)
   • Match the structure of existing Post types

2. Example structure:

   export const dummyPosts = [
     {
       id: 1,
       title: "Introduction to React Native",
       type: "generic",
       text: "React Native is a framework for building mobile apps...",
       image: "https://example.com/image.jpg" // optional
     },
     {
       id: 2,
       title: "Course Syllabus PDF",
       type: "attachment",
       text: "Download the course syllabus here.",
       pdfUrl: "https://example.com/syllabus.pdf",
       fileName: "syllabus.pdf",
       fileSize: 1024000
     },
     {
       id: 3,
       title: "React Native Tutorial Video",
       type: "video",
       text: "Watch this video to learn React Native basics.",
       vimeoId: "123456789" // or vimeoUrl
     },
     {
       id: 4,
       title: "Week 1 Quiz",
       type: "quiz",
       text: "Test your knowledge with this quiz.",
       questions: [
         {
           question: "What is React Native?",
           type: "multiple_choice",
           options: ["A web framework", "A mobile framework", "A database"],
           validAnswers: [1] // index of correct answer
         },
         {
           question: "React Native uses JavaScript.",
           type: "true_false",
           validAnswers: [true]
         },
         {
           question: "Which are React Native features?",
           type: "select_all",
           options: ["Cross-platform", "Hot reload", "Native performance"],
           validAnswers: [0, 1, 2] // all are correct
         }
       ]
     }
   ];

3.5. API Integration Person 1

1. Set up API service function in mobile/services/modules.ts:

   • getModuleDetail(moduleId) – Fetch module details (GET /api/modules/{id})

2. Use React Query:

   • Use useQuery hook for fetching module data
   • Handle loading, error, and success states
   • Implement proper cache keys (e.g., ['moduleDetail', moduleId])

3. Type safety:

   • Use the existing Module type from mobile/types/api.ts (or add it if missing)
   • Define Post types for dummy data (or use existing Post types)
   • No any types for data or props

4. TypeScript + code organization requirements Person 1 Everyone

1. Define types that match your backend:

   • Module type (if not already defined)
   • Post types: PostGeneric, PostAttachment, PostVideo, PostQuiz
   • QuizQuestion type with question, type, and valid answers
   • Related types for API responses

2. No any for module/post data or props.

3. Put API calls in service files:

   • Add module API functions to mobile/services/modules.ts (or existing service file)

4. Use React Query consistently:

   • All data fetching should use useQuery
   • Proper query keys for caching
   • Error handling via React Query

5. Minimal testing requirement

1. Add 2 Jest tests for one pure helper function you wrote for this feature (examples: formatModuleTitle, validateModuleId, getModuleColor, formatFileSize, getFileIcon, parseVimeoId, validateQuizAnswer).
2. Keep tests small: test logic, not React Native components.

6. Suggested Division of Labor

Person 1 (Course detail enhancement + Module detail screen + foundations)

Person 2 (PostGeneric Component)

Create mobile/components/posts/PostGeneric.tsx.

Person 3 (PostAttachment Component)

Create mobile/components/posts/PostAttachment.tsx.

Person 4 (PostVideo Component)

Create mobile/components/posts/PostVideo.tsx.

Person 5 (PostQuiz + QuizQuestion Components)

Create mobile/components/posts/PostQuiz.tsx and mobile/components/posts/QuizQuestion.tsx.

7. Individual Reflection

Each student must complete an individual reflection in their shared Google document (LastName_FirstName_373).

Under today’s date, respond (200–350 words total):

1. What was most challenging about building your post component? Why?
2. What are you learning about dividing up work? Any thoughts about improving the process?

Paste your reflection into the Weekly Reflection Form as usual.

8. Submission Checklist

Team Requirements

Implementation

Process

Individual Submission

Resources

• React Native Documentation: https://reactnative.dev/
• Expo Documentation: https://docs.expo.dev/
• Expo Router: https://docs.expo.dev/router/introduction/
• React Native Paper: https://callstack.github.io/react-native-paper/
• React Query: https://tanstack.com/query/latest
• TypeScript Handbook: https://www.typescriptlang.org/docs/