Git Product home page Git Product logo

quizzel's Introduction

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!

quizzel's People

Contributors

vishal8700 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.