A modern, fully-featured quiz application template built with React, Vite, and Tailwind CSS. Perfect for developers looking to build and customize an interactive quiz platform with a premium, Apple-inspired UI.
This template provides a solid foundation with a rich set of features, allowing you to focus on what makes your quiz unique.
- 🎨 Sleek, Modern UI: Inspired by Apple Music, with smooth animations and transitions.
- 🌗 Light & Dark Modes: Seamless theme switching with a delightful toggle animation.
- 📚 Multiple Question Types: Supports MCQs, Multiple Answer Questions (MAQs), and True/False.
- 💻 Code Snippets & Images: Easily embed formatted code blocks and images within questions.
- ⏱️ Interactive Timer: Visual timer with a circular progress bar to create a sense of urgency.
- 📊 Detailed Results: Comprehensive results screen with score, time taken, and answer review.
- 📱 Fully Responsive: A beautiful and consistent experience on all devices.
- 🔧 Easily Customizable: Built with a modular structure for easy customization and extension.
- ⚡️ Fast & Performant: Built with Vite for a lightning-fast development experience and optimized builds.
This project leverages a modern, powerful tech stack to ensure a great developer experience and a high-quality end product.
- React: For building the user interface.
- Vite: As the build tool and development server.
- TypeScript: For static typing and improved code quality.
- Tailwind CSS: For utility-first styling and theming.
- React Context: For simple, effective state management
Make sure you have Node.js (version 18 or higher) and npm installed.
-
Clone the repository:
git clone https://github.com/your-username/react-quiz-app-template.git cd react-quiz-app-template -
Install dependencies:
npm install
-
Run the development server:
npm run dev
The application will be available at http://localhost:5173.
This template is designed to be easily customized. Here’s how you can tailor it to your needs.
All theme colors and animations are defined as CSS custom properties in src/index.css. Modify the variables under the @theme and @variant dark rules to change the app's appearance.
/* src/index.css */
@theme {
/* Light Theme */
--color-theme-color: #fa2d55;
--color-card-bg: #ffffff;
/* ...and more */
}
@variant dark {
/* Dark Theme */
--color-theme-color: #fa2d55;
--color-card-bg: #1c1c1e;
/* ...and more */
}Modify the src/data/quizTopics.tsx file to add, remove, or edit quiz categories. Ensure the title matches the topic key in your question data files.
// src/data/quizTopics.tsx
export const quizTopics: QuizTopic[] = [
{
title: 'React', // This must match the 'topic' in your question file
icon: <ReactIcon />,
},
// ...
];Quiz questions are located in the src/data/QuizQuestions/ directory. You can create new files or edit existing ones. The structure supports question types, code snippets, images, and scoring.
This Vite application is ready to deploy on any modern hosting platform that supports Node.js.
The easiest way to deploy is with Vercel. Simply connect your Git repository, and Vercel will automatically detect the Vite configuration and deploy your app.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Ekky Spurgeon – spurgeonpaul11@outlook.com
This project is licensed under the MIT License. See the LICENSE file for details.