QuizzyMind App Documentation

Introduction

QuizzyMind is a fully functional quiz application built with React Native and Expo Router. This documentation will guide you through setting up and customizing the application to meet your specific needs.

Key Features

Requirements

Before you begin, ensure you have the following installed:

• Node.js (v14.0.0 or newer)
• npm (v6.0.0 or newer) or Yarn (v1.22.0 or newer)
• Expo CLI (npm install -g expo-cli)
• Android Studio (for Android development)
• Xcode (for iOS development, macOS only)
• Git

Installation

Follow these steps to get the app up and running:

1. Clone or extract the project files

   # If you downloaded as a zip, extract it
   cd QuizzyMind-app

2. Install dependencies

   npm install
   # or with yarn
   yarn install

3. Start the development server

   npx expo start or npm start

4. Run on device/simulator
   • Press i to open in iOS simulator
   • Press a to open in Android emulator
   • Scan QR code with Expo Go app on physical device

Project Structure

Key Features

Quiz Engine

The quiz system supports:

• Multiple quiz categories
• Various question types (multiple choice, true/false)
• Timed quizzes
• Score tracking and history
• Difficulty levels

User Interface

The UI is built with:

• Custom components for consistent design
• Smooth animations and transitions
• Dark/light mode support
• Responsive layouts for different device sizes

Customization Guide

Theme Customization

Edit the theme variables in constants/Theme.js:

// Example theme customization
export const COLORS = {
  primary: '#6366F1',
  secondary: '#8B5CF6',
  accent: '#FFD166',
  // Add your custom colors
};

export const FONTS = {
  // Customize font families
};

export const SIZES = {
  // Customize spacing and sizes
};

Content Customization

Quiz questions are stored in data/quizData.js. Modify this file to add your own questions:

export const QUIZ_CATEGORIES = [
  {
    id: 'general',
    title: 'General Knowledge',
    icon: 'brain',
    questions: [
      {
        id: 'q1',
        question: 'What is the capital of France?',
        options: ['London', 'Berlin', 'Paris', 'Madrid'],
        correctAnswer: 'Paris',
        difficulty: 'easy'
      },
      // Add more questions here
    ]
  },
  // Add more categories
];

Adding New Screens

To add a new screen with Expo Router:

1. Create a new file in the app directory, e.g., app/newScreen.js
2. Define your screen component:

import { View, Text, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';

export default function NewScreen() {
  const router = useRouter();
  
  return (
    <View style={styles.container}>
      <Text>New Screen Content</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Deployment

Publishing to Expo

1. Create an Expo account at expo.dev
2. Configure your app in app.json:
   • Update name, slug, and owner
   • Set appropriate version numbers
   • Configure splash screen and icons
3. Build and publish:

   expo build:android    # For Android APK/AAB
   expo build:ios        # For iOS IPA
   expo publish          # For Expo Go distribution

Submitting to App Stores

Android (Google Play)

1. Generate a signed AAB:

   eas build -p android --profile production

2. Follow Google Play Console submission guidelines

iOS (App Store)

1. Generate a signed IPA:

   eas build -p ios --profile production

2. Submit through App Store Connect

Troubleshooting

Common Issues

Metro Bundler Issues

# Clear cache and restart
expo start -c

Dependency Problems

# Reset node_modules
rm -rf node_modules
npm install

Expo SDK Version Conflicts

Ensure all packages are compatible with your Expo SDK version in package.json.

Support

For additional support, please contact us at support@email.com or visit our support page on TemplateMonster.