Giter Club home page Giter Club logo

areyousolid's Introduction

Introduction

This angular project was created in order to practice a niche of angular 2+ development and SOLID skills. It's a simple page where you can learn about SOLID principles and take a quiz of 15 questions about it. Next, you will be given a score which you can share and compare results with others.

You can do the quiz now!

Features/Build with

  1. Firebase Anonymous Authentication. These temporary anonymous accounts can be used to: track if a user has done the quiz; get the results; and work with data protected by security rules.

  2. Firebase realtime Database. Real time database allows a user to submit his score and see the other users' scores. You can't see other users' score if you did not submit your own results.

  3. Angular Material. This was used to style the tables, spinners, buttons, etc...

  4. ngx-highlightjs. This package allows the example codes to get highlight and not be displayed as simple text.

Getting started

You can do the quiz now following https://kiril1512.github.io/AreYouSolid/#/Home or run the project localy folowing the Installing instructions bellow.

Prerequisites

  1. Angular CLI

  2. Nodejs

  3. Fireabase

Installing

  • First download or clone this repository.
  • Then install the packages.
npm install
  • Create a firebase project in the Firebase Console.
  • Activate the anonymous provider in the Authentication configuration (https://console.firebase.google.com/project/<yourProject>/authentication/providers).
  • Create a Realtime Database (https://console.firebase.google.com/project/<yourProject>/database) in the test mode (These rules give anyone, even people who are not users of your app, read and write access to your database so you may change it later).
  • Create an aplication in the Project settings (https://console.firebase.google.com/project/<yourProject>/settings/general/).
  • Save your aplication configuration and replace it at ./src/app/app.module.ts.
const firebaseConfig = {
  apiKey: "yourApiKey",
  authDomain: "yourAuthDomain",
  databaseURL: "yourDataBaseURL",
  projectId: "yourProjectID",
  storageBucket: "",
  messagingSenderId: "yourSenderID",
  appId: "yourAppId"
};
  • Start the application.
ng serve --aot --open

Authors

Kyrylo Yavorenko - Full-Stack Developer - Linkedin

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Application preview

Home page will give you the option to start the quiz or learn about SOLID. Learn SOLID will give you some useful links and a brief summary about SOLID principles.

Home

You can answer the multiple questions and then see the explanation for the correct answer.

Quiz QuizWithAnswer

Also there are some code questions.

Code Questions

At the end you will have your results which you can share.

Results ResultsSubmited

Project Structure

|-- app
	|-- Firebase
		|-- Auth
		|-- Data
	|-- Pages
		|-- About
		|-- Home
		|-- LearnSlid
		|-- Quiz
			|-- Questions
			|-- Register
			|-- Results
	|-- Shared
		|-- Points

Acknowledgments

Application/Code logic

  • The authGuard was created to forbid the non authenticated user to see the results and also forbid the authenticated user (user which has completed the quiz) to start a new quiz. The problem of anonymous authentication is that the user can simply switch the browser, clear the local storage or use the incognito mode so that the app considers that this is a different user. In normal situations, the user can see his results again after the browser was closed, since the user's "iud" is associated with the points after the results are submitted.
  • Each user can do the quiz only once (this is done to prevent, in normal circumstances, the user to do the quiz again after knowing the answers).
  • Various questions have different scores from 0.25 to 1.5 points. The maximum score is 20 points.
  • When the answer is clicked, the correct answer turns green and the others red and it shows a justification for the correct answer.
  • The authentication occurs when the user answers the last question and clicks the "Done" button.
  • You can only see the other users' results after you submit your own results.
  • If the user did not submit the results and the application is closed, the points will be lost and you cannot do the quiz again (related to the first point).

areyousolid's People

Contributors

kiril1512 avatar dependabot[bot] avatar

Stargazers

 avatar Ricardo Gomes da Rocha avatar Pedro Brito avatar AM Guru Prasath avatar  avatar  avatar

Watchers

 avatar

Forkers

e-compfast

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.