Student Work
Project Showcase

Project Showcase

The project showcase is a place for students to show off their projects. Below are some of the projects that students have worked on in the past. At the end of the course, you will have the opportunity to submit your project to be included in the showcase too. Feel free to browse through the projects below to get some inspiration for your own project.

Fall 2023

Project Portfolio + Journaling App

I developed a portfolio website that displays all the projects I have worked on. This includes presentations, video demonstrations, and comprehensive descriptions. Additionally, I built and deployed a Custom Journal App to the website. This app requires users to sign in using Google Authenticator and allows them to write journal entries. All data is stored in Firestore.

GitHub repository: https://github.com/jinki-lee/JournalApp (opens in a new tab)

Live demo: https://project.jinkilee.ca/Journal (opens in a new tab)

Developer: Jinki Lee

Contact info:

Prowling Gryphon Studios

This is a personal portfolio page that showcases my skills in web development. Inside of it I have some projects that showcase nextAuth, Mongodb, and utilizing different providers to access a secure webpage. Alongside Node.js, next.js, react, Ive also used Mongodb and nextAuth, as well as Daisyui and tailwind css for the styling.

https://github.com/Prepsld/prowlinggryphonstudio (opens in a new tab)

https://prowlinggryphonstudio.vercel.app/ (opens in a new tab)

David Prepsl: davidprepsl@gmail.com

Duc Nguyen Resume

This is my personal website to be used as my resume when I apply for a developer job. It has map tab that display Calgary public libraries. I used leaflet library to build the map.

GitHub repository: https://github.com/DucPhatNg9a5/CV_Duc (opens in a new tab)

Live Demo: https://cv-duc.vercel.app/ (opens in a new tab)

Developer: Duc Nguyen

Contact info: Duc.Nguyen@edu.sait.ca

MarketNews

My project lets users input a company ticker (e.g. AAPL) and returns an overview to some of the latest news articles about the company. These can be clicked which will open a new tab to the article so that the user can read it. The technologies I used were React and Next.js frameworks.

GitHub repository: https://github.com/Austin-Huynh/project_market_news (opens in a new tab)

Live demo: https://project-market-news.vercel.app/ (opens in a new tab)

Developer: Austin-Huynh

Contact info: https://www.linkedin.com/in/austin-huynh-6791b8186/ (opens in a new tab)

URL Shortener

A URL shortener with an animated background built with React using Tailwind.

GitHub repository: my_project (opens in a new tab)

Live demo: URL_Shortener (opens in a new tab)

Developer: Sam

Contact info: samantha.bogen@edu.sait.ca

Village-Vote

Tech stack: Next.js, Rust, SQLite

Village-Vote is a voting system which allows creating polls, voting and populating the results. In order to simplify the process of opinion gathering, the application features voting methods including single select, multi select and ranking. While many fancy survey tools include more advance features, Village-Vote is dedicated to simplicity and accessibility. Regardless of your navigation methods, Village-Vote provides an intuitive and user-friendly experience that ensures everyone can participate in the decision-making process.

GitHub repository: ClippyCat/village-vote (opens in a new tab)

Live demo: Village-Vote (opens in a new tab)

Developer: Melody Shih

Contact info:

notes to myself

You can add, delete, save, and edit the note you write. We use Dasiui for our interface and Typescript for our backend.

GitHub: https://github.com/ahmadhmi/notes-to-myself (opens in a new tab)

Live demo: https://notes-to-myself.vercel.app/notes (opens in a new tab)

Developer: Qiaomu Lei

Contact info: qiaomulei@gmail.com

What's In My Pantry?

"What's In My Pantry?" is a web application designed to help users efficiently manage and track the contents of their pantry. From the homepage, users can start by clicking the "Start Now" button and signing in using their GitHub account. Users can then access their own virtual pantry and can easily add, categorize, and delete items from their pantry. Leveraging the external API TheMealDB, the application suggests recipes based on the checked items that are available in the user's pantry, and upon clicking a recipe, the instructions are then shown. The user-friendly application offers a variety of features to simplify the way users organize their pantry and plan their meals.

