Mobile App - Mentee & Mentor Platform

A cross-platform React Native mobile application designed to facilitate mentoring relationships with separate interfaces for mentees and mentors. Built with TypeScript, task management, progress tracking, and interactive learning tools.

Table of Contents

• Features
• Tech Stack
• Prerequisites
• Installation
• Running the App
• Project Structure
• Development
• Contributing
• Troubleshooting

Features

For Mentees

• Dashboard: Overview of assignments, tasks, and progress
• Assignment Management: View and complete assignments with detailed information
• Leaderboard: Track progress against peers
• Problem Tracking: Report and track problems with mentor feedback
• Progress Visualization: Visual representation of learning progress
• Doubts Resolution: Post questions for mentor review

For Mentors

• Mentee Management: View and manage list of mentees
• Task Assignment: Create and assign tasks to mentees
• Progress Monitoring: Track mentee progress with detailed analytics
• Poll Creation: Create polls to gather feedback and engagement
• Questions Management: Manage question banks for assessments
• Doubts Response: Review and respond to mentee doubts

Common Features

• Authentication: Secure login and signup
• User Profiles: Customizable user profiles
• Navigation: Tab-based and drawer navigation for easy access
• Real-time Updates: Live data synchronization
• Offline Support: Async storage for offline access
• Responsive Design: Optimized for various screen sizes

Tech Stack

• Framework: React Native (v0.84.1)
• Language: TypeScript (v5.8.3)
• State Management: Zustand (v5.0.12)
• Navigation: React Navigation (v7.x)
  • Bottom Tabs Navigation
  • Drawer Navigation
  • Native Stack Navigation
• HTTP Client: Axios (v1.13.6)
• UI Components:
  • React Native Vector Icons (v10.3.0)
  • React Native SVG (v15.15.4)
  • React Native Reanimated (v4.3.0) for animations
• Storage: React Native Async Storage (v1.23.1)
• Styling: Custom theme system with colors and typography
• Testing: Jest (v29.6.3) with React Test Renderer
• Code Quality: ESLint (v8.19.0), Prettier (v2.8.8)
• Build Tools: Metro Bundler, Babel (v7.25.2)

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: >= 22.11.0
• npm or yarn package manager
• Git: For version control
• Android Development:
  • Android Studio or Android SDK
  • JDK 11 or higher
  • Android SDK API level 24 or higher
• iOS Development (macOS only):
  • Xcode 12 or higher
  • CocoaPods
  • Ruby (for pod installation)

For detailed setup instructions, refer to the React Native Environment Setup Guide.

Installation

1. Clone the Repository

git clone <repository-url>
cd mobile

2. Install Dependencies

npm install

Or if using Yarn:

yarn install

3. Setup Native Dependencies

For iOS (macOS only)

# Install Ruby dependencies
bundle install

# Install CocoaPods
bundle exec pod install

For Android

No additional setup required if Android SDK is configured correctly.

Running the App

Start Metro Bundler

First, start the Metro JavaScript bundler (keep this running in a separate terminal):

npm start

Or:

yarn start

Run on Android

In a new terminal window:

npm run android

Or:

yarn android

Run on iOS

In a new terminal window (macOS only):

react-native run-ios

Or use Xcode directly:

open ios/mobile.xcworkspace

Then build and run from Xcode.

Project Structure

src/
├── components/              # Reusable UI components
│   ├── atoms/              # Basic components (Badge, Button, Input, etc.)
│   ├── layout/             # Layout wrappers (ScreenWrapper)
│   └── molecules/          # Composite components (Cards, Rows, etc.)
├── navigation/             # Navigation configurations
│   ├── AuthNavigator.tsx
│   ├── RootNavigator.tsx
│   ├── MenteeNavigator.tsx
│   └── MentorNavigator.tsx
├── screens/                # Screen components
│   ├── auth/              # Authentication screens (Login, Signup)
│   ├── mentee/            # Mentee-specific screens
│   ├── mentor/            # Mentor-specific screens
│   └── dev/               # Development/testing screens
├── services/              # API and service layer
│   ├── api/              # API client and interfaces
│   ├── live/             # Live API endpoints
│   └── mock/             # Mock data for testing
├── store/                # Zustand state stores
│   ├── authStore.ts
│   ├── menteeStore.ts
│   └── mentorStore.ts
├── theme/                # Design system
│   ├── colors.ts
│   ├── typography.ts
│   └── index.ts
├── types/                # TypeScript type definitions
├── utils/                # Utility functions
│   ├── animations.ts
│   ├── formatters.ts
│   └── toast.ts
└── styles/               # Global styles and constants

