+ + Table of Contents +
+ +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
+ +Multiple Quiz Categories
+Extensive question bank with various categories
+Real-time Leaderboards
+Compete with friends and track progress
+Modern UI
+Clean design with smooth animations
+Expo Router
+Optimized navigation experience
+Cross-platform
+Works on both iOS and Android
+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 +
Note: You can verify your Node.js and npm versions by running node -v and npm -v in your terminal.
Installation
+ +Follow these steps to get the app up and running:
+ +-
+
-
+ Clone or extract the project files
+
+# If you downloaded as a zip, extract it +cd QuizzyMind-app
+
+ -
+ Install dependencies
+
+npm install +# or with yarn +yarn install
+
+ -
+ Start the development server
+
+npx expo start or npm start
+
+ -
+ Run on device/simulator
+
-
+
- Press
ito open in iOS simulator
+ - Press
ato open in Android emulator
+ - Scan QR code with Expo Go app on physical device +
+ - Press
Tip: If you encounter any issues during installation, refer to the Troubleshooting section.
+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:
+ +-
+
- Create a new file in the
appdirectory, e.g.,app/newScreen.js
+ - 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
+ +-
+
- Create an Expo account at expo.dev +
- Configure your app in
app.json: +-
+
- Update
name,slug, andowner
+ - Set appropriate version numbers +
- Configure splash screen and icons +
+ - Update
- 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)
+ +-
+
- Generate a signed AAB:
+
+eas build -p android --profile production
+ - Follow Google Play Console submission guidelines +
iOS (App Store)
+ +-
+
- Generate a signed IPA:
+
+eas build -p ios --profile production
+ - Submit through App Store Connect +
Troubleshooting
+ +Common Issues
+ +Metro Bundler Issues
+# Clear cache and restart
+expo start -cDependency Problems
+# Reset node_modules
+rm -rf node_modules
+npm installExpo SDK Version Conflicts
+Ensure all packages are compatible with your Expo SDK version in package.json.
Tip: Most common issues can be resolved by clearing your cache and reinstalling dependencies.
+Support
+ +For additional support, please contact us at support@email.com or visit our support page on TemplateMonster.
+