The technologies used in this application include React, Next.js, Tailwind CSS & DaisyUI, and Firebase.

Live Demo: https://cprg306-project-gilt.vercel.app/ (opens in a new tab)

Melody Scout

Discover and enjoy personalized music recommendations.

GitHub repository: https://github.com/Ccrewe92/MelodyScout_WebFinal (opens in a new tab)

Live demo: https://melody-scout-web-final.vercel.app (opens in a new tab)

Developers: Clinton Crewe, Devon Woodruff, Ahmed Hijazi, Hailey Nam

Contact info: woorim558@gmail.com

Mittens Bot

Simple Discord Bot focused on entertainment and miscellaneous commands.

GitHub repository: https://github.com/Maikiby/mittens-bot (opens in a new tab)

Live demo: https://mittens-bot.vercel.app/ (opens in a new tab)

Developer: Sergio Martinez

Contact info: https://www.linkedin.com/in/sergiomartinez9702/ (opens in a new tab)

Inertia

In this project we have created a crypto tracking app which follows select tokens such as Bitcoin, Ethereum, Solana and a few others. There is a login page which can allow you to login using your github or google. This is done using firebase authentication. We also employed firestore database for other database needs. From there you can navigate to the dashboard page which utilizes Shad-cn as its main UI library. navigating to the market page shows you all the tokens that are follows on this app. This is gathered from an external api which fetches and displays the token information.

GitHub Repository: https://github.com/CryptoJoe33/cprg306-projectdashboard (opens in a new tab)

Live Demo: https://cprg306-projectdashboard.vercel.app/ (opens in a new tab)

Developer: Joey Adam, Will Bexte, Anton Koulikov, Godwin Mercado, Sam Kebert, and Antonio Hernandez

Contact info: https://www.linkedin.com/in/godwin-jb-mercado/ (opens in a new tab)

CryptoPulse

CryptoPulse is a web app for tracking your crypto portfolio and other crypto market data. You can input your specific token holdings to track your overall portfolio value as well as other personal analytics.

Live demo: https://cprg306-projectdashboard.vercel.app/ (opens in a new tab)

Contact info:

J.A.M.L Paintings

GitHub repository: https://github.com/lisakamdem/jamlpainting (opens in a new tab)

Live demo: https://jamlpainting.vercel.app/ (opens in a new tab)

Developer: Lisa Kamdem

Contact info: Lisapatricia1@hotmail.com, https://www.linkedin.com/in/lisa-kamdem/ (opens in a new tab)

Mood Tracker

This project was made to track peoples moods over time. The idea is, you select a date on the calendar and add your mood level, the emotions you're feeling, and small description as to why you're feeling that way. everything is saved locally right now, but in the future I would like to make it save to a database and have authentication.

Github repository: https://github.com/Malkos316/mood-tracker-web-app (opens in a new tab)

Live demo: https://mood-tracker-web-app.vercel.app/ (opens in a new tab)

Developer: Markus Luthi

Contact info: Markus.Luthi@gmail.com

Words of Westero

"Words of Westeros" is an interactive website designed for fans of the "Game of Thrones" series, providing a digital anthology of memorable quotes from the iconic show. Users can delve into the wisdom, wit, and war cries that echo through the halls of the Seven Kingdoms, with the ability to filter these utterances by the Great Houses from which they originated. Whether you swear by the old gods or the new, this site invites you to revisit the powerful words that shaped the fates of characters and houses alike.

GitHub repository: https://words-of-westeros-alexltyt.vercel.app/ (opens in a new tab)

Live demo: https://words-of-westeros-alexltyt.vercel.app/ (opens in a new tab)

Developer: Shek Yin Leung (Sunbath)

Contact info:

GameDataBase

Web application designed for gamers to discover and track video game releases. The platform enables users to search a comprehensive game database, offering a wide selection of titles. After logging in with their GitHub accounts via Firebase authentication, users can save their favorite games. These saved games are then displayed in an intuitive calendar format, powered by react-calendar, showing their release dates.

GitHub repository: https://github.com/kevinchong92/proj_gamedb (opens in a new tab)

