/Quizzel

Quiz App in React

Primary LanguageJavaScriptMIT LicenseMIT

Quizzel X Verve Bridge

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.

vervebridge

Table of Contents

Features

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

Installation

To get started with Quizzel, follow these steps:

  1. Clone the repository:

    git clone https://github.com/yourusername/quizzel.git
    cd quizzel
  2. Install dependencies:

    npm install
  3. Run the application:

    npm start

Usage

Once the application is running, you can access it at http://localhost:3000.

Navigation

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

File Structure

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

Components

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

Styling

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.

Contributing

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.

Collaboration

This project was developed in collaboration with Verve Bridge, combining our expertise to create an exceptional quiz application.

Demo Video

Check out this video to see Quizzel in action! 🎥👇

Quizzel Demo

License

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!