Development

Code Quality

Run ESLint to check code quality:

npm run lint

Format code with Prettier:

npx prettier --write src/

Testing

Run Jest tests:

npm test

Watch mode for development:

npm test -- --watch

Development Tips

• Hot Reload: Make changes to TypeScript/React files and they'll automatically reload
• Debugging: Use React Native Debugger or Chrome DevTools
• Component Gallery: Visit the ComponentGalleryScreen to see all available UI components
• State Management: Use Zustand stores in src/store/ for global state
• Type Safety: Always define proper TypeScript types in src/types/

Contributing

We welcome contributions! Please follow these guidelines:

Getting Started

1. Fork the repository and clone your fork locally
2. Create a feature branch from main:

   git checkout -b feature/your-feature-name

3. Make your changes and commit with clear messages:

   git commit -m "feat: add new feature description"

Code Standards

• Use TypeScript for all new code (no .js files)
• Follow the existing code structure and naming conventions
• Use functional components with React hooks
• Write meaningful component names that describe their purpose
• Keep components small and reusable
• Add proper type annotations for props and state

Commit Message Format

Follow the Conventional Commits format:

<type>(<scope>): <subject>

<body>

<footer>

Types: feat, fix, docs, style, refactor, test, chore

Examples:

• feat(mentee): add assignment completion tracking
• fix(auth): resolve login error handling
• docs: update README with setup instructions

Pull Request Process

1. Ensure code quality:

   npm run lint
   npm test

2. Test on both platforms (Android and iOS if possible)
3. Write a clear pull request description explaining:
   • What changes were made
   • Why they were made
   • How to test them
4. Link related issues if applicable
5. Request review from maintainers

Before Submitting a PR

• All tests pass: npm test
• Code is properly formatted: npm run lint
• No console warnings or errors
• Changes work on both Android and iOS
• TypeScript types are properly defined
• Components are documented with JSDoc comments

Troubleshooting

Common Issues

Metro Bundler Issues

# Clear Metro cache
npm start -- --reset-cache

Android Build Issues

# Clean Android build
cd android && ./gradlew clean && cd ..
npm run android

iOS Pod Issues

# Remove and reinstall pods
rm -rf ios/Pods ios/Podfile.lock
bundle exec pod install

Port Conflicts

If Metro bundler fails to start:

# Kill process on port 8081
# On macOS/Linux:
lsof -ti:8081 | xargs kill -9

# On Windows (PowerShell):
Get-Process -Id $(Get-NetTCPConnection -LocalPort 8081).OwningProcess | Stop-Process

Dependency Issues

# Clear npm cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Debugging

• React Native Debugger: Download from here
• Chrome DevTools: Press d in Metro bundler console
• Android Studio Logcat: View device logs with adb logcat
• Xcode Console: View iOS logs in Xcode

Resources

• React Native Documentation
• React Navigation Docs
• Zustand Store
• TypeScript Handbook

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For questions or issues, please:

1. Check the Troubleshooting section
2. Search existing GitHub issues
3. Create a new issue with detailed information

For more information, please visit CocoaPods Getting Started guide.

# Using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.

This is one way to run your app — you can also build it directly from Android Studio or Xcode.

Step 3: Modify your app

Now that you have successfully run the app, let's make changes!

Open App.tsx in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by Fast Refresh.

When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:

• Android: Press the R key twice or select "Reload" from the Dev Menu, accessed via Ctrl + M (Windows/Linux) or Cmd ⌘ + M (macOS).
• iOS: Press R in iOS Simulator.

Congratulations! 🎉

You've successfully run and modified your React Native App. 🥳

Now what?

• If you want to add this new React Native code to an existing application, check out the Integration guide.
• If you're curious to learn more about React Native, check out the docs.

Troubleshooting

If you're having issues getting the above steps to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources:

• React Native Website - learn more about React Native.
• Getting Started - an overview of React Native and how setup your environment.
• Learn the Basics - a guided tour of the React Native basics.
• Blog - read the latest official React Native Blog posts.
• @facebook/react-native - the Open Source; GitHub repository for React Native.