Our Experience Making a Gamification App for Skillshare
We are a multidisciplinary team of developers passionate about the intersection of education, technology and art. Skillshare is an online learning platform for creatives so it was the perfect opportunity to use our diverse backgrounds to solve a technical problem that required that we learned our knowledge about front-end and back-end development use of databases and data visualization libraries. As a final project for our training as full-stack software developers at Holberton School, we were faced with the challenge of using gamification strategies to increase user engagement and user retention for Skillshare over a period of six weeks. The first three weeks were for Research, Development of the proposal and planning and the rest for writing and deploying the app.
One of the most important elements of motivation theory used in gamification is appealing to the human need for accomplishment and development. This happens to be the main drive for learning too so we focused on it. We decided to use data visualization charts similar to the ones used in video games dashboards to provide feedback. The charts show information about the time spent on the platform, the number of lessons and classes completed and the current streak. Based on these stats, a general score and a skill-specific score is calculated and these scores are used as the input for the charts.
Architecture
Back end: Skillshare users’ activity is stored in the database as an AWS RDS service. That information includes lessons, classes, skills, and time for each user. Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more. MySQL Database Service was used for a fully managed database service to request activity data for a user. After bringing this data, it is used to create an API depending on the endpoint for each frontend feature. The back end was developed in Node Express that is a web application framework that provides a robust set of features for web and mobile applications.
Front end: React is an open-source JavaScript library used for building user UI components for this project. However, React is only concerned with rendering data to the DOM, so creating React applications usually requires the use of additional libraries for state management and routing. React Router is a navigational component that synchronizes each personalized URLs with user id and every endpoint for the visualization features in the web app. Axios library provides really simple HTTP requests to get information from the API for each frontend component, and these components were developed using D3 (Data-Driven Documents) which is a JavaScript library for manipulating documents based on data. D3 brings data using HTML, SVG, and CSS for the user’s statistical visualization. Finally, this JavaScript web app is responsive and multiplatform.
Technical Challenges
The most difficult challenge was definitely deploying the app. Our mentor suggested that we used webpack to connect the front-end and the back-end. We had React running on one port and Express on another so we needed to reorganize all the folders so that both folders were on the same level and Express did the rendering of the page. These created a lot of conflicts and some of the routes stopped working and we had to rename some files. We realized that some things only ran locally and we had to do a lot of debugging to figure out why the deploy was not working properly.
Just reaching the end of the project our team was making some tests with the “final” deployment of the app, we were checking that the data visualization components were showing the right information for the user, and we were also checking for the responsiveness of the web page on mobile devices when suddenly one of our team members saw that in one of those DataViz, more exactly in the Bubble Chart, we had added a Hover functionality in order to have an interactive feature for the user (back when we added this we didn’t realize that this would never work on mobile). We needed to solve that as quickly as possible, so we started to make deeper tests. We were working on three different kinds of machines in our team (Linux, MAC, and Windows) with different browsers (Firefox, Safari, and Chromium-based ones such as Google Chrome, and Brave). We also tested on different mobile devices and a lot of browsers. Quickly enough we noticed that the problem could easily be solved by adding a click function besides the hover function but this didn’t solve the incompatibility with Apple devices. Finally and thanks to a pretty awesome platform that we found, BrowserStack (https://www.browserstack.com/) we implemented some minor fixes on the code and in a couple of hours we could make a new “final” deploy.
Lessons Learned
We were advised to have the MVP ready as soon as possible so that we had enough time to iterate and make it better. This really helped relieve the pressure of meeting deadlines and allowed us to enjoy the process of making several small improvements beyond the MVP. Another good decision we made was to assign a person as responsible for a specific feature but work collaboratively to learn all the processes involved in creating a full app from scratch.
Authors:
Robinson Montes Gómez
Bioengineer and Software developer with an M.Sc in Basic Biomedical Science emphasis in Tissue Engineer and Regenerative Medicine. A proactive and recursive person, with a large experience in research projects about biomaterials surface modification and biomechanics. In the last 5 years had been working in Computer Science projects focused on data analysis as Bioinformatics, data cleaning, data visualization, SQL databases, and software development with Python, JavaScript, C, Matlab, and R programming languages.
An engineer who works for good interpersonal relationships and excellent communication with colleagues, all aimed at achieving objectives focused on science, technology, and innovation working with multidisciplinary groups to enhance the world. Rugby, bass guitar, and animal lover.
Linkedin: https://www.linkedin.com/in/robinson-montes
Github: https://github.com/mecomonteshbtn
Carlos Andres Murcia Muñoz
Musician with 15 years of experience in the music industry and a big passion about all technology industries. Person who believes that with application of technology we can get better results to improve our quality of life.
Linkedin: https://www.linkedin.com/in/carlos-andres-murcia-munoz
Github: https://github.com/charliemur2
Luis Miguel Vargas Guevara
Designer and entrepreneur passionate about the transversality of technology and the application of design-thinking to the inherent aspects of human life. Building a career in the IT industry thanks to many work and life experiences but primarily to satisfy the never-ending needs to learn.
Linkedin: https://www.linkedin.com/in/luismvargasg
Github: https://github.com/luismvargasg
Juan Camilo Acevedo
Psychologist and Software Development Student, entrepreneur by vocation, with experience in Group Management, Selection, Research, Administration and Management; who thinks about his work from a Cognitive Constructivist paradigm, seeking the transformation of the environment from the well-being and integral development of individuals. A professional with a high critical and purposeful sense, recognizes the values of honesty, respect and commitment as pillars of interaction.
Linkedin: https://www.linkedin.com/in/camilo-acevedo-v
Github: https://github.com/acamilojuan
Sandra Macías Alvarez
Philosopher and educator. Interested in using technology to improve the quality of education and its accessibility and contribute to social progress in general.
Linkedin: https://www.linkedin.com/in/sandra-macias
Github: https://github.com/s-macias
Links:
Landing page: https://charliemur2.github.io/gamification-landing_page/
