chore: app setup

Author: MrDiaz

README.md

@@ -1,50 +1,141 @@
-# Welcome to your Expo app 👋
+# Senior Mobile Engineer - Technical Interview Project
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+Welcome! This is a React Native learning platform app built with Expo. This codebase is designed to assess your technical skills through hands-on debugging, refactoring, and architectural discussions.
 
-## Get started
+## 🎯 Objective
 
-1. Install dependencies
+This is a realistic codebase with intentional issues including:
+
+- Bugs that prevent the app from running
+- Failing tests
+- Performance problems
+- Code smells and refactoring opportunities
+- Architectural challenges
+
+Your task is to work through these issues, discuss solutions, and demonstrate your mobile engineering expertise.
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- Node.js 18+ installed
+- npm or yarn
+- (Optional) iOS Simulator or Android Emulator
+- (Optional) Expo Go app on physical device
+
+### Installation
+
+1. **Install dependencies**
 
    ```bash
    npm install
    ```
 
-2. Start the app
+2. **Run tests** (they will fail initially - that's expected!)
+
+   ```bash
+   npm test
+   ```
+
+3. **Start the app**
 
    ```bash
-   npx expo start
+   npm start
    ```
 
-In the output, you'll find options to open the app in a
+   Then choose your platform:
+
+   - Press `w` for web browser
+   - Press `i` for iOS simulator (Mac only)
+   - Press `a` for Android emulator
+   - Scan QR code with Expo Go app
 
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+   **Note:** The app will crash on first load. Your first task is to debug why!
 
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+### High-Level Phases:
 
-## Get a fresh project
+1. **Debug & Get Running** - Fix critical bugs to get the app running
+2. **Fix Tests** - Debug and fix failing test suites
+3. **Code Review** - Identify issues and discuss architecture
+4. **Performance** - Optimize rendering and list performance
+5. **Refactoring** - Break down large components
 
-When you're ready, run:
+## 🏗️ Project Structure
+
+```
+thinkific/
+├── app/                      # Expo Router pages (file-based routing)
+│   ├── (tabs)/              # Tab navigator screens
+│   │   ├── index.tsx        # Course list (home) screen
+│   │   └── explore.tsx      # Profile screen
+│   └── course/[id].tsx      # Dynamic course detail screen
+├── components/              # Reusable UI components
+│   ├── CourseCard.tsx       # Course card component (has perf issues)
+│   └── __tests__/           # Component tests
+├── services/                # Data layer
+│   ├── courseService.ts     # API/mock data service (has bugs)
+│   └── __tests__/           # Service tests
+├── types/                   # TypeScript type definitions
+│   ├── course.ts            # Course and lesson types
+│   └── navigation.ts        # Navigation types (has type errors)
+├── constants/               # Theme and constants
+├── hooks/                   # Custom React hooks
+```
+
+## 🧪 Testing
 
 ```bash
-npm run reset-project
+# Run all tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
 ```
 
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+## 🛠️ Tech Stack
+
+- **React Native** - Mobile framework
+- **Expo** - Development platform and tooling
+- **Expo Router** - File-based navigation
+- **TypeScript** - Type safety
+- **Jest** - Testing framework
+- **React Native Testing Library** - Component testing
+
+## 📱 Features
+
+This learning platform includes:
+
+- **Course Catalog** - Browse 35+ courses with search and filtering
+- **Course Details** - View lessons, progress, and enroll
+- **User Profile** - View stats, settings, and preferences
+- **Theming** - Light and dark mode support
+
+## 🐛 Known Issues (For Interviewers)
+
+This section is intentionally left brief. See [INTERVIEW.md](./INTERVIEW.md) for complete issue list.
+
+The app contains various intentional issues to assess:
 
-## Learn more
+- Debugging skills
+- Performance optimization
+- Code architecture
+- Testing knowledge
+- TypeScript proficiency
 
-To learn more about developing your project with Expo, look at the following resources:
+## 📚 Resources
 
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+- [Expo Documentation](https://docs.expo.dev/)
+- [React Native Documentation](https://reactnative.dev/)
+- [Expo Router Documentation](https://docs.expo.dev/router/introduction/)
+- [React Native Testing Library](https://callstack.github.io/react-native-testing-library/)
 
-## Join the community
+## 💡 Tips
 
-Join our community of developers creating universal apps.
+- Take your time to understand the codebase structure
+- Use console logs and debugging tools effectively
+- Ask questions when requirements are unclear
+- Think out loud - explain your reasoning
+- Consider edge cases and tradeoffs
+- It's okay to not finish everything - we want to see your process
 
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+Good luck! 🚀

app/(tabs)/_layout.tsx

@@ -19,15 +19,15 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          title: 'Courses',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="book.fill" color={color} />,
         }}
       />
       <Tabs.Screen
         name="explore"
         options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          title: 'Profile',
+          tabBarIcon: ({ color }) => <IconSymbol size={28} name="person.fill" color={color} />,
         }}
       />
     </Tabs>