Skip to content

marvinrusinek/angular-10-quiz-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 Angular Quiz App

Welcome to the Angular Quiz App — an interactive, modern quiz platform built with Angular. Whether you're testing your knowledge or learning something new, this app offers a smooth and rewarding experience, complete with feedback, explanations, and a polished UI.

👉 Launch the App Now

🎯 What Makes It Awesome

✅ Multiple Question Types

Supports both single-answer and multiple-answer formats.

⏱️ Countdown Timer

Adds pressure and realism by timing each question.

📈 Live Score Tracking

Your score updates in real-time as you answer.

💡 Instant Feedback + Explanations

Learn from your mistakes with in-depth explanations for each question.

🔀 Seamless Navigation

Move between questions effortlessly via buttons or direct URL changes.

📱 Responsive Design

Optimized for desktop and mobile — enjoy the same smooth experience everywhere.

🛠️ Built With

  • Angular – Modern web framework for dynamic UIs
  • TypeScript – Strongly typed JavaScript
  • RxJS – Reactive programming with Observables
  • SCSS – Clean and maintainable styles
  • Angular Material – Sleek, ready-made UI components

📦 Getting Started

Prerequisites

Make sure you have the following installed:

Node.js (v12+)

Angular CLI (v10+)

Run Locally git clone https://github.com/yourusername/quiz-app.git cd quiz-app npm install ng serve

Then visit: http://localhost:4200

🚘 How to Use

  1. Choose a quiz category to begin.
  2. Answer each question (single or multiple answers).
  3. Click Next to proceed or use URL-based navigation.
  4. Review your score and explanations after each question.
  5. Restart the quiz anytime to challenge yourself again!

🧩 Project Structure

src/
├── app/
│ ├── components/ → UI components (questions, options, timer)
│ ├── services/ → Business logic, quiz state, navigation
│ ├── models/ → TypeScript interfaces and data structures
│ ├── pipes/ → Custom pipes for display formatting
├── styles/ → Global SCSS, themes, and variables

🧪 Development Workflow

➕ Adding a New Feature
  1. Create a new component/service in the correct folder.
  2. Write tests and verify functionality.
  3. Run local tests with:
  4. ng test

🐞 Debugging Tips

  • Use browser dev tools while running ng serve
  • Leverage Angular CLI for component/service debugging

🤝 Contributing

Contributions are very welcome!

If you find a bug, have a suggestion, or want to build a feature — please dive in.

Steps to Contribute

# Fork the repo git clone https://github.com/YOUR_USERNAME/quiz-app.git cd quiz-app

Create a feature branch

git checkout -b my-new-feature

Commit your changes

git commit -m "Add cool feature"

Push and open a PR

git push origin my-new-feature

🚧 Roadmap

Here's what’s coming next:

  • 🏆 Leaderboard – Track top scores and challenge friends
  • 🔐 User Accounts – Save progress and review history
  • 📚 More Categories – Broader quiz topics across disciplines

Want to see something added? Open an issue or contribute it!

🙌 Support the Project

If this app helped you learn, teach, or just have fun — please consider giving it a ⭐️ on GitHub. Your support directly fuels future features and improvements.

You can also:

  • Share it with others
  • Submit feedback or bugs
  • Sponsor development (if applicable)

Every bit of support counts — thank you!

📄 License

Licensed under the MIT License.

See the LICENSE file for more info.