Take a quiz: https://kthquizify.firebaseapp.com! (use Google Chrome for sound to work)
A web music quiz where the user can play and create quizzes to share.
The web app is using Spotify API and it is built in ReactJs (JavaScript, HTML, CSS). Programmed three colleagues and I in an Interaction Web Programming course (2019).
git clone git@github.com:kthquizify/Quizify.git
cd Quizify
yarn install
In src/components/Firebase add a file config.js with credentials of following format:
const config = {
apiKey: "abcdefghijklmnopqrstuvxyz",
authDomain: "project.firebaseapp.com",
databaseURL: "https://project.firebaseio.com",
projectId: "project",
storageBucket: "project.appspot.com",
messagingSenderId: "1234567890"
};
export default config;
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Deploys the react app to firebase. Should ony be used from master branch.
- Log in with Spotify account
- Play a quiz
- Filter and search for quizzes or quiz author
- Choose a quiz
- Play the quiz
- Get your result & the songs used in the quiz
- Play another quiz!
- Create a new quiz
- Enter quiz name, author name and set language
- Create questions
- Add Spotify songs by searching directly in the app
- Add question, and answer options
/public
- index.html
The foundation in which the app rests.
/src
- /components
- /CreateQuiz
- CreateQuiz.js
Component to create quiz.
- CreateQuiz.js
- /EndGame
- EndGame.js
Shows the results from the played quiz, and prints the artists and songs from the quiz.
- EndGame.js
- /Firebase
- config.js
Contains the network secrets for the Firebase API. - context.js
Creates context's so that different parts of the Firebase connection can be instantiated from different parts of the component hierarchy. - firebase.js
Serves as our model for calling the Firebase API. - indes.jx
Exports the necessary functionalities from this folder.
- config.js
- /Navigation
- Navigation.js
Creates html code for navigation. - Navigation.scss
Styles the navigation component with Sassy CSS.
- Navigation.js
- /Question
- Question.js
Creates a question component. - Question.scss
Styles the question component with Sassy CSS.
- Question.js
- /SelectQuiz
- SelectQuiz.js
Creates a select quiz component.
- SelectQuiz.js
- /Spotify
- Spotify.js
Creates a spotify component and connections to the Spotify API. - Spotify.scss
Styles the spotify component with Sassy CSS.
- Spotify.js
- /SpotifyLogin
- SpotifyLogin.js
Contains the spotify login part.
- SpotifyLogin.js
- /SpotifySongSelect
- SpotifySongSelect.js
Component to search for songs when creating quiz.
- SpotifySongSelect.js
- /StartQuiz
- StartQuiz.js
Contains a button that starts the quiz. - StartQuiz.sccs
Styles the startquiz component with Sassy CSS.
- StartQuiz.js
- /CreateQuiz
- /constants
- colors.scss
Exports scss-variables for useful colors. - routes.js
Exports string-constants for each path used as a route.
- colors.scss
- /containers
- CreateQuizPage.js
Container holding the create quiz page. - LandingPage.js
Creates the landing page.
Corresponds to the '/' route. - NoMatch.js
Page shown if chosen a wrong route. - QuizPage.js
Creates the quiz playing page.
Corresponds to the '/playQuiz' route. - SelectPage.js
Creates the select quiz page.
Corresponds to the '/selectQuiz' route.
- CreateQuizPage.js
- /styles
- CreateQuizPage.scss
Styles the CreateQuizPage component with Sassy CSS. - LandingPage.scss
Styles the LandingPage component with Sassy CSS. - QuizPage.scss
Styles the QuizPage component with Sassy CSS. - SelectPage.scss
Styles the SelectPage component with Sassy CSS.
- CreateQuizPage.scss
- App.js
Router for the application. - App.test.js
Test-file for application stability. - index.css
Global css for the entire application. - index.js
Instantiates the application and firebase connection. - serviceWorker.js
Default React service worker.