Live demo: https://proj-gamedb.vercel.app/ (opens in a new tab)

Developer: KevinChong

Contact info: https://linkedin.com/in/yuen-chong-b20228127 (opens in a new tab)

To-Do List web app

GitHub repository: https://github.com/ennis-ma/cprg306-todo-list (opens in a new tab)

Live demo: https://cprg306-todo-list.vercel.app/ (opens in a new tab)

Developer: Yuk Kwan Ma (Lead/ Project Manager), Dung Ngok Kenneth Li, Kam Hung Ho

Contact info: kamhung.ho@edu.sait.ca

Our project involved developing a web-based to-do list application. The application allows users to create, edit, and delete to-do items, updating these changes in real-time. Users' to-dos are unique to their accounts, ensuring personal and secure task management.

Key Features:

  • User Authentication: Users can sign up, log in, and securely access their to-do list.
  • Real-time Data Management: Users can add, edit, and delete tasks, instantly reflecting changes. Technologies Used:

React: For building the user interface. Next.js: A React framework that enabled server-side rendering and routing. Firebase: Used for user authentication and as a real-time database for storing to-do items.

Challenges Faced:

  • User Authentication: Implementing a secure and seamless authentication process was challenging, especially ensuring the user state was managed correctly across the application.

  • Real-Time Data Syncing: Ensuring that the to-do list updates in real-time for each user presented some technical difficulties, which required careful state management and effective use of Firebase's real-time database capabilities.

  • Responsive Design: Creating a responsive design that provided a consistent user experience across various devices and screen sizes was a significant focus.

PopQuizzy

A simple, 10 question quiz game about pop culture.

GitHub Repo: https://github.com/raquel-castoldi/pop-quizzy (opens in a new tab)

Live Demo: https://pop-quizzy.vercel.app/ (opens in a new tab)

Developer: Raquel Castoldi

LinkedIn Profile: https://www.linkedin.com/in/raquel-castoldi-87879724b/ (opens in a new tab)

ProPlan

ProPlan is a task management website that allows users to create project tasks and to-do list tasks to keep track of their progress. The wesbiste features a dashboard page to view projects, project details page to create, edit and delete projects, to do list page to create, edit and delete tasks, and a visualization page to visualize project details with graphs.

We used Node.js and React for the project, Vercel for deployment, and firebase for user autherntication and data storage.

GitHub repository: https://github.com/Sergei137/cprg-306-Final-Project (opens in a new tab)

Live demo: https://cprg-306-final-project.vercel.app/ (opens in a new tab)

Developers: Sergei, Julia, Ryan

Contact info: sergei.mochalov@edu.sait.ca

What's In My Pantry?

"What's In My Pantry?" is a web application designed to help users efficiently manage and track the contents of their pantry. From the homepage, users can start by clicking the ""Start Now"" button and signing in using their GitHub account. Users can then access their own virtual pantry and can easily add, categorize, and delete items from their pantry. Leveraging the external API TheMealDB, the application suggests recipes based on the checked items that are available in the user's pantry, and upon clicking a recipe, the instructions are then shown. The user-friendly application offers a variety of features to simplify the way users organize their pantry and plan their meals.

The technologies used in this application include React, Next.js, Tailwind CSS & DaisyUI, and Firebase.

Live Demo: https://cprg306-project-gilt.vercel.app/ (opens in a new tab)

Developers: Viko Guo, Jamie Espiritu, Zoe Xie

ChapterPulse

Chapter is a simple web application that allows players to log-in and log-out using their Github Credentials and have access to a small selection of manga. They are able to create a 'Manga list' where you are able to keep track of what you are reading currently, taking a break from, or stopped reading. You can give your thoughts on each book and rate them accordingly. You can sort them based on title, status and rating, while deleting any entries from your list or editing your rating, comments or how many chapters you've read.

The main struggles with this project was the the fetching of the api. I had to request it in order to gain access to it, but I was worried I wouldn't receive it in time, let alone at all. When I finally found a free one online, I had about less than a week to get it working, and I had learned this way how much I struggled to understand api fetching. Due to the time constraints, I wasn't able to get the api working like i wanted too, I had to hard code the manga data in for it to show what I wanted it to on screen.

