Design and build an innovative education software or product for Microsoft Imagine Cup 2023

• Main Author: Chen, Jian Liang
• Other Authors: Boon Chirn Chye
• Format: Final Year Project
• Language: English
• Published: Nanyang Technological University 2023
• Subjects: Engineering::Computer science and engineering::Software::Software engineering; Engineering::Electrical and electronic engineering
• Online Access: https://hdl.handle.net/10356/167604
• Institution: Nanyang Technological University

This report focuses on the development of a live, evolving, interactive “Learning Map” software that allows users to explore subjects, topics, concepts, and more that they may find useful in their career or personal lives, and track their learning progress in these subjects or fields. This Learning Map is developed as a web application (web app) that can be accessed by any user via a web browser. The report showcases the implementation of the Front-End and Back-End of the web application, and describes how it is deployed to the Internet. On the Front-End, the React and D3.js JavaScript frameworks are used to construct the main Learning Map and the various user Login and Sign Up pages of the web app. Bootstrap, a CSS framework, is used for styling and creating user interface components. These frameworks shape how the web app is presented to the user. For the Back-End, the Django Python-based web framework is used to build an application on the server side for handling user authentication and interaction with the database. A PostgreSQL database is utilised for storing user data, which includes each user’s node data relating to the Learning Map, such as the nodes’ completion states. Together, these Back-End components enable a visitor to register for an account, log in to the site, and save the state of their nodes on the Learning Map. To deploy the web app, three Microsoft Azure services are used: Azure Static Web Apps for hosting the Front-End React app, Azure App Service for hosting the Back-End Django app, and Azure Database for PostgreSQL to host the PostgreSQL database. Upon deployment, users can access the Learning Map over the Internet. With a Learning Map, nodes representing subjects, topics, concepts, and more can be clearly laid out in a visual form that is easy to understand, navigate around, and explore. Making it available on the Internet as a web app brings tremendous convenience to users who will be able to access and use it whenever and wherever they are.