This project is a collaborative effort from team Callback(Patrick), for the March 2021 Code Institute Hackathon. This project is based on the theme of bringing people together during the Covid Pandemic for St.Patrick's Day 2021, as a Quiz with an emphasis on humor and laughter for the whole family comparing the User and their proposed answers to that of the main man himself...aul St.Pat!
The team consists of the following developers, for which, without them this project would not have been possible:
This web application utilises a smaller tech stack then the norm in the form of HTML/CSS/JS/Bulma/Firebase to ensure that the project had ample scope to suit the timeframe available of the hackathon.
The project encompasses the use of Git & Github in a team setting using Forks/Branches/Pull Requests/Upstream Pulls etc to allow each developer on the team have some hands-on experience of a team building environment via version control. This allowed for increased security over the main upstream repository, for which this project's source code and is deployed through, and allowed each developer to have singular experience in reviewing/approving/merging Pull Requests as collaborators on this project. Again utilising this approach allowed each of us to bolster knowledge or even learn new things along the way!
Firebase was utilised to host the Questions & Answers and Leaderboard rankings away from the source code, removing the ability to cheat. A Backend-as-a-Service (BaaS) allowed the projects complexity to be drastically reduced as it removed the time consuming efforts of a bespoke backend and configuring same. Technically outsourcing the responsibility of maintaining and managing a typical backend and allowing us as developers to focus our efforts on the Frontend.
Bulma was used as a new CSS Framework for the structuring and layout of the project. It is lightweight, comes with a suite of well written documentation and more importantly does not contain a Javascript inclusion dependency. Which meant we as a team again had freedom to add custom JS to the interactive components needed fortifying our knowledge and skills with the language. The framework is mobile first and works similar to Bootstrap meaning our previous knowledge learned on the course came to great benefit.
Generic (Guest/Public) User:
- As a Generic User, I want to be able to view the site on any device I may have, (mobile/tablet/desktop).
- As a Generic User, I want to have the ability to view the established Accessibility Statement & Privacy Policy if any.
- As a Generic User, I want to have the ability to play the game.
- As a Generic User, I want to have the ability to view a leaderboard to see how I compared against others.
- As a Generic User, I want to have the ability to navigate between pages seemlessly and easily.
- As a Generic User, I want to have the ability to play a mobile friendly game to pass some time while on the go.
Developer:
- As a developer, I want to create fully responsive app to showcase my skills to a potential employer.
- As a developer, I want an on-going project I can enhance and improve over time as my skills grow.
- As a developer, I want to imporve on my existing skills using HTML/CSS/JS.
- As a developer, I want to use new languages/tools/services to promote and compliment my exisiting knowledge and competencies.
- As a developer, I want to create secrets and easter eggs in the project adding to the overall experience of the project to the user.
- As a developer, I want to work comprehensively with Git/Github attributing to my overall competency of this globally used professional version controlling tool.
- As a developer, I want to work in a team to enhance my communication skills.
- As a developer, I want the experience of working in sprints with an impending closing deadline giving me the potential to learn proactively to problems as they arise.
Throughout this project the below fonts are used to promote a friendly and appealing nature. Both fonts are sans serif typefaces, with a backup font of sans-serif, in case of any particular font not rendering as expected. They both greatly compliment each other, with "Luckiest Guy" giving a 1950s advertisement custom hand lettering feel for our headers and "Poppins" bringing a more geometric sans-serif typeface allowing for increased human readability and enhanced eye-tracking on screens.
- Headings - Luckiest Guy
- Body - Poppins
Our color scheme is inspired by St.Patrick's day and muted tones. Allowing for constrating elements to be defined by the user with ease and promoting good User Experience amongst the site.
#2a3719- Primary color#5f6c39- Secondary color#ddd5ba- Tertiary color#e04b32- Supplementary color#cd8741- Supplementary color 2
Logo and mascot were created in Illustrator. The font "Luckiest Guy` was used along with a palette of greens and oranges in keeping with the theme of St. Patricks day. 'Seamus' the shamrock was created as an additional asset to be included in quiz feedback.
Wireframes for this project were created using Sketch, for small and large viewports. Each element was structurally planned out before building the project to allow us to build to a plan saving on time and potential bottlenecking via scope creep.
Wireframes
- HTML/CSS/JS ~ core languages used to build this site.
- Firebase ~ BaaS used to store Questions&Answers and Leaderboard results for population to the site and to itself from the site.
- Bulma ~ Pure CSS Component Frontend framework for layout and overall fronend architecture.
- Gitpod/vsCode/PyCharm ~ preferred used editors/IDEs to develop the project.
- Git ~ installed on local machines or default built into Gitpod.
- Github ~ used to host the repository and version control the site, aswell as used for deployment of the project.
- W3C HTML Validator / W3C CSS Validator / JSHint ~ Used to check the validity and efficiency of the code base.
- Autoprefixer CSS Online ~ Used to check for possible webkits required in the applications stylesheet ensuring Cross-browser support.
- Font Awesome Icons ~ For iconography not custom to the site.
- Sketch ~ Used to create the wireframes.
- Illustrator ~ Used to create the custom logos and icons.
- tinypng.com ~ Used to compress images used throughout the site without affecting image integrity/quality.
Google's Firebase was used as a backend-as-a-service. Specifically, Cloud Firestore was used as a Cloud Database. It is a NoSQL, document-oriented database.
It was used for two collections of data leaderboard and questions-and-answers.
As mentioned before, two collections of data were stored on Cloud Firestore. Firestore uses JSON model (under the hood) to store it's data and is as follows:
collection --> document --> fields
For the leaderboard, it only had one Document - Scores. This document contained all user names and their subsequent scores.
Here is how its modelled:
leaderboard { // collection
scores: { // document
"John Smith": 80, // field
"Jane Doe": 80, // field
..
..
..
}
}
As scores are added to the document over time, it must be sorted for the leaderboard - this is handled client side in leadboard.js on line: 22.
It was important to have a backend such as Cloud Firestore to store the Answers as to prevent people from using Dev Tools to find the correct answers. The Questions were stored alongside them for convenience. It had a Document per Question (10 in total).
Here is how its modelled:
questions-and-answers { // collection
questionOne: { // document
answers: [ // field
choiceOne,
choiceTwo,
choiceThree,
choiceFour,
],
correctIndex: 2, // field
explained: "explanation text", // field
},
..
..
..
questionTen: { // document
answers: [ // field
choiceOne,
choiceTwo,
choiceThree,
choiceFour,
],
correctIndex: 0, // field
explained: "explanation text", // field
},
}
In the nature of a Hackathon, we wanted to keep it simple, clear and succinct. We advoided adding any unnecessary features that would slow us down such as sign-up / login. We decided storing data for Users between sessions was not a priority and does not effect the overall UX.
The core features of the Web App are:
- How to Play Drop-Down
- Navbar Hamburger Menu when at ~1024px width.
- Quiz and Submit Answers
- Results Modal after Quiz allows you to submit your score to Leaderboard
- Leaderboard displays all scores by users, ordered by score
- Various Easter Eggs planted around the site
Responsive pages containing a site common navbar and footer.
Contains:
- site logo as home link.
- links to Home, the quiz and the leaderboard.
The navbar collapses at the Tablet scren size, condensing the menu options into a dropdown menu.
Contains:
- Link to privacy policy
- Social media links
- Link to Accessibility
Contains:
- A styled responsive banner image.
- A How to play dropdown instructions meny - with common site styling.
- A call to action button to begin the quiz.
Contains:
- A list of 10 questions to judge how like st. Patrick you are.
- The questions are supplied to the user one-by-one, as the user clicks and submits his answer.
- The scores are then calculated and the user is given a result.
- The user is then able to enter their name and add their score to a leaderboard.
- oh and theres that thing.
Contains:
- A list of the top 10 people who played the quiz.
- The data is provided via Firebase.
Contains:
- Accessability details.
Contains:
- Privacy policy details.
- Share functionality for the user to share their score with friends and family.
- Difficulty setting, dependent on age group.
- User Custom quiz creation.
- Sign-up / Login - store past attemps, provide Rewards to be sent to the User based on score
As we were getting familiar with a new CSS Framework - Bulma, we encountered a few bugs that led to some unexpected behaviour related to responsiveness and design.
Using the .content class to contain our ordered list for the leaderboard, lead to some uneven centering of the leaderboard items that can be observed here:
Using Dev Tools, we discovered there was some margin-left and margin-top on the <ol> element. To fix this, we implemented the following style change:
.content ol {
margin-left: 0;
margin-top: 0;
}
Saving these changes then fixed the issue as can be observed here:
Another Bug we ran into was related to Firebase, we were encountering the following error message on quiz.js:
Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()
We were trying to call Firebase before it was initialized due to it being called inside an async task that was not resolved yet. We fixed this issue by implementing the following into firebase.js:
As a safety measure, we also added the following to firebase.js:
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}else {
firebase.app();
}
If there were no firebase apps initialized, it would initialize it, otherwise call firebase.app() to load the methods needed.
At approximately ~1024px width, the Navbar Items become a hamburger-style Shamrock. We found that for certain pages the hamburger button would not trigger a drop down navbar.
We discovered that we needed to include the following to all .html pages to ensure navbar was working as expected:
<script src="assets/js/main.js" type="module" defer></script>
It contained the code that would trigger class manipulation on the click event of the hamburger icon.
Manual Testing
| Function | Browser | Result |
|---|---|---|
| Homepage Resposivness | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Quiz Responsiveness | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Leaderboard Responsivness | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Modal Responsivness | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Privacy Responsivness | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Leaderboard Responsivness | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Quiz Submit | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Modal Score Submit | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Load Leaderboard | Chrome / Firefox / Safari / Opera / Edge | Pass |
| Navbar | Chrome / Firefox / Safari / Opera / Edge | Pass |
This application was developed in multiple editors, Gitpod/vsCode/PyCharm, and version controlling was utilised via local (git) and online (github) repository technologies.
Deploying this application was achieved through Github pages by:
- Selecting the Repository from my list in the Github Dashboard.
- Navigating to "Settings" and to the "Github Pages" section.
- From the "Source" section, click on the dropdown and select "main" branch from the associated list.
- Once "main" branch is selected, the page will auto-refresh and navigate the user to the top of the page with a visual ribbon display detailing, "Github pages source saved", indicating the success of the deployment.
- The link to the website can then be found under the "Github Pages" section, with a ribbon notification stating: "Your site is published at "https://.github.io//"
To clone the website:
Select the Repository from the Github Dashboard.
- Click on the "Clone or download" green button located above and to the right of the "Add file" button.
- Click on the "clipboard icon" to the right of the Git URL to copy the web URL of the Clone.
- Open your preferred editor/IDE and navigate to the terminal window.
- Type
git clone <paste-clone-url-here>and press "Enter/Return" on your keyboard. - This will create a clone of the project for you.
This project and the workings of this project was an incredible experience. I truly enjoy getting to know people and learning from them. The level of knowledge and professional experience from my colleagues has been truly inspiring and one I won't soon forget. From a team perspective I couldn't have asked for greater people. Humble, willing with their time and relatable....each person has brought to this team strengths which I lacked both as a developer and as a person and allowed me to situate myself in a position to bolster my confidence and broaden my competencies. Whatever the outcome, I'm proud of us. I am very grateful for this experience, and thank you all for your hard work! 🤜 -- Anthony
Disclaimer: This project was created for educational use only as part of the Code Institute 2021 March Hackathon!
