QuizUp Single Player Web Gunnar Marteinsson Kristinn Júlíusson Sonja Jónsdóttir Steinar Þór Árnason May 12, 2016 Instructor: Stefán Freyr Stefánsson T-404-LOKA Examiner: Lóa Jóhannsdóttir School of Computer Science QuizUp Single Player Web Abstract In this report we discuss the B.Sc. project named QuizUp Single Player Web. The project was developed at Reykjavik University in the spring of 2016 in collaboration with Plain Vanilla Games, the makers of the world famous QuizUp app. We developed a Single Player Web application based on the original multiplayer game. 2 QuizUp Single Player Web Contents 1 Introduction6 2 Product Description7 2.1 The Project...................................7 2.2 Development Environment...........................8 3 Work Procedure9 3.1 Kanban.....................................9 3.2 Repositories...................................9 3.3 Work Hours................................... 10 3.4 Kanban Board.................................. 11 3.5 Backlog..................................... 14 3.6 Milestone.................................... 14 3.6.1 Milestone Planning........................... 14 3.6.2 Milestone Review............................ 15 3.6.3 Milestone Schedule........................... 15 3.7 Meetings..................................... 16 4 Project Structure 17 4.1 Time management............................... 17 4.2 Calendar..................................... 17 4.3 Backlog..................................... 18 5 Risk Analysis 19 5.1 Managing Events................................ 20 6 Architecture 26 6.1 Components................................... 27 3 QuizUp Single Player Web 6.1.1 Frontend................................. 27 6.1.2 Backend................................. 27 6.1.3 REST URI............................... 28 6.2 QuizUp Single Player.............................. 29 6.2.1 Home Screen.............................. 29 6.2.2 Topic Screen............................... 30 6.2.3 Question Screen............................. 31 6.2.4 Continue Screen............................. 32 6.2.5 Wildcard Screen............................ 33 6.2.6 Game Over Screen........................... 34 7 Milestones 35 7.1 Milestone 0................................... 35 7.2 Milestone 1................................... 36 7.2.1 Status.................................. 36 7.2.2 Milestone Backlog............................ 37 7.2.3 Summary................................ 38 7.3 Milestone 2................................... 39 7.3.1 Status.................................. 39 7.3.2 Milestone Backlog............................ 41 7.3.3 Summary................................ 41 7.4 Milestone 3................................... 43 7.4.1 Status.................................. 43 7.4.2 Milestone Backlog............................ 45 7.4.3 Summary................................ 45 7.5 Milestone 4................................... 47 7.5.1 Status.................................. 47 4 QuizUp Single Player Web 7.5.2 Milestone Backlog............................ 48 7.5.3 Summary................................ 48 7.6 Milestone 5................................... 49 7.6.1 Status.................................. 49 7.6.2 Milestone Backlog............................ 50 7.6.3 Summary................................ 51 7.7 Milestone 6................................... 52 7.7.1 Status.................................. 52 7.7.2 Milestone Backlog............................ 53 7.7.3 Summary................................ 53 7.8 Milestone 7................................... 55 7.8.1 Status.................................. 55 7.8.2 Milestone Backlog............................ 57 7.8.3 Summary................................ 58 7.9 Milestone 8................................... 59 7.9.1 Status.................................. 59 7.9.2 Milestone Backlog............................ 61 7.9.3 Summary................................ 61 8 Project Summary 63 9 Future 64 10 Special Thanks 65 11 Appendix 67 11.1 Google Calendar................................ 67 5 QuizUp Single Player Web 1 Introduction Plain Vanilla Games is an Icelandic Software company, best known for the trivia game QuizUp which was released in November 2013. The company headquarters are located in Reykjavík, Iceland. The QuizUp game was released for iOS in November 2013 and for Android in March 2014 followed by Windows Phone in June 2015. The game has evolved over the years and changed from being a multiplayer trivia game to a social media network where users share their interests. The game has been translated to 7 different languages and total number of users are over 70 million. In the the fall of 2015, NBC announced that they were working in co-operation with QuizUp to release a TV series based on the game. The premiere date has not been officially revealed. Recently QuizUp released a single player game mode, based on the multiplayer version, for Android and iOS. The goal of our project is to develop the single player game mode as a web application. This report is structured as follows. In section 2 we discuss the scope of the project, how the game is played and the development environment. In section 3 we discuss our work methodology. In section 4 we discuss time management and backlog planning. In section 5 we review risk analysis which was updated throughout the project. In section 6 we emphasize on the architecture of the project and take a look at the most important screens of the game. In section 7 we discuss the progress over the whole project. Section 8 is a short summary of the project and section 9 follows up with our future vision for this project. 6 QuizUp Single Player Web 2 Product Description Our final project was to create a single player QuizUp web application. It was developed in collaboration with Plain Vanilla Games, the creators of QuizUp. The game is a standalone application and follows QuizUp’s style that can be found on their Brandisty1 page. 2.1 The Project The final product is a running web application and a backend for the game. It is user friendly and the design is similar to the current QuizUp game, using the same fonts and color schemes. It allows a user to play QuizUp in single player mode at his own pace, which is currently not available in the browser based version. All of the code we wrote is property of Plain Vanilla Games according to a contract signed by each individual team member. The company provided us with accommodation for the duration of the project. We had our own work space at the QuizUp offices at Laugarvegur 77, 101 Reykjavík. 1brandisty.com/quizup 7 QuizUp Single Player Web 2.2 Development Environment We did the project on our own computers. For the development of the project we used various frameworks and libraries. The following are the most prominent tools that we used, this is not an exhaustive list: Frontend • React – A JavaScript library for building user interfaces. ◦ Redux – A predictable state container. • NodeJS – An asynchronous event driven framework. Backend • NodeJS ◦ Mongoose – elegant mongodb object modeling for node.js. Data structures • Redis – An in-memory data structure store. • MongoDB – A NoSQL cross-platform document-oriented database. Facebook API – Various user interactions. Mocha – Used to unit test both frontend and backend. ESLint – Syntax rules to enforce a certain style of coding. A more detailed description of these tools can be found in section6. 8 QuizUp Single Player Web 3 Work Procedure This chapter presents the basic work procedures of the team. A short explanation of the Kanban methodology and use of Git for source code management. Our schedule and work flow. Our adaptation of Kanban and how we used it to organize ourselves. Our Kanban board setup and how we categorized tasks along with various degrees of how long a task should, based on estimates, take to fully complete. 3.1 Kanban In our first few meetings we discussed which methodology team members wanted to use. We decided to use the Kanban methodology over Scrum, for couple of reasons. The first being that QuizUp uses it. The latter being that we wanted more flexibility during planning. However, we also used some of the methods from Scrum and mixed them with Kanban. Kanban is a lean approach to agile software development and is supposed to be more adaptive than other methods used in the past as it has less of an overhead compared to Scrum. The main benefit of Kanban is that bottlenecks become visible in real-time. Scrum has many benefits which we looked into, like the time-boxed iterations. In later chapters we will describe these milestones (called sprints in Scrum) to the reader. Roles are not traditionally prescribed in Kanban. However, the team decided to inherit some Scrum methods with minor alterations and we will be using the roles: Product Manager (Product Owner) and Kanban Manager (Scrum Master). 3.2 Repositories For source code management we will be using Git and GitHub. The company provided us with two private GitHub repositories to work on. One for the backend and one for the frontend. Our repositories are not connected to any of QuizUps existing services and will be developed as a standalone application. 9 QuizUp Single Player Web 3.3 Work Hours To accommodate other school obligations we defined our project hours as such: Team Member Monday Tuesday Wednesday Thursday Friday Week Gunnar Optional 9:30 - 16:00 9:30 - 16:00 9:30 - 15:00 9:30 - 15:00 24 Kristinn Optional 9:30 - 16:00 9:30 - 16:00 9:30 - 15:00 9:30 - 15:00 24 Sonja Optional 9:30 - 16:00 9:30 - 16:00 9:30 - 15:00 12:00