Sebastian Molenda
397 lines
16 KiB
HTML
397 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>QuizzyMind App Documentation</title>
|
|
<link rel="stylesheet" href="app.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<div class="logo">
|
|
<span class="logo-icon">🎮</span>
|
|
Quizzy<span style="color: var(--accent);">Mind</span>
|
|
</div>
|
|
<h1>QuizzyMind App Documentation</h1>
|
|
<p class="header-subtitle">A comprehensive guide to installing, configuring, and customizing your React Native Expo quiz application.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="content">
|
|
<div class="toc" id="table-of-contents">
|
|
<h3 class="toc-title">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
Table of Contents
|
|
</h3>
|
|
<ul class="toc-list">
|
|
<li><a href="#introduction">Introduction</a></li>
|
|
<li><a href="#requirements">Requirements</a></li>
|
|
<li><a href="#installation">Installation</a></li>
|
|
<li><a href="#project-structure">Project Structure</a></li>
|
|
<li><a href="#configuration">Configuration</a></li>
|
|
<li><a href="#key-features">Key Features</a></li>
|
|
<li><a href="#customization-guide">Customization Guide</a></li>
|
|
<li><a href="#api-integration">API Integration</a></li>
|
|
<li><a href="#deployment">Deployment</a></li>
|
|
<li><a href="#troubleshooting">Troubleshooting</a></li>
|
|
<li><a href="#support">Support</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<section class="section" id="introduction">
|
|
<h2>Introduction</h2>
|
|
|
|
<p>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.</p>
|
|
|
|
<h3>Key Features</h3>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧠</div>
|
|
<h4>Multiple Quiz Categories</h4>
|
|
<p>Extensive question bank with various categories</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🏆</div>
|
|
<h4>Real-time Leaderboards</h4>
|
|
<p>Compete with friends and track progress</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🎨</div>
|
|
<h4>Modern UI</h4>
|
|
<p>Clean design with smooth animations</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🧭</div>
|
|
<h4>Expo Router</h4>
|
|
<p>Optimized navigation experience</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📱</div>
|
|
<h4>Cross-platform</h4>
|
|
<p>Works on both iOS and Android</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="requirements">
|
|
<h2>Requirements</h2>
|
|
|
|
<p>Before you begin, ensure you have the following installed:</p>
|
|
|
|
<ul>
|
|
<li><strong>Node.js</strong> (v14.0.0 or newer)</li>
|
|
<li><strong>npm</strong> (v6.0.0 or newer) or <strong>Yarn</strong> (v1.22.0 or newer)</li>
|
|
<li><strong>Expo CLI</strong> (<code>npm install -g expo-cli</code>)</li>
|
|
<li><strong>Android Studio</strong> (for Android development)</li>
|
|
<li><strong>Xcode</strong> (for iOS development, macOS only)</li>
|
|
<li><strong>Git</strong></li>
|
|
</ul>
|
|
|
|
<div class="note">
|
|
<p><strong>Note:</strong> You can verify your Node.js and npm versions by running <code>node -v</code> and <code>npm -v</code> in your terminal.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="installation">
|
|
<h2>Installation</h2>
|
|
|
|
<p>Follow these steps to get the app up and running:</p>
|
|
|
|
<ol class="steps">
|
|
<li>
|
|
<strong>Clone or extract the project files</strong>
|
|
<pre><code># If you downloaded as a zip, extract it
|
|
cd QuizzyMind-app</code></pre>
|
|
</li>
|
|
|
|
<li>
|
|
<strong>Install dependencies</strong>
|
|
<pre><code>npm install
|
|
# or with yarn
|
|
yarn install</code></pre>
|
|
</li>
|
|
|
|
<li>
|
|
<strong>Start the development server</strong>
|
|
<pre><code>npx expo start or npm start</code></pre>
|
|
</li>
|
|
|
|
<li>
|
|
<strong>Run on device/simulator</strong>
|
|
<ul>
|
|
<li>Press <code>i</code> to open in iOS simulator</li>
|
|
<li>Press <code>a</code> to open in Android emulator</li>
|
|
<li>Scan QR code with Expo Go app on physical device</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
|
|
<div class="note">
|
|
<p><strong>Tip:</strong> If you encounter any issues during installation, refer to the <a href="#troubleshooting">Troubleshooting</a> section.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="project-structure">
|
|
<h2>Project Structure</h2>
|
|
|
|
<div class="project-structure">QuizzyMind-app/
|
|
├── app/ # Main application code using Expo Router
|
|
│ ├── (pages)/ # All screens inside this folder
|
|
│ ├────────── _layout.js # Root layout component
|
|
│ ├────────── CategoryScreen.jsx # Category Screen
|
|
│ ├────────── QuizScreen.jsx # QuizScreen Screen
|
|
│ ├────────── ResultScreen.jsx # ResultScreen Screen
|
|
│ ├── _layout.js # Root layout component
|
|
│ └── index.js # Home screen
|
|
├── assets/ # Static assets like images, fonts
|
|
├── components/ # Reusable UI components
|
|
│ ├── common/ # Shared components
|
|
│ ├── quiz/ # Quiz-related components
|
|
│ └── ui/ # UI elements (buttons, cards, etc.)
|
|
├── constants/ # App constants and theme settings
|
|
├── contexts/ # React contexts for state management
|
|
├── hooks/ # Custom React hooks
|
|
├── services/ # API services and external integrations
|
|
├── utils/ # Utility functions
|
|
├── app.json # Expo configuration
|
|
├── babel.config.js # Babel configuration
|
|
├── package.json # Dependencies and scripts
|
|
└── README.md # Basic readme</div>
|
|
</section>
|
|
|
|
<section class="section" id="key-features">
|
|
<h2>Key Features</h2>
|
|
|
|
<h3>Quiz Engine</h3>
|
|
|
|
<p>The quiz system supports:</p>
|
|
<ul>
|
|
<li>Multiple quiz categories</li>
|
|
<li>Various question types (multiple choice, true/false)</li>
|
|
<li>Timed quizzes</li>
|
|
<li>Score tracking and history</li>
|
|
<li>Difficulty levels</li>
|
|
</ul>
|
|
|
|
<h3>User Interface</h3>
|
|
|
|
<p>The UI is built with:</p>
|
|
<ul>
|
|
<li>Custom components for consistent design</li>
|
|
<li>Smooth animations and transitions</li>
|
|
<li>Dark/light mode support</li>
|
|
<li>Responsive layouts for different device sizes</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="section" id="customization-guide">
|
|
<h2>Customization Guide</h2>
|
|
|
|
<h3>Theme Customization</h3>
|
|
|
|
<p>Edit the theme variables in <code>constants/Theme.js</code>:</p>
|
|
|
|
<div class="code-filename">constants/Theme.js</div>
|
|
<pre><code>// 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
|
|
};</code></pre>
|
|
|
|
<h3>Content Customization</h3>
|
|
|
|
<p>Quiz questions are stored in <code>data/quizData.js</code>. Modify this file to add your own questions:</p>
|
|
|
|
<div class="code-filename">data/quizData.js</div>
|
|
<pre><code>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
|
|
];</code></pre>
|
|
|
|
<h3>Adding New Screens</h3>
|
|
|
|
<p>To add a new screen with Expo Router:</p>
|
|
|
|
<ol>
|
|
<li>Create a new file in the <code>app</code> directory, e.g., <code>app/newScreen.js</code></li>
|
|
<li>Define your screen component:</li>
|
|
</ol>
|
|
|
|
<div class="code-filename">app/newScreen.js</div>
|
|
<pre><code>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',
|
|
},
|
|
});</code></pre>
|
|
</section>
|
|
|
|
|
|
<section class="section" id="deployment">
|
|
<h2>Deployment</h2>
|
|
|
|
<h3>Publishing to Expo</h3>
|
|
|
|
<ol>
|
|
<li>Create an Expo account at <a href="https://expo.dev" target="_blank">expo.dev</a></li>
|
|
<li>Configure your app in <code>app.json</code>:
|
|
<ul>
|
|
<li>Update <code>name</code>, <code>slug</code>, and <code>owner</code></li>
|
|
<li>Set appropriate version numbers</li>
|
|
<li>Configure splash screen and icons</li>
|
|
</ul>
|
|
</li>
|
|
<li>Build and publish:
|
|
<pre><code>expo build:android # For Android APK/AAB
|
|
expo build:ios # For iOS IPA
|
|
expo publish # For Expo Go distribution</code></pre>
|
|
</li>
|
|
</ol>
|
|
|
|
<h3>Submitting to App Stores</h3>
|
|
|
|
<h4>Android (Google Play)</h4>
|
|
|
|
<ol>
|
|
<li>Generate a signed AAB:
|
|
<pre><code>eas build -p android --profile production</code></pre>
|
|
</li>
|
|
<li>Follow Google Play Console submission guidelines</li>
|
|
</ol>
|
|
|
|
<h4>iOS (App Store)</h4>
|
|
|
|
<ol>
|
|
<li>Generate a signed IPA:
|
|
<pre><code>eas build -p ios --profile production</code></pre>
|
|
</li>
|
|
<li>Submit through App Store Connect</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section class="section" id="troubleshooting">
|
|
<h2>Troubleshooting</h2>
|
|
|
|
<h3>Common Issues</h3>
|
|
|
|
<h4>Metro Bundler Issues</h4>
|
|
<pre><code># Clear cache and restart
|
|
expo start -c</code></pre>
|
|
|
|
<h4>Dependency Problems</h4>
|
|
<pre><code># Reset node_modules
|
|
rm -rf node_modules
|
|
npm install</code></pre>
|
|
|
|
<h4>Expo SDK Version Conflicts</h4>
|
|
<p>Ensure all packages are compatible with your Expo SDK version in <code>package.json</code>.</p>
|
|
|
|
<div class="note">
|
|
<p><strong>Tip:</strong> Most common issues can be resolved by clearing your cache and reinstalling dependencies.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="support">
|
|
<h2>Support</h2>
|
|
|
|
<p>For additional support, please contact us at <a href="mailto:support@email.com">support@email.com</a> or visit our support page on TemplateMonster.</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 QuizzyMind App | All Rights Reserved</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<a href="#" class="back-to-top" id="backToTop">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 15l-6-6-6 6"/>
|
|
</svg>
|
|
</a>
|
|
|
|
<script>
|
|
// Back to top button functionality
|
|
const backToTopButton = document.getElementById('backToTop');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.pageYOffset > 300) {
|
|
backToTopButton.classList.add('visible');
|
|
} else {
|
|
backToTopButton.classList.remove('visible');
|
|
}
|
|
});
|
|
|
|
backToTopButton.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
});
|
|
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
if (this.getAttribute('href') === '#') return;
|
|
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |