Welcome to Quizzel, a dynamic and engaging quiz application built with React! Whether you want to challenge yourself with solo quizzes or compete with friends in one-on-one mode, Quizzel has got you covered. With a sleek and responsive design, Quizzel ensures a seamless experience across both desktop and mobile devices.
- Solo Mode: Play quizzes on your own and improve your knowledge.
- One-on-One Mode: Challenge your friends in a competitive quiz battle.
- Responsive Design: Enjoy a seamless experience on both desktop and mobile devices.
- Dynamic City Suggestions: Get city suggestions as you type for weather-related quizzes.
- Professional UI: Professional and creative design with a consistent look and feel.
To get started with Quizzel, follow these steps:
-
Clone the repository:
git clone https://github.com/yourusername/quizzel.git cd quizzel
-
Install dependencies:
npm install
-
Run the application:
npm start
Once the application is running, you can access it at http://localhost:3000
.
- Home: Start the game or read the rules.
- Quiz Solo: Play quizzes on your own.
- Quiz One-on-One: Challenge a friend to a quiz battle.
- About: Learn more about Quizzel.
- Privacy Policy: Read our privacy policy.
src/
components/
header/
Header.js
Header.css
footer/
Footer.js
Footer.css
quiz/
Quiz.js
Quiz.css
question/
Question.js
Question.css
options/
Options.js
Options.css
pages/
home/
Home.js
Home.css
quizsolo/
QuizSolo.js
QuizSolo.css
quizoneonone/
QuizOneOnOne.js
QuizOneOnOne.css
App.js
App.css
index.js
- Header: Contains the logo, app name, and navigation links (Instagram, Twitter, More Games, Privacy, About).
- Footer: Professional and creative design similar to other quiz games.
- Quiz: Main component for rendering quizzes.
- Question: Displays each quiz question.
- Options: Displays answer options for each question.
- Home: Landing page with a game screen, start game button, and rules button.
- QuizSolo: Component for solo quiz mode.
- QuizOneOnOne: Component for one-on-one quiz mode.
- PrivacyPolicy: Contains the app's privacy policy.
Quizzel uses Google Font "Poppins" by default for all its CSS styles, ensuring a modern and clean look. All CSS files are kept in their respective component folders for maintainability and consistency.
We welcome contributions to Quizzel! If you would like to contribute, please fork the repository and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.
This project was developed in collaboration with Verve Bridge, combining our expertise to create an exceptional quiz application.
Check out this video to see Quizzel in action! 🎥👇
This project is licensed under the MIT License. See the LICENSE file for details.
Feel free to modify this README to better suit your needs or to add more details specific to your project!