SilverWallets
Frameworks / Languages / Concepts used:
Python, Kivy Framework, Scikitlearn (machine learning), Firebase, APIsProject time frame:
January 2023 - March 2023 (2 months) [completed]Links:
GitHub project repo, KickStarter VideoDescription:
In Secondary Three, we were tasked to develop a real-world solution for a real-world problem for our Computing+ Coursework. After much brainstorming and ideation, we settled upon a problem -> Financial Health of Elderlies. Market research and findings have revealed that with the cost of living increasing drastically in recent years, the elderly will find it harder to manage their wealth and retire comfortably. As such, we decided to create SilverWallets.
Brief overview of the app:
SilverWallets is a FinTech app specifically developed to cater to the elderly in Singapore, helping them to manage their wealth better.
This app is built on the Python Kivy platform, hosting a simple and clean UI. It utilises regression models trained via the scikitlearn Python package. This model helps to accurately predict users upcoming expenditures, plotting them on a scatter plot.
Our Advisory Spending Limit system is designed to create a daily budget based on the income of the user, as well as compare their spending habits against the general spending patterns of other Singaporeans and the government's official guidelines. It is formulated based on real-world data provided by the Singaporean government and independent researchers. It helps to visualise users' expenditures through matplotlib's line graph and pie chart.
The app also features a receipt OCR to allow for easier input of data and a Firebase backend to save users' data, enabling the sharing of accounts with family members and safeguarding it against digital threats.
My experiences during this project were primarily positive. It gives me a new insight into the five stages of developing a program: gather requirements, plan solutions, write code, test & refine and deploy code. It integrates the different ideas taught, like flowcharts, input validation and debugging, with advanced real-world concepts like machine learning, market research and time complexity.
In this project, I got to experience building a UI with the Kivy Framework. This proves quite challenging as previously, I have only built interfaces with frameworks like Flutter and Swift, which are more refined and comprehensive. Kivy has a smaller community and fewer features, which proved a challenge when I was trying to design a clean, modern UI. What most computing-related classes in schools don't teach us is how to utilise pre-existing solutions on the net. As such, I was elated that this Coursework granted me the freedom to explore solutions like a Receipt OCR API or a Firebase Cloud Storage, which I implemented with ease.
In a similar vein, machine learning is an increasingly prevalent topic in the technology field. As such, I was glad that I was able to experience developing a machine-learning model for this project. It has taught me really advanced notions like an ensemble method and data augmentation. As well as reinforce my concepts of the different machine learning paradigms. I also had my hand in integrating the different algorithms cohesively into one, which proves to be a frustrating & buggy experience. This task really challenged my debugging skills; requiring me to design a whole new testing data generator to help with this task.
Overall, this Coursework has helped rein in various concepts taught in school and advanced self-taught knowledge, at the same time giving me real-world insights into the routine of developing software, wokring in a team and developing different aspects.
To learn more about our project, check out the KickStarter Video or the GitHub project page mentioned above
Games 4 Migrants
Frameworks / Languages / Concepts used:
Flutter, FirebaseProject time frame:
June 2022 - July 2022 (2 months) [completed]Links:
GitHub project repo, WebsiteDescription:
This is a website developed specifically for the partnership betweeen SST and the Migrant Workers' Centre in Singapore. This project helps bridge the gap between the migrant workers in Singapore and the Singapore community in general by providing an easy way for them to understand our culture.
In March 2022, a group of (Active Citizenship Education) ACE leaders and I started a student-initiated VIA project. Our targeted beneficiaries are migrant workers working here in Singapore. We hatched various plans, from packing food packs to creating board games for them. Due to the COVID-19 situation, our only realistic, viable option is the latter. However, we decided to take a spin on it. We decided to harness our talent in technology to create online puzzle games instead. I passionately volunteered to be given the monumental task of creating a platform to host these games.
As we were still unsure of the platform (Web, Android, iOS) to target, I made the decision to develop our product on the Flutter framework, as its cross-platform development environment can easily allow us to create for all three platforms. Being relatively new to the framework, I took around two weeks to learn the language and framework entirely from scratch. It took a while to get used to, but after a month and a half, I have primarily completed the main parts, working closely with the designer to implement the design. I personally find the hot reload feature in Flutter a huge time-saver. I spent the last few weeks polishing up and preparing for the release. It was an rewarding feeling to see the usage analytics on our Firebase hosting service increasing by the second when we finally released it.
Diving into the project's more technical aspects, developing a web app with Flutter also proves quite a challenge. Flutter web is mostly still at its infant stage, with various performance issues. As such, it is pretty hard to optimise it to have a smooth user experience. Solving these issues involves research on the different rendering engines and CORS policies.
Overall, this experience has given me a real taste of what it is like to develop software in collaboration with external organisations and given a tight schedule, which will prove extraordinarily helpful in the time to come. It also added a new skill (Flutter) to my repertoire.
Colorgram - Flutter Color Extraction Package
Frameworks / Languages / Concepts used:
Dart, FlutterProject time frame:
March 2024 (1 Month)Links:
GitHub project repo, pub.dev siteDescription:
When researching a potential app idea, I wanted a program that extracts the prominent colours from an image. I chanced upon the Colorgram.JS library available in npm. However, as I wanted to use it in my Flutter projects, and was hesitant on using the Javascript interop, I decided to port the library over to pure Dart in order to be used as a Flutter package. I took the chance to understand the algorithm behind extracting prominent colours from images.
In essence, this is how it worked. I first decoded the bytes of different image files, PNG,JPEG, into an array of RGBA values. I then used a formula to calculate the relative luminance, hue and lightness values from the RGB values. These values are packed together using bitwise operations to get a denary value that is used to store the RGB values along with a count variable. The count variable is then incremented as RGB values with similar packed values get added. Thus, the prominent colours can be determined by the value of the count variable.
This is different to iterating the RGB values which would not be as effective due to human perception, where we might deem a certain colour as most prominent when in actual fact its pixel does not appear the most, one cause is due to the concept of perceptual uniformity.
Developing this project really taught me the importance of writing proper documentation and writing a good example and README file.
After publishing my package on pub.dev, the platform for Dart & Flutter packages, I received valuable feedback on performance via a GitHub open issue. Regrettably, the original program's performance didn't meet my expectations, primarily due to inefficiencies in image processing. The library I utilised for decoding images from bytes proved to be too sluggish. In response, I dedicated time to experimenting with various implementations. Through diligent testing and optimization efforts, I achieved a significant performance boost, improving the program's speed by nearly eightfold.
Personal Portfolio Website
Frameworks / Languages / Concepts used:
HTML, CSS, Figma, Mockup Tools, Firebase, Keynote, Pingdom (website performance check)Project time frame:
March 2023 - ongoing (1 months) [work-in-progress]Links:
GitHub project repo, Figma Design PrototypingDescription:
In March 2023, I realised the importance of having a personal portfolio website to showcase my talents and accomplishments. Therefore, I decided to learn HTML and CSS to achieve this goal.
Web programming using HTML, CSS, and JS is a mature technology, and I found it refreshing to be part of a large and knowledgeable community that offers well-documented support for solving a wide range of problems. Unlike other frameworks where there is usually only one solution, there are many methods of solving a particular problem in web programming, either by using javascript, css, or html. For example, when making a div a link, many suggested using javascript for an on-click function, but I discovered that wrapping it in an tag is a better way SEO-wise.
To start the project, I learned the basics of HTML and CSS, such as semantic HTML and flexboxes, through the Odin Project. Then, I designed the website on Figma, refining and adjusting it with each iteration according to feedback from friends and personal testing.
Working on front-end web development was a new and refreshing experience for me compared to app development. This journey taught me a lot about the design-thinking process and allowed me to reflect on myself as I created the portfolio website. Although I enjoyed the experience, the most significant challenge was juggling my academics amidst the busy academic period in school.
This project was also one of the larger projects I have embarked on after the rise of Generative Pre-trained Transformers like Chat-GPT. I utilised this revolutionary technology to assist me in some areas of the developmental process, eg: Python code that batch compresses. However, despite its many praises, I experienced firsthand the major shortcomings of artificial intelligence. It is still not capable of heavily assisting software development, although it shows promising potential.
During this project, I learned a lot about user experience, responsive web design, website load times, and the use of appropriate font sizes. I realised the importance of fast load times and utilised performance checkers like Pingdom to find areas for improvement. Search-Engine-Optimisation (SEO), was also a very important factor for me to ensure maximum visibility. One area that heavily boosted performance was image compression. I also experimented with techniques like lazy scrolling, minification, gzip compression, and asynchronous javascript loading to reduce load times.
Credits: All logos or images used to represent organizations are the property of their respective owners and are used here for identification purposes only. Card design adapted partially from Jhey on Codepen Hero Images by Ruido98 on Unsplash
FishToolbox
Frameworks / Languages / Concepts used:
Flutter, pub.devProject time frame:
June 2022 - ongoing (periodically) [work-in-progress]Links:
GitHub project repoDescription:
After completing my first Flutter project, I decided to develop a comprehensive application that would offer a variety of tools in one convenient location. Although there are many online tools available, they are typically standalone offerings, requiring users to download multiple applications to solve different problems. My app aims to solve this issue by serving as a hub for various technological tools.
While I was passionate and motivated to begin this project, I soon encountered several challenges. For instance, I learned the importance of design-planning before starting to code, as I struggled to design and code simultaneously. This experience highlighted the significance of following a structured development process.
During my development journey, I also discovered pub.dev, a library that houses thousands of packages developed by talented Flutter developers, providing free-to-use packages with varying degrees of capabilities.
Hearth
Frameworks / Languages / Concepts used:
Swift, Figma, FirebaseProject time frame:
June 2021 - August 2021 (3 months) [completed]Links:
GitHub project repoDescription:
Hearth was developed as part of a school project in July 2021, with a focus on addressing contemporary global issues. We identified mental health as a prevalent concern and decided to tackle it through our solution. This project marked one of my first experiences with a large-scale app development effort, and it enabled me to learn critical skills in programming using the Swift framework.
In addition to programming skills, I also gained valuable insights into the business aspects of product development, including conducting market research, empathising with targeted users, defining key performance indicators (KPIs), retention strategies, and financial analysis.
