- - 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.
-