Quiztopia

Welcome to Quiztopia! This is a personal web app project built using React and Vite, designed to offer interactive quizzes on more than twenty various topics over three levels of diffiulty. The app features a user-friendly interface powered by Material UI for styling and CSS3 for additional design elements. Axios is used to make API calls to fetch quiz questions and data, while Google Firebase is storing your results to display in the leaderboard!

Features

• Choose quiz categories and difficulty levels.
• Answer multiple-choice questions with instant feedback.
• Track your score as you progress through the quiz.
• Enjoy a responsive and visually appealing design.
• Responsive design for errors
• Light/Dark mode switch

Installation

1. Clone the repository:

git clone https://github.com/alessandro-001/React-Quiz-Application.git

2. Navigate to the project directory:

cd quiz-app

3. Install dependencies using npm or yarn:

npm install

4. Run the development server:

npm run dev

Technologies Used

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool that optimizes your frontend development workflow.
• Material UI: A popular React UI framework that provides pre-styled components and styles.
• Axios: A promise-based HTTP client for making API calls.
• CSS3: Used for additional styling and design enhancements.
• Firebase: As backend to store your result to display on the leaderboard.

Usage

1. Launch the app and select a quiz category and difficulty level.
2. Click the "Start Quiz" button to begin the quiz.
3. Answer the multiple-choice questions by clicking on the provided options.
4. Receive immediate feedback on your answers.
5. View your score at the end of the quiz.

Play the hosted version here: https://quiztopia-webapp.netlify.app/

Screenshots

Acknowledgements

• The quiz questions and data are sourced from API https://opentdb.com/api_config.php.
• The icons used in the footer are from https://devicon.dev/
• The Tab icon is from Quiz icons created by Freepik - Flaticon
• This app was inspired by the desire to improve my front end skills and to create an engaging and educational platform for users to test their knowledge.

Please visit my web portfolio, Linkedin or GitHub profile by clicking on my name at bottom page or directly here: https://alessandrofrondini.netlify.app/ and don't be shy to send me suggestions, always looking forward to improve myself!

Contributing

Contributions are welcome! Feel free to submit issues or pull requests.