Technologies used: React, next.js, Firebase authentication, link, tailwind css, es6 features, use state, use effect, jsx, client side rendering, css in Javascript

Github Repository: https://github.com/JazminHorton/ChapterPulse (opens in a new tab)

Live Demo: https://chapter-pulse-jazminhortons-projects.vercel.app/ (opens in a new tab)

Developer: Jazmin Horton

Contact Info:

Stitch Tracker

Stitch Tracker is a web-based tool for cross-stitchers to manage their inventory of floss.

GitHub repository: Stitch-Tracker (opens in a new tab)

Live demo: Vercel (opens in a new tab)

Developer: James

Contact info: LinkedIn (opens in a new tab), GitHub (opens in a new tab)

Quiz Application

My final project, a Quiz Application, is a web-based platform that allows users to explore and take quizzes in various categories, including Math, Science, Social Studies, and Trivia. The application features quiz selection, interactive quiz questions with scoring, and category management. It uses React and Next.js for front-end development, providing a seamless user experience.

GitHub repository: https://github.com/HHafeez123/final_project-quiz_application (opens in a new tab)

Live demo: https://final-project-quiz-application-o10jmwrdj-hhafeez123s-projects.vercel.app/ (opens in a new tab)

Developer: Huzaifa Hafeez

Contact info: huzaifa.hafeez@edu.sait.ca, https://www.linkedin.com/in/huzaifa-hafeez-2889bb258/ (opens in a new tab)

Healthy Geeks

This website is for now a container of relevant content I've created as a Software Developer and a BS degree in Nutrition.

GitHub repository: https://github.com/AnaJoselynAlarcon/AnaJoselynAlarconWebsite (opens in a new tab)

Live demo: https://ana-joselyn-alarcon-website-8djxfv8zu-anajoselynalarcon.vercel.app/ (opens in a new tab)

Developer: Ana Joselyn Alarcon

Contact info: LinkedIn Ana Joselyn Alarcon

WoW Classic Armory

NGO Management

This web app assists small and medium NGOs in managing their events. manage userbase, volunteers, and schedule their volunteers

GitHub repository: https://github.com/pltduchoang/webdev2project.git (opens in a new tab)

Live demo: https://webdev2project.vercel.app/ (opens in a new tab)

Developer: Duc Hoang

Contact info: plt.duchoang@gmail.com

LinkedIn: https://www.linkedin.com/in/hoanganhduc/ (opens in a new tab)

To do list

Our project is a To do list which create an environment for user to add a to do list, review the list, and complete when they finish their tasks.

GitHub repository: https://github.com/Duy-An/CPRG306-Project (opens in a new tab)

Live demo: https://todolistproject-trienxuonglu.vercel.app/ (opens in a new tab)

Developer: Duy An

Contact info: Duy.An@edu.sait.ca

Slice of Heaven

GitHub repository: https://github.com/sarbjee/Slice-of-Heaven (opens in a new tab)

vercel_url :slice-of-heaven-ckzcvxafd-sarbjees-projects.vercel.app

Developer: Sarbjeet Kaur Brar and Diya Sharma

Linkedin: https://www.linkedin.com/in/sarbjeet-brar-751350159/ (opens in a new tab)

GitHub: https://github.com/sarbjee (opens in a new tab)

LesMit

Have you ever made plans with 'friends' and later they cancelled on you?. In the advent of social media making new friends has become increasingly harder to do. Lesmit (Let uS Meet) allows people to host events making the location public on google maps which lets other people see the activity and can opt in to participate in advance. You can host events such as sport events, Game night, pub night, concerts, test of courage, .. you the user make it up and launch it. The home page will show events, pictures and reviews taken by multiple users under that event. The pictures will have to be approved by the host before it is sent public.

Github Repo: https://github.com/Valentine-Jingwa/noter-Web-ver (opens in a new tab)

Live Demo: https://noter-web-ver.vercel.app/ (opens in a new tab)

Developer: Valentine Jingwa

