Coding Projects
In 2023, I started my Diploma in Information Technology (DIT) in Singapore Polytechnic, learning a variety of programming languages such as HTML, CSS and JavaScript.
With this knowledge I have gained from my studies and increasing interest in web development and design, I have created multiple locally hosted coding projects.
Using HTML and CSS for the user interface and elements and JavaScript for logic, I created many small projects to practice and apply the skills I have learnt and to express my creativity in a form of a webpage.
Online Supermarket Webpage
Description:
This is the first full-stack project I have developed using HTML, CSS, JavaScript, Node.js, MySQL, PostgreSQL and Prisma for the Database Systems module I was taking in Singapore Polytechnic.
This is a simple online shopping website where users can view, review, favourite and checkout multiple products. Using JavaScript /Node.js for the logic, PostgreSQL for database management and Prisma for the Object-relational mapping, I ensured that the backend of this website is fully functional and able to create, retrieve, update and delete data from my PostgreSQL server. Along with the user interface, which I created and designed with HTML and CSS to give the website a more finished and clean look.
​
Rock paper scissors game
Description:
This is a rock, paper, scissors game I have made. For the options, I used radio buttons as it helps create a minimalist yet straightforward UI design for the user. I also added extra effects like an SVG spinner to create suspense before the result is shown and confetti for when the user wins!
​
Temperature Converter
Description:
This is a temperature calculator I have made. This converts temperature in Degree Celsius (°C) to Fahrenheit (°F), implemented using a JavaScript function consisting of the conversion formula and user inputs from the HTML input elements.
​
Mathematical Calculator
Description:
This is a calculator I have made. The UI layout is inspired by the iPhone's calculator app with the buttons lighting up whenever the cursor is hovering over it and flashing whenever it is clicked. For the functionality, I used the JavaScript function 'eval()', which is used for evaluating integers, to calculate the numbers on the display.
​
Cat Themed Coin Flipper
Description:
This is a cat themed coin flip game I have made. For the coin, I used CSS to add colour and a radial gradient on the top left to make it look shiny and realistic. For the functionality, I used the JavaScript method Math.random() to get the 50/50 chance needed, and added extra effects like confetti for when the output is displayed.
​
Tic Tac Toe Game
Description:
This is a tic tac toe game I have made. For the grids, I used CSS to align it to the center and add colour and a grey border around them. For the design of the webpage, I used React.js to create the components with the useState and useRef functions to dynamically update text and used JavaScript for the game logic. Additionally, I added confetti for when the user wins to make the experience more gamified.
​
Zenith Technologies
Description:
During my Year 2 Semester Break in 2024, Me and 4 of my schoolmates created a software development startup called Zenith Technologies. This startup consisted of 4 software developers from the Diploma in Information Technology (DIT) and 1 accountant from the Diploma in Accountancy (DAC). With this team, we participated in the SP Batey Hackathon 2024, creating the application called Fresko and becaming one of the finalist in the hackathon.
​​
Singapore Polytechnic
Environmental Sustainability Webpage
Description:
This is the first front-end project I have developed using HTML, CSS, JavaScript and Bootstrap 5 for the Front-End Development module I was taking in Singapore Polytechnic, it is called Project Earth.
This website promotes Singapore Polytechnic's actions for environment sustainability and my 3 personal goals towards it​ along with a educational content to inform and persuade youths about enivornmental sustainability and how their contributions can help make a better future. In addition, this website is responsive due to the addition of Bootstrap 5 and it works on smaller displays like mobile phones as well.​
​​
Telegram ChatGPT 4o MINI Chatbot
Description:
This is a telegram chatbot I have created using the platform Telegram and ChatGPT's 4o mini. This required me to POST data from the messages sent from the telegram chat to the API and return the response as a message back into Telegram.
The bot and token was created using Botfather, and the API key was from OpenAI after payment. I selected the GPT 4o mini model as it is a lightweight model that can perform a variety of tasks that most chatbots should be able to complete. ​
​​​
Work In Progress
During my school breaks, I have created multiple coding side projects however, due to my current schedule as a full-time student, I am unable to complete and show all of them off currently. Therefore, I have made a list of my side projects that are currently a work in progress and will be done when I have the time!
​
WIP:
1. A website that takes in user input and allows the user to move HTML elements (like a car) with the keys WASD on their keyboard. Essentially like a mini 2D driving game.
​
2. A full-stack weather app that uses the Fetch method and the weather API by Open Weather to fetch the weather data from that API and display it on the app with the frontend, and JavaScript to allow filtering of weather data by region from the user
​​​
3. A mathematical quiz game where the user can get random maths questions that they can solve for practice, In addition, it allows users to increase or decrease the difficulty of the questions by increasing how big the numbers are, how many numbers are being used in an equation at once or both at the same time (more difficulty increments will be explored).