Pseudonym: Valley/Val/Mister V

Contact Info: vallyjingwa@gmail.com, https://www.linkedin.com/in/valentine-achalefi-jingwa-12607b252/ (opens in a new tab), Cell: 587-6644-681

Ghibli Meteo: Responsive Weather Tracking

Project Description: Responsive Weather Tracking is a dynamic web application built using Next.js and React, designed for real-time weather updates and forecasts. It features integration with the OpenWeather API, enabling users to search weather conditions in various cities and view detailed forecasts. The project highlights responsive design and interactive UI, using useState and useEffect for effective state management. Key challenges were managing API integration, ensuring timely data updates, and implementing a design that adapts to different devices. A notable feature is the ""listen to weather"" functionality, combining audio integration with user engagement in an innovative way.

GitHub repository: github_url (opens in a new tab)

Live Demo: vercel_url (opens in a new tab)

Developer: Roselyn Chan

Contact Info:

Project Title: BookMarkers

It is a book review platform designed to bring together passionate readers and book enthusiasts.

GitHub repository: https://github.com/MichaelNGAN1201/cprg306-project (opens in a new tab)

Live demo: https://cprg306-project-sand.vercel.app/ (opens in a new tab)

Developer: Michael NGAN

Contact info: MoChau.NGAN@edu.sait.ca

Styles-Boutique

The project centered around the creation of an e-commerce website tailored to a specific style of clothing. This dynamic platform utilized APIs to efficiently fetch and present detailed product information, offering a seamless shopping experience. Noteworthy features included the integration of an email system for improved communication on contact and cart pages, and a categories scroll bar to enhance user navigation. Technologies employed encompassed standard web development tools such as React.js, next.js, and coupled with API integration (email.js) for real-time updates. Challenges arose during the integration phase, necessitating in-depth research and effective problem-solving. As the project reflects the specific style of clothing, it serves as a visually appealing and user-friendly platform for online shoppers, with room for continuous improvement and growth in subsequent projects.In addition to its e-commerce functionality, the project features a dedicated articles page focused on providing users with in-depth insights into the specific style of clothing and the latest trends. This page serves as a valuable resource for users to search and research fashion-related topics, staying informed about the latest trends and style inspirations. The inclusion of this content adds an educational and engaging dimension to the website, catering to users who are not only looking to shop but also seeking fashion inspiration and knowledge.

GitHub repository: https://github.com/Jhio0/Styles-Boutique.git (opens in a new tab) Live demo:https://styles-boutique-g2mk10jk6-jhio0.vercel.app (opens in a new tab) Developer: Jhio Soriano

Contact info: sorianojhio218@gmail.com

SceneCyclopedia

"SceneCyclopedia" movie database app that provides ratings, cast details, and trailers for cinema fans.

Technologies Used:

1.Next.js 2.Tailwind CSS 3.Vercel 4.The Movie Database (TMDb) API

GitHub repository: https://github.com/HartajMann/scenecyclopedia (opens in a new tab) Live demo: https://scenecyclopedia.vercel.app/ (opens in a new tab) Developer: Hartaj Singh Mann Contact info: https://www.linkedin.com/in/hartajsinghmann/ (opens in a new tab)"

BookYatra

BookYatra is a app which displays fight information and hotel information with every single detail about them. The flights show the price , the arrival ,departure and much more. The hotel page displays the rooms and its price and the amenities available with it and some customer reviews. The app also allows the user to log in the website with email address and password they decide to enter while signing up. The technologies used in this project were tailwind CSS, react , node, firebase and Daisy UI for some components.

GitHub repository: https://github.com/karmdesai13/bookyatra (opens in a new tab)

Live demo: https://bookyatra.vercel.app/ (opens in a new tab)

Developers:

Custom Weapon Warehouse

A demonstration of custom weapons for the video game Team Fortress 2, each featuring new functionality not seen in the base game. Each item can be viewed individually, and displays a list of attributes and a short video demonstration.

Live demo: https://weapon-warehouse.vercel.app/ (opens in a new tab)

Developer: Charles A

Todo list

This is a basic webpage where you can add and remove to do things and you can create a whole list of your work to manage. You can use the sign up page to create your own account and you can store your list of work there.

Github username: Yashdeep001

Repo: https://github.com/Yashdeep001/WebFinalProject/tree/main/todo_app (opens in a new tab)

Developer: Yashdeep Singh Yash

Contact info: yashdeepsingh.yash@edu.sait.ca

Live Demo: https://vercel.com/yashdeep-singh-yashs-projects/web-final-project-vwmz/8VEyNNvMuLtHr3BVjn2fkyf5iiTW (opens in a new tab)

Collabo-Learn

Collabo-learn is an online platform committed to fostering collaboration among individuals who share an interest in coding. Users encompass students, instructors, as well as junior and senior developers. The project places a strong emphasis on ""Collaboration,"" evident in the distinct identity of each page. While adhering to a predefined format that includes elements like navigation bars, footers, and colors, the collaborative nature shines through, with discernible contributions from different individuals on various parts of the page. The project leverages Next.js, and the most notable challenge we faced collectively was ensuring effective collaboration among team members.

Github repo: https://github.com/mjmorelos/Collabo-Learn (opens in a new tab)

Live demo: https://vercel.com/mjmorelos/collabo-learn-webdev2 (opens in a new tab)

Developers: Mark Morelos, Georcia Eugenio, Dominique Punzalan, Vince Manio, Abdul Al Shami, Ruth Reyes and Lance Gonzales.

Contact info:

blighted

blighted is a web application designed to serve as a platform for hosting and showcasing tattoo designs, while also providing a seamless booking experience for users.

Technologies Used: Database: PlanetScale DB is the backbone of Blighted, providing a robust and scalable storage solution for my extensive collection of tattoo designs. Prisma facilitates efficient database interactions.

Mapping Services: Google Maps API integration enhances the user experience by providing location-based services. Users can easily find and connect with my tattoo studio.

Communication: The Resend Email API is employed to optimize communication between users and the platform, making the booking and notification process more efficient.

Features: Personal Design Showcase: Blighted serves as an exclusive portfolio of my original tattoo designs. Users can explore my unique artistic style and find the perfect design for their preferences.

Booking System: The platform features a user-friendly booking system, allowing enthusiasts to schedule appointments directly with me.

Geolocation Services: Integrated Google Maps API helps users locate my tattoo studio effortlessly, fostering a more convenient decision-making process.

Challenges Faced Integration Complexity: Integrating multiple third-party APIs, including Google Maps and the Resend Email API, required careful planning to ensure smooth communication between different services.

User Experience: Balancing a visually appealing design showcase with a user-friendly booking system posed challenges in terms of UI/UX design and implementation. Graphic design is not my passion.

ps: i drew all of these please don't roast me, i didn't get to do any more drawings before the deadline LOL, and I don't actually tattoo yet

GitHub Repo: https://github.com/aaaarvieeee/blighted.git (opens in a new tab)

URL: https://blighted.art (opens in a new tab) or https://blighted.vercel.app (opens in a new tab)

Developer: Arvie Sangalang

Contact Info

Project

GitHub repository: https://github.com/DonyStark/Project (opens in a new tab)

Live demo: https://project-donystark.vercel.app/ (opens in a new tab)

Developer: Doniyor Rakhmanov

Contact info: doniyorrakhmanov@gmail.com

TickTock Countdown

TickTock Countdown is a web application designed to create and track countdowns for significant events such as birthdays, holidays, and personal milestones. The application features real-time countdown updates, user authentication, and an interactive, modern interface. Built using Next.js for the frontend and Firebase for real-time data handling and user authentication, it offers a seamless and responsive user experience. Key challenges included integrating Firebase, ensuring responsive UI design, and implementing dynamic countdown updates. The project showcases my skills in full-stack development, problem-solving, and UI/UX design.

GitHub repository: https://github.com/AEssadi91/Web2-Project/tree/main/web2-project (opens in a new tab)

Developer: Abubaker Essadi

Contact info: abubaker.essadi@edu.sait.ca

GitHub AccountsWeek 1: Introduction to Web Application Development