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.

Winter 2025

YYC-Pizza: Pizza and Art at locations near you

Features:

  • Streamline ordering process
  • Quick payment with Stripe
  • AI integration and Implementation
  • Protected route with JWT

Tech Stack:

  • ReactJS, MySQL, Express, NEXTjs
  • React Tan-stack, Nextjs
  • Vercel, Render, Railway

GitHub Repo: https://github.com/hudo-ng/pizza-order-client.git (opens in a new tab)

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

Developer: Hung Dong

Contact: hmdong901026@gmail.com, https://www.linkedin.com/in/hung-dong/ (opens in a new tab)

Marvelversed

A web application that lets users explore and interact with Marvel characters. It integrates external data from the SuperHero API for character visuals and uses a custom JSON database for games. It also uses an external weather API that displays different game footage based on your current weather. Built with a clean UI and optimized performance, it’s designed for fans of the Marvel universe.

Features:

  • Character gallery with images and details from SuperHero API
  • In-game feature using 300+ Marvel character classes from a custom JSON file
  • Dynamic weather-based game footage using real-time weather API
  • Interactive, responsive design optimized for all devices

Tech Stack:

  • React/Next.js
  • Tailwind CSS
  • SuperHero API, Weather API
  • Vercel for deployment

Live Demo: https://www.marvelversed.com (opens in a new tab)

Developer: Abhijith Krishnan

Contact: rectrix21@gmail.com, https://linkedin.com/in/rectrix (opens in a new tab)

GameDB

GameDB is a web application that helps gamers browse and find games (with discounts) across different platforms (Steam, Epic etc.) by fetching data from CheapShark API. Users can log into their account (Firebase authentication), search/browse through list of games, and add their favorite titles to a database (Cloud Firestore).

GitHub Repo: https://github.com/K0A1R/gamedb (opens in a new tab)

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

Developer: Amrit Reddy

Music Collab

Music Collab is a social web application that allows users to create or join music rooms where they can build shared playlists, chat in real-time, and discover songs together. It integrates the Spotify API for seamless music search and uses WebSockets for real-time updates. Designed with a clean and intuitive interface, the app emphasizes social connection through music collaboration.

Features:

  • Role-based room management (creator vs. member permissions)
  • Live chat and real-time playlist updates
  • Spotify-powered music search and playlist integration

Tech Stack:

  • Next.js (Frontend)
  • Node.js + Express.js (Backend)
  • Supabase (PostgreSQL) (Database)
  • Google OAuth 2.0 (Authentication)
  • Socket.IO (Real-time Communication)
  • Vercel (Hosting)

GitHub Repo: https://github.com/SUKHMAN-SINGH-1612/music-mixer (opens in a new tab)

Live Demo: music.sukhmansingh.tech (opens in a new tab)

Developer: Sukhman Singh

Contact: sukhmansinghbhogal@gmail.com https://www.linkedin.com/in/sukhmansingh1612 (opens in a new tab)

BroBot AI

BroBot AI is an emotionally aware chatbot that customizes its responses based on user personality and tone, making conversations feel more natural and human-like. It leverages OpenAI's GPT model, styled with TailwindCSS, and is built with ReactJS to ensure a responsive, modern user experience.

Features:

  • Personality-based tone modulation in responses
  • Responsive UI with emoji-enhanced interaction
  • Live integration with OpenAI GPT for real-time chats

Tech Stack:

  • ReactJS (Frontend)
  • TailwindCSS (Styling)
  • OpenAI GPT API (AI logic)
  • Netlify (Hosting)

GitHub Repo: https://github.com/Armaan-Dip-Singh-Maan/Bro-Bot (opens in a new tab)

Live Demo: https://brobotai.netlify.app/ (opens in a new tab)

Developer: Armaandip Singh Maan

Contact: armaandipsinghmaan@gmail.com, https://linkedin.com/in/armaansinghmaan (opens in a new tab)

BookSphere

BookSphere is a book discovery and review platform where users can search for books, read reviews, and share their thoughts in a community feed. It leverages the Open Library API for book data and Firebase for user authentication and review storage. The app is styled with Tailwind CSS and deployed on Vercel for a seamless user experience.

Features:

  • Search for books by title or author using the Open Library API on the home page.
  • View detailed book information including cover, author, and description on dynamic book pages.
  • Submit reviews with ratings and comments for books after logging in.
  • Browse all user reviews in a community feed with timestamps and ratings.
  • Real-time review updates on book pages without needing a refresh.

Tech Stack:

  • Next.js for server-side rendering and dynamic routing with the Pages Router.
  • React for building interactive UI components like review forms and lists.
  • Firebase Authentication for secure user sign-up and login functionality.
  • Firestore for storing and querying user reviews and authentication data.
  • Tailwind CSS for responsive, utility-first styling across the app.
  • Vercel for hosting, automatic scaling, and deployment with GitHub integration.

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

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

Developers: -Pushpreet Singh -Hemang Sharma

Contact Info: -Email: pushpreetsingh9@gmail.com -Linkedin: https://www.linkedin.com/in/pushpreet-singh-b1500a28b/ (opens in a new tab)

Clarté

A little app to help you stop messing up French sounds.

Features:

  • See all the French IPA symbols: Browse the whole list.
  • Figure out what they are: Get simple explanations for each one.
  • Hear how they sound: Click and listen
  • See 'em in action: Shows random words using the symbol you picked.

Tech Stack:

GitHub Repo: https://github.com/AmirZhou/clarte (opens in a new tab)

Live Demo: https://www.clarte.dev (opens in a new tab)

Developer: YUE Amir Zhou

Contact: amir@bitravage.com, https://linkedin.com/in/amir-zhou (opens in a new tab)

GamePulse

Features: Allows you to look at video game news, video game collections, and video games that were the best of each year, from 1980 to the present year. You can also search for any game and it should give a description and storefronts as well.

Tech Stack:

  • Javascript
  • Next.js
  • Node.js
  • APIs used:
  • Rawg.io API
  • News API

GitHub Repo: https://github.com/Asfand0306/GamePulse (opens in a new tab)

Live Demo: https://game-pulse-nu.vercel.app/ (opens in a new tab)

Developers: Noah Gallasic Asfandyar Khan

Contact: Noah Gallasic: gallasicnoah@gmail.com https://www.linkedin.com/in/noah-gallasic-9b0244242/ (opens in a new tab)

Asfandyar Khan: asfand0306@gmail.com https://www.linkedin.com/in/asfand-khan-7a8a971aa/?trk=opento_sprofile_details&lipi=urn%3Ali%3Apage%3Ad_flagship3_feed%3B%2B%2FVnvLAoS3q5xWp2JVdjIg%3D%3D (opens in a new tab)

Loreganizer

A Dungeons & Dragons campaign manager that helps players track characters, inventory, and game lore. Built with Next.js for the frontend and Firebase for real-time database functionality, featuring secure authentication and responsive design.

Features:

  • Character creation and management with detailed inventory tracking
  • Campaign organization with lore documentation (coming soon)
  • Real-time updates across devices
  • Responsive design for both desktop and mobile play

Tech Stack:

  • Next.js (App Router)
  • Firebase (Authentication/Firestore)
  • Tailwind CSS + DaisyUI
  • Vercel Hosting

GitHub Repo: https://github.com/DylaneElyse/Loreganizer (opens in a new tab)

Live Demo: loreganizer.vercel.app

Developer: Dylane Cunningham

Contact: dylanecunningham@outlook.com, https://linkedin.com/in/dylanecunningham (opens in a new tab)

Mileage Mate

Mileage Mate is a web app for gig workers (Uber, DoorDash, Skip, etc.) to track their miles and expenses while working. The goal is to help them use this data for tax deductions when filing their returns at the end of the year.

Features:

  • Login using GitHub
  • Dashboard: User can view total miles, expenses in the month.
  • Trip Tracking: User can add trips.
  • Expenses Tracking: User can add expenses.

Tech Stack:

  • Next.js (React)
  • Tailwind CSS
  • Firebase Authentication
  • Cloud Firestore
  • Vercel

GitHub Repo: https://github.com/nmphan/mileage-mate (opens in a new tab)

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

Developer: Nhat Minh Phan

Contact: nmphan205@gmail.com, https://www.linkedin.com/in/nmphan205/ (opens in a new tab)

CryptoTracker

CryptoTracker is a responsive web application that provides real-time cryptocurrency data, including top market‐cap coins, trending assets, interactive historical price charts, a search interface, and a portfolio feature for favoriting coins. It’s built with Next.js, styled with Tailwind CSS, and uses Chart.js for rendering price trends.

Features:

  • Live list of top 100 cryptocurrencies with price and 24h change (green/red coloring)
  • Trending section highlighting coins with largest moves
  • Search panel to filter by name or symbol, with instant results
  • Interactive 30-day price charts in a modal, with hover tooltips
  • Portfolio tab to save/remove favorites (persisted in localStorage)

Tech Stack:

  • Next.js (App Router, server/client components)
  • Tailwind CSS for styling and responsive layout
  • Chart.js & react-chartjs-2 for dynamic charts
  • CoinGecko API for crypto data
  • Vercel for continuous deployment

GitHub Repo: https://github.com/Jasdhillon24/Crypto-Tracker.git (opens in a new tab)

Live Demo: https://crypto-tracker-dusky-xi.vercel.app/ (opens in a new tab)

Developer: Jasdeep Dhillon

Contact: jasdeepdhillon2424@gmail.com

Cypress (A note taking application)

Cypress is web application that allows users to take structured notes, organize content into pages and subpages, and collaborate on documents. The goal is to replicate core features of Notion, such as rich-text editing, hierarchical document organization, and persistent storage of notes.

Features:

  • User Authentication: Sign up and login functionality using Supabase.
  • Page Creation: Users can create, edit, and delete notes/pages.
  • Nested Pages: Pages can contain subpages, emulating Notion’s hierarchical structure.
  • Real-time Collaboration: Multiple users can edit pages at same time.
  • Payment: Using Stripe (yet to implement)

Tech Stack: • Frontend Framework: Next.js • Styling: Tailwind CSS and/or component libraries like ShadCN . • State Management: React Context API • Authentication: Supabase Authentication • Database: Supabase (for real-time document syncing)

GitHub Repo: https://github.com/Harjap-Sngh/Notes-App (opens in a new tab)

Live Demo: https://notes-app-ten-rosy.vercel.app/ (opens in a new tab)

Developer: Harjap Singh, Ekamjot Singh, Rasanpreet Kaur

Contact: ekamjot0123@gmail.com, https://www.linkedin.com/in/ekamjot-singh123/ (opens in a new tab) harjapsingh267@gmail.com, https://www.linkedin.com/in/harjap-singh705/ (opens in a new tab)

Fall 2024

webproject

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

Vercel : https://webproject-fakestore.vercel.app/ (opens in a new tab)

Developer : Harshdeep Kaur and Charmishakumari Patel

Contact info : harshdeepkaur01@edu.sait.ca, charmishakumarihiteshbhai.patel@edu.sait.ca

DogsData

my project is using react js , tailwind for designing bootstrap as a additional designing , API , Vscode , github and vercel

github url -- https://github.com/manminder11/Dogsdata-final-project-CPRG-306.git (opens in a new tab)

Vercel url --- https://dogsdata-final-project.vercel.app/ (opens in a new tab)

Manminder Singh contact info --- manminders802@gmail.com

The Weather App

The Weather App is a web application that provides users with real-time weather updates in a visually engaging and accessible format. It allows users to view current weather conditions, forecasts, and track global weather patterns, aiding in daily planning and awareness.

Technologies Used:

React.js: For building the user interface. Next.js: To enhance React applications with server-side rendering and static site generation. Vercel: For seamless deployment and hosting of the application.

GitHub Repository: tehjibsingh Live Demo: https://crpg306-project-e6no.vercel.app/ (opens in a new tab)

Developer: Tehjib Singh

Contact Info:

Email: tehjibsingh@edu.sait.ca LinkedIn: TEHJIB SINGH

Allergy Free Recipes

This web app helps users find allergy free recipes with a powerful search function that can filter out allergens. This web app uses the Pantry API for data storage and retrieval and Firebase for authentication.

GitHub repository: https://github.com/TerrellAW/Allergy-Free-Recipes (opens in a new tab)

The Pantry API can be found here: https://getpantry.cloud/# (opens in a new tab)

Live demo: https://allergy-free-recipes.vercel.app/ (opens in a new tab)

Developer: Terrell Alexis-Wilson

LinkedIn profile: https://www.linkedin.com/in/terrell-alexis-wilson/ (opens in a new tab)

Keep Calm and Crack the Questions

A trivia game using Next.js and Firebase where the user can:

  • Log in to the game using a Google account.
  • Access the game page, where they must choose one of the available answers for each question. The answer must be marked before the time counter reaches zero; otherwise, it is considered wrong.
  • Be redirected, after 10 questions answered, to the ranking screen.

GitHub repository: https://github.com/alvesgf16/keep-calm-and-crack-the-questions (opens in a new tab) Live demo: https://keep-calm-and-crack-the-questions.vercel.app/ (opens in a new tab) Developers:

ProgQuiz App

ProgQuiz is a quiz application designed to test players' knowledge of various programming skills and languages. This project was developed by Chinedu Amaechi and Faruq Ogunkunle as their final project for the CPRG 306 class.

Links

Developers

Yes - I will be sending an updated one once I got more time to work on it for sure

My portfolio

Write a brief description about your project, what it does, and the technologies used.

GitHub repository: https://github.com/Jeffdcdr/my-portfolio (opens in a new tab)

Live demo: https://my-portfolio-zeta-seven-96.vercel.app/l (opens in a new tab)

Developer: Jeffdcdr

Contact info: anchetajeffry@gmail.com https://www.linkedin.com/in/jeffry-ancheta-a3505753/ (opens in a new tab)

GameVerse

GameVerse is an interactive platform that lets users explore and discover a vast collection of video games. With an up-to-date database sourced from the IGDB API, GameVerse offers detailed game pages, including summaries, ratings, screenshots, and more.

Whether you're interested in recent releases, upcoming games, or all-time classics, GameVerse provides an easy-to-navigate experience for all gamers. It features a user-friendly search, filtering options, and a responsive design that adjusts to both light and dark themes.

Key Features:

Extensive database of video games Latest release and upcoming game updates Detailed game information with ratings, genres, and platforms Search and filter functionality Light and dark theme support Technologies used: Next.js, React, Tailwind CSS, IGDB API, Vercel

GitHub repository: https://github.com/N-Asadi/video-games-db (opens in a new tab)

Live demo: https://video-games-db-vert.vercel.app/ (opens in a new tab)

Developer: Nasratullah Asadi

Contact info: asadi.n2000@gmail.com

Collectables Showcase

This project displays a list of my own collectable items using a total of 12 APIs. Those APIs were build specifically for this project using php and are hosted on my website. The project itself uses React, Tailwind CSS

GitHub repository: https://github.com/fernandocbhorta/collectablesshowcase (opens in a new tab)

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

Developer: Fernando Horta

Contact info: fernandocbhorta@gmail.com , linkedin.com/in/fernandocbhorta , horta.classicgames.com.br

Let Them Cook

A recipe website that is prioritized for people with dietary issues to look up recipes that can accommodate. This website uses next.js for the main structure of the project and gets its recipes from the Spoonacular API.

Vercel Demo: https://let-them-cook-1cy0spewe-max-bradfords-projects.vercel.app/ (opens in a new tab)

Github Repo : https://github.com/MaximilianBradford/Let_Them_Cook (opens in a new tab)

Developer : Max Bradford

Contact Info : maximiliangbradford@gmail.com https://www.linkedin.com/in/maximilian-bradford-56b038210/ (opens in a new tab)

Blog System with Full-Stack Development

My project is a full-stack web application that allows users to register, log in, create and manage blog posts, and interact through comments and replies. It features a blogging system with categories and a dynamic comment section, enabling users to engage with content.

The backend is built using FastAPI, which provides a fast and secure API for user authentication, blog management, and data handling. The frontend is developed with React and styled using Tailwind CSS, offering a responsive and user-friendly interface. This project integrates both frontend and backend to create a seamless and interactive user experience.

GitHub repository: https://github.com/dc8156046/react-blog (opens in a new tab)

Live demo: https://react-blog-psi.vercel.app/ (opens in a new tab)

Developer: Dan Chen

Contact info: dan.chen01@edu.sait.ca

Career Connect

This project is a dynamic job search platform designed to help users find jobs based on their skills, location, and preferences. It features a responsive user interface and allows for browsing and filtering job listings.

Technologies Used:

React.js for frontend development CSS for styling and responsiveness GitHub for version control and project management

GitHub Repository: https://github.com/darshandahal/career-connect (opens in a new tab)

Live Demo: Live Demo on Vercel

Developer: Darshan Dahal

E-Commerce Wesite

Github repository: https://github.com/caddelacruz/ECommerceWebsite.git (opens in a new tab)

Developer: Catherine Dela Cruz

Contacct info: caddelacruz@yahoo.ca

AniFlix

It is a movie browsing app the is built using Typescript, Next.js, Tailwind CSS and a public Api you can browse your favourite movies smooth and fast.

GitHub repository: https://github.com/Klrkescano/MovieApp (opens in a new tab)

Live demo: https://movie-app-nu-pearl.vercel.app/ (opens in a new tab)

Developer: Klark Chester Escano

Contact info: escano.klark@gmail.com / https://www.linkedin.com/in/klark-chester-escano-125854286/ (opens in a new tab)

Personal Portfolio

Write a brief description about your project, what it does, and the technologies used.

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

Live demo: https://personal-portfolio123-indol.vercel.app/ (opens in a new tab)

Developer: Yassine Ghannay

Contact info: yassineghannay13@gmail.com , https://www.linkedin.com/in/yassine-ghannay-053244251/ (opens in a new tab)

Bookliophilia

A website that uses Google Books API to display queried books along with some description to the user.

https://github.com/umayaush/Bookliophilia (opens in a new tab)

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

Developer: Umaya Hewaarachchi

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

Tasty Tally

Tasty Tally is a food tracking application that focuses on making healthy choices instead of counting calories or eliminating foods completely. It takes information about a user to provide a daily point goal and all foods have a custom point value. As users log food throughout the day it tallies their points used so users can make mindful food choices! Users can also add new foods to the available food list to continue to grow the database. This project was created using React, Next.js, DaisyUI, FireBase Authentication and FireStore Database.

GitHub Repository: https://github.com/ShannonHilland/tasty-tally (opens in a new tab)

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

Developer: Shannon Hilland

Contact info: www.linkedin.com/in/shannon-hilland (opens in a new tab)

Safe to Flight

Write a brief description about your project, what it does, and the technologies used.

GitHub repository: https://github.com/WeiChengLai1994/safe-to-fly (opens in a new tab)

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

Developer: Wei-Cheng, Lai(Alan) & Tzu-Yun, Huang (Alice)

Contact info:

Email: alanlai.inca@gmail.com alicehuang.inca@gmail.com

LinkedIn profile: https://www.linkedin.com/in/alan-lai-b8563b1a6/ (opens in a new tab) https://www.linkedin.com/in/alice-huang214/ (opens in a new tab)

Gundamn

https://github.com/KrisSenger/Gundamn (opens in a new tab)

Brain Buzz

Brain Buzz is an interactive trivia quiz app that allows users to select categories and difficulty levels to answer 10 random trivia questions. The app dynamically fetches questions from the Open Trivia Database API and provides a final score at the end of the quiz. Designed with React, the app focuses on delivering a seamless user experience with responsive design and error-handling mechanisms.

GitHub repository: https://github.com/hanishjierdh256/brain-buzz (opens in a new tab)

Live demo: https://brain-buzz-seven.vercel.app/ (opens in a new tab)

Developer: Hanish Jierdh

Contact info: hanishjierdh256@gmail.com | https://www.linkedin.com/in/hanish-jierdh-91820a60/ (opens in a new tab)

Cartify: E-Commerce Web App

Cartify is a modern e-commerce web application that allows users to browse products, add items to a cart with dynamic quantity selection, and experience real-time feedback with toast notifications. Built with React, Next.js (App Router), Tailwind CSS, and a Cart Context for state management.

GitHub repository: https://github.com/kkhan4724/cartify-app.git (opens in a new tab) Live demo: https://cartifyproject-app.vercel.app/ (opens in a new tab)

Developer: Khush Khan Contact info: www.linkedin.com/in/khush-bakht-khan-87b001305 (opens in a new tab)

Film Finder

A simple web application used to search for any movie you would like. Allows GitHub signed in users to post comments on any movie for other users to view.

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

Live Demo: https://cprg306-project-n65mtz6gs-ashtons-projects-2e7b0090.vercel.app/ (opens in a new tab)

Developer: Ashton Kostiuk

Contact Info: kostiukashton@gmail.com, https://github.com/ashtonks (opens in a new tab), https://www.linkedin.com/in/ashton-kostiuk-0b2ba3287/ (opens in a new tab)

smartquizhub

Project Description: My project is smartquizhub that allows users to test their knowledge across various topics. The app includes features such as real-time timers, question navigation, and score tracking, providing an engaging and interactive experience. Users can customize their quiz preferences by selecting topics, difficulty levels, and question types.

The project is built using Next.js for the frontend, with TailwindCSS for responsive styling. Firebase Firestore is utilized for backend data storage, while APIs like the Open Trivia Database fetch the quiz data. It is deployed on Vercel, ensuring fast and reliable performance. The app focuses on accessibility and user engagement, making it both functional and user-friendly.

github: https://github.com/PriyanshuKuchhadiya/smartquizhub (opens in a new tab)

live demo: https://smartquizhub.vercel.app/ (opens in a new tab)

developer name: Priyanshu Kuchhadiya

TrainTimes

Github Repo: https://github.com/adamcanard/traintimes (opens in a new tab)

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

Developers: Adam Cunard and Jovie LaRue

Contact info: https://jovielarue.github.io (opens in a new tab)

My Anime Vault

Description: My Anime Vault is a web application that allows users to manage animes that they are interested in, they can add them to specific lists depending on their preference whether they have watched it, it's their favourite. All the retrieved data will be displayed to the users and they can select or filter out and categorize the specific type of anime based on personal preference. The authentication feature enables users to store their personal favourites and personal reviews securely. Technologies: Frontend: Tailwind CSS, React, Javascript Backend: Firebase

GitHub: https://github.com/tienphap1405/Web_Development_Project (opens in a new tab) Live demo: https://my-anime-vault.vercel.app/ (opens in a new tab)

Developers: Tien Phap (Evan) Nguyen - tienphap1405@gmail.com & Simon Luna Patiarroy - romano_luna@hotmail.com

You buy, I sell

Live Demo: https://you-buy-i-sell.vercel.app (opens in a new tab)

Users are able to add, edit their job applications to maintain records whether they are hired pr rejected. I have used next js, firebase, tailwind css.

Book Review app

Hello everyone, this is a book review app where you can review any book. It has some other functionalities as well like you can download any book's pdf for free (The only condition is it should available on internet). You just have to enter the book name in search bar and you will get so many options for that book. if you want physical copy of that book than you can also buy it. Technology used: Next.js, Tailwind CSS, Firebase, UIverse (A UI library), google book API(Google cloud), Firestore Cloud GitHub repository:https://github.com/TrupeshMandani/book_review_app (opens in a new tab) Live Demo: https://book-review-app-gold.vercel.app (opens in a new tab) Developer: Trupesh Mandani Contact Info: imtrupesh1610@gmail.com.

PokeCollector

PokeCollector is a Pokemon TCG collection managing app! It allows you to create and share collections with people, see the value of them, and make managing a large Pokemon collection easier! It is inspired by ManaBox and PriceCharting, a couple similar apps. ManaBox is built for Magic: the Gathering, and PriceCharting is for all collectibles, and viewing the prices of them from across many sites. The goal of this project was to create a PokeCentric around the things that we love.

GitHub repo: https://github.com/hibbs18/pokecollector (opens in a new tab)

Live site: https://poke-collector.vercel.app/ (opens in a new tab)

Developers: Mitchell Miller and Jaryd Hibbert

Contact info: MM LinkedIn : https://www.linkedin.com/in/mitchell-dev/ (opens in a new tab) JH LinkedIn: www.linkedin.com/in/jaryd-hibbert (opens in a new tab)

WeatherStorm

A Weather app that gets location based on the clients IP, using Weather Stack, Nexts server functionality and ipinfo

Github Repository: https://github.com/ThalliumSulfate/weather-app-project (opens in a new tab)

Live Demo: https://weather-app-project-sigma-eight.vercel.app/ (opens in a new tab)

Developer: Thalia Munroe

Contact Info: www.linkedin.com/in/thalia-munroe (opens in a new tab)

WantJoke

WantJokes is a fun and interactive web platform that combines humor and creativity by showcasing coding-related jokes and personalized memes. Built with Next.js and React, the platform dynamically fetches jokes from a Joke API and enables users to transform these jokes into custom memes using the Imgflip API. Users can create, preview, and react to the memes generated, adding a social and engaging element to the experience.

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

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

Developer: Thi Huong Nguyen

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

Education Landing Page

This page is for users to book a demo for courses

GitHub repository: https://github.com/thuduongn/education-landing-page (opens in a new tab)

Live demo: https://education-landing-page-gules.vercel.app (opens in a new tab)

Developer: Thu Duong Nguyen

My Anime Vault

Description: My Anime Vault is a web application that allows users to manage animes that they are interested in, they can add them to specific lists depending on their preference whether they have watched it, it's their favourite. All the retrieved data will be displayed to the users and they can select or filter out and categorize the specific type of anime based on personal preference. The authentication feature enables users to store their personal favourites and personal reviews securely.

Technologies: Frontend: Tailwind CSS, React, Javascript Backend: Firebase

GitHub: https://github.com/tienphap1405/Web_Development_Project (opens in a new tab) Live demo: https://my-anime-vault.vercel.app/ (opens in a new tab) Developers: Tien Phap (Evan) Nguyen - tienphap1405@gmail.com & Simon Luna Patiarroy - romano_luna@hotmail.com

ProgQuiz App

This is a quiz application that tests players knowledge on different programming skills and languages. It was developed by Chinedu Amaechi and Faruq Ogunkunle as their final project for CPRG 306 class.

GitHub repository: https://github.com/faruqonaayo/react-quiz-project.git (opens in a new tab)

Live demo: https://react-quiz-project-rho.vercel.app/?vercelToolbarCode=3Mrz_LvKORW2Jcs (opens in a new tab)

Developers: Chinedu Amaechi, Faruq Ogunkunle

Contact info: chymez56@yahoo.com, https://www.linkedin.com/in/chinedu-amaechi-dev/,ayofaruq21@gmail.com (opens in a new tab), www.linkedin.com/in/devfaruq-oa (opens in a new tab)

Country Info Finder

It is a web application that allows users to search for information about countries worldwide. Users can explore details such as the country's population, Capital City, flag, and region.

GitHub Repository: https://github.com/Akshar1483/Country-Info-Finder (opens in a new tab)

Live Demo: https://country-info-finder-tau.vercel.app/ (opens in a new tab)

Developer Name: Akshar Patel, Nirbhay Vachhani

Contact Info: patelakshar1483@gmail.com, nirbhayvachhani@gmail.com

FakeStore

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

Vercel : https://webproject-fakestore.vercel.app/ (opens in a new tab)

Developer : Charmishakumari Patel Harshdeep Kaur

Contact info : charmishakumarihiteshbhai.patel@edu.sait.ca harshdeepkaur01@edu.sait.ca

Voyager

Voyager is a blogging platform that allows user to explore and create blogs. user can log in with github. Technologies used: Frontend: React, Next.js Backend: Custom API with Firebase integration Authentication: Google OAuth via Firebase Authentication Database: Firebase Realtime Database Hosting: Vercel Github: https://github.com/ParvPatel6/voyager (opens in a new tab) Live Demo: https://voyager-beryl.vercel.app/ (opens in a new tab) Developer: Parv Patel

Coda

An album recommendations generator. It uses the Spotify music library and generates albums based on a random algorithm taking initial input data from a data pool that defines the possible outcomes and can easily be modified to control the result window. Main technologies used: TypeScript, Next, Node, Express.

Frontend GitHub repository: https://github.com/srntz/coda.git (opens in a new tab)

Backend GitHub repository: https://github.com/srntz/coda-api.git (opens in a new tab)

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

Developer: Denis Pechenkin

Contact info: dpech0511@gmail.com, https://www.linkedin.com/in/denis-pechenkin/ (opens in a new tab)

Project title - FocusMate

Project description - our project is the todo list where the user can enter the task along with the description and they can click on complete if the task is complete or delete if the task is complete

github repository - https://github.com/Anmol200-3/focusmate.git (opens in a new tab)

live demo - https://focusmate-jet.vercel.app/ (opens in a new tab)

Developer - Kamalpreet Kaur, Anmol Sandhu, Rubalpreet kaur

contact - https://www.linkedin.com/in/anmoldeep-singh-sandhu-ab3710281/ (opens in a new tab)

GitHub: https://github.com/gameovercheeseburger/AboutMe (opens in a new tab) LinkedIN: https://www.linkedin.com/in/patrik-j%C3%BCrgen-santiago/ (opens in a new tab) Developer: Patrik Santiago PersonalEmailAddress: patrikjurgen.santiago@gmail.com

FitShare

FitShare is a dynamic platform where users can share their outfits, discover fashion inspiration, and connect with a vibrant community of style enthusiasts. With features like creating posts, liking/unliking, and following/unfollowing other users, FitShare offers a seamless way to engage with fashion trends and showcase your unique style.

GitHub repository: https://github.com/marybethsato/fitshare (opens in a new tab)

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

Developer: Marybeth Flonia Sato

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

Tier 4U

An applications that allows users to rank some of their favourite things in tiers. Users can choose from stock available categories, or create their own templates if one doesn't already exist. Not everything works perfectly yet, but it will eventually very soon!

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

Live demo: https://cprg306-proj-aariyanas-projects.vercel.app/ (opens in a new tab) (for some reason the deployment is failing/not working correctly - it's been doing that for awhile now, even when nothing was wrong with the code and there weren't any errors)

Developer: Grace Bruketa & Aariyana Sayani

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

Dungeon Weaver

Dungeon Weaver is a website designed so that you can quickly make your Dungeons & Dragons character quickly. We used Vercel, Tailwind, VS Code, Next.js, the D&D character API (https://cprg-306-final.vercel.app- (opens in a new tab))

Github reposistory: https://github.com/TysonAndrews1/CPRG306-Final (opens in a new tab)

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

Developers: Benjamin Simms, Tyson Andrews

Contact info: benjamin.simms@edu.sait.ca, https://www.linkedin.com/in/benjamin-simms-9562b52a2/ (opens in a new tab)

Personal blog and tutoring website

Description: I developed a personal blog and course platform using Next.js, Firebase, Express, Tailwind CSS, and AWS. The website serves two main purposes: sharing my journey and teaching essential coding concepts, and providing a course discovery platform where users can browse and find the best coding courses suited to their learning goals.

Key Accomplishments: Full-Stack Development:

Built a dynamic and fully responsive web application, integrating Next.js for server-side rendering, Firebase for authentication, Express for backend functionality, and AWS for hosting. This resulted in a smooth, performant, and scalable platform. Course Discovery and Recommendations:

Designed a user-friendly feature that allows visitors to browse a wide variety of coding courses and easily discover the most relevant options for their needs. This feature reflects my goal of making the learning process more accessible and efficient. User Authentication and Reviews:

Integrated a secure login functionality using Firebase Authentication, enabling personalized user experiences. Additionally, I implemented a course review system, allowing users to share their feedback, which enhances the community aspect of the platform. Teaching Core Coding Concepts:

The platform serves as an educational resource, where I share the basics of coding and best practices that took me years to master. My aim is to help others learn these techniques quickly, saving them time and providing value through clear and concise lessons. Cloud-Optimized Infrastructure:

Leveraged AWS to host the website, ensuring a reliable, scalable solution that supports the growing number of users and content over time, while also optimizing for speed and performance. Modern, Responsive Design:

Designed a clean, intuitive, and mobile-friendly interface using Tailwind CSS, ensuring a seamless browsing experience across all devices. Real-World Application:

This project not only serves as my personal blog but also acts as a valuable tool for others looking to learn and grow in their coding journey. It reflects my ability to build full-stack web applications with a strong focus on both frontend design and backend functionality.

GitHub repository: https://github.com/jasjot190/jasjots-blog (opens in a new tab)

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

Developer: Jasjot Singh

Contact info: https://www.linkedin.com/in/jasjot-singh-998737246/?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app (opens in a new tab)

I would try to make the pinterest thing during winter break and submit that hopefully I'm not that proud of this one it's simple sorry.

MovieDB

Overview : Welcome to my website, a React-based movie database application built with Next.js. This app allows users to view trending movies, search for movies, and view details for every movie including the release date, plot summary, trailer and many more. You can even save your favorite movie to watchlist with your account.

Live demo : https://web-final-project-1.onrender.com (opens in a new tab)

Github Repo : https://github.com/rudra141004/web_final_project (opens in a new tab)

Developer : Rudra Solanki Contact info : Linkdin -- www.linkedin.com/in/rudra-solanki-90207925b (opens in a new tab) email- solankirudra1410@gmail.com

Wardrobe App (StyleGuide)

My project is called StyleGuide which is a web application that provides personalized clothing recommendations based on user style preferences and current weather conditions. Built with Next.js, Firebase,Groq API, OpenWeatherMap API, and TailwindCSS it offers an intuitive interface for managing your wardrobe choices.

GitHub repository: https://github.com/rsroman9800/wardrobe-app (opens in a new tab)

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

Developer: Roman Sorokin

Contact info: roman.sorokin@edu.sait.ca, https://www.linkedin.com/in/roman-sorokin1/ (opens in a new tab)

Watchit

Watchit is a user-friendly web application that helps users search for movies and TV shows to find out which streaming platforms they are available on. Users can filter results by region (CA, US, GB) to get region-specific availability.

Github repository: https://github.com/Francisthompson/watchit (opens in a new tab)

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

Developer: Francis Thompson

Contact info: francis5@shaw.ca

AskBot

AskBot is a conversational web app inspired by ChatGPT. It features a sleek, modern interface for AI-driven chats, built with the latest web technologies.

GitHub repository: https://github.com/Sssstoic/askbot (opens in a new tab)

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

Developer: James Tuling

Contact info: https://www.linkedin.com/in/james-tuling-261a861b6/ (opens in a new tab)

Country Info Finder

It is a web application that allows users to search for information about countries worldwide. Users can explore details such as the country's population, Capital City, flag, and region.

GitHub Repository: https://github.com/Akshar1483/Country-Info-Finder (opens in a new tab)

Live Demo: https://country-info-finder-tau.vercel.app/ (opens in a new tab)

Developer Name: Akshar Patel, Nirbhay Vachhani Contact Info: patelakshar1483@gmail.com, nirbhayvachhani@gmail.com

RMS restaurant management system

Our project is a dual-interface ordering system designed for a Canadian hotpot restaurant. It features a desktop web application for staff to manage tables, view orders, and track overall service, as well as a mobile web page for customers to conveniently place orders by scanning a QR code at their table. We built the user interfaces using React and integrated them with backend services and databases to ensure smooth communication between the restaurant floor and the kitchen.

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

Developer: Jiaping Liu (jiaping.liu@edu.sait.ca) Jun Wang (jun.wang1@edu.sait.ca) Yan Ling Lok (yanling.lok@edu.sait.ca) Kai-wei Wang (kai-wei.wang@edu.sait.ca) Jyun Yi Lin (jyunyi.lin@edu.sait.ca) Yifang Wu (yifang.wu@edu.sait.ca)

BookQuest

BookQuest, is a simple web application designed for book enthusiasts. Users can search for books by title, author, or keyword, and the app retrieves relevant results in real-time from a vast database. Each result provides key details like the book's title, author, publication date, and a brief synopsis. The app aims to create a seamless and enjoyable book discovery experience, perfect for casual readers and avid bibliophiles alike. Built with React, it combines responsive design with efficient search functionality, ensuring a user-friendly and visually appealing interface.

we will have a homepagethat serves as the landing page where used can search for books. the page will include search bar for entering book titles, authors, or keywords. we might also add a popular or trending books section. Componenets used for the home page will be header, searchBar, bookList and footer.

we will also have a search results page: the purpose of this page is to display the list of books matching the user's search query. the search results rendered dynamically based on user input. Componenets used will be SearchBar, BookCard (used in a list or grid layout), and gooter.

We will also have a book details page: the purpose of this page is to display detailed information about a selected book such as Book cover, title, author, description and other metadata. A link to purchase the book or learn more will be added if supported by the API. componenets used for this page will be Header, BookDetails, and footer

Components details:

  1. Header: to display the app name/logo and a navigation bar. will also include links to home and other possible pages (about or contact)
  2. SearchBar: allowing users to input queries and triggers the API call when a user submits a search
  3. BookList: renders a collection of bookCard componenets in a grid or a list layout. it fetches book data from the API and passes it to individual cards.
  4. BookCard: to display a brief overview of a book (title, author, thumbnail of the cover). it will also include a ""view details"" botton/link.
  5. Footer: contains copyright information, links to API providers, name of the group and contributers.

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

Live demo: cprg306-project-d3ld.vercel.app

Developer: Carl,Naz,Shawn

Contact info: chenghao.wu@edu.sait.ca,naz.zaamout@edu.sait.ca,yang.shi@edu.sait.ca

Mood Mender

Mood Mender is a simple emotional regulation tool that uplifts users through jokes, cute images, and motivational quotes.

GitHub repository: https://github.com/Jennawu2023/web_project (opens in a new tab)

Live demo: https://vercel.com/jennawu2023s-projects/web-project (opens in a new tab)

Developer: Zhenzhen Wu

Contact info: wzzpdl@gmail.com

My Todo List

My Todo List is a simple and effective task management application designed to help users organize their daily activities. Users can add tasks by typing their ToDos and adding them to the Pending Tasks list. Tasks can be marked as complete, moving them to the Completed Tasks section. The app dynamically displays the number of tasks in both Pending and Completed sections for better task tracking. This web application allows users to create, manage, and track their tasks with ease, ensuring they stay productive and focused.

GitHub repository: https://github.com/annammaxavier/my_todo-list (opens in a new tab)

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

Developer: Annamma Xavier

Contact info:

email: Annamma Xavier@edu.sait.ca

LinkedIn profile: linkedin.com/in/annamma-xavier-989a72304

Key Master

Key Master is a keyboard shortcuts visualization and learning platform developed with Next.js. The project aims to help users learn and master keyboard shortcuts for different systems and applications in a more intuitive way.

Core Features:

  • Interactive keyboard visualization
  • Shortcut animation demonstrations
  • Categorized shortcut browsing
  • Multi-platform support (Windows/MacOS)
  • User authentication system

Tech Stack:

  • Frontend:
  • Next.js 14 as the main framework
  • Tailwind CSS for styling
  • Framer Motion for animations
  • TypeScript for type safety

User Interface:

  • Responsive design Custom keyboard rendering system
  • Dynamic shortcut display

Data Management:

  • Structured shortcut data model
  • Category system supporting multi-platform shortcuts
  • Authentication System:
  • GitHub OAuth integration
  • Firebase backend support

Project Highlights:

  • Modular architecture
  • Type safety
  • High-performance animations
  • Cross-platform compatibility

GitHub repository: github_url (opens in a new tab)

Live demo: https://key-master-haonan-projects.vercel.app/ (opens in a new tab)

Developer: Haonan Ye

Contact info: haonan.ye96@gmail.com https://www.linkedin.com/in/haonanye96/ (opens in a new tab)

BooFoo

BooFoo is a book search website that allow users to search for book and get a list of books with the same name the user searched for. It offers users a picture of the book's cover, author, year published, subjects, and description . The user can save a book in their favorites to view later

GihHub repository: https://github.com/nazzaamout/cprg306-project (opens in a new tab) Live demo: cprg306-project-three.vercel.app Developer: Naz Zaamout naz.zaamout@edu.sait.ca https://www.linkedin.com/public-profile/settings?trk=d_flagship3_profile_self_view_public_profile (opens in a new tab)

Petopia: A Pet Management Platform

Petopia is a web-based platform that connects pet seekers with available pets for adoption. Users can browse pets by category and location, mark favorites, and view detailed information about each pet, including breed, age, and the owner’s contact details. Petopia aims to make pet adoption simple and accessible for everyone. The platform is built with Next.js, Firebase, and Tailwind CSS, ensuring a seamless and user-friendly experience for adopters and pet owners alike.

GitHub repository: https://github.com/wNv-paCe/petopia (opens in a new tab)

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

Developer: Kun Zheng

Contact info: wnv.pace@gmail.com

Winter 2024

Event Hosting CA

This website is designed to facilitate the process of sending event invitations and confirming attendance. It functions as an invitation that can be sent to guests, allowing them to confirm their participation and specify the number of guests attending the event. Additionally, the website provides a guest list and the count of confirmed attendees, which is beneficial for event organizers.

GitHub repository: https://github.com/tianajb/eventhosting (opens in a new tab)

Live demo: https://eventhosting-git-master-tiana-bautistas-projects.vercel.app/ (opens in a new tab)

Developer: Tiana Bautista

Contact info: https://www.linkedin.com/in/kristiana-bautista-61328a279/ (opens in a new tab)

CinemaPicks

CinemaPicks is an interactive web application designed to enhance the movie-discovery experience. Users can search for movies by title and add their favorite movies to a list on the platform. The application implements live search functionality, allowing for real-time movie searches without the need to explicitly submit queries. The technologies used include React.js, TailwindCSS, external APIs, and Vercel for deployment.

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

Developer: Rebecca Chan

Contact Info: imbehkah@gmail.com

Pricing King

Compare different shopping items from different website by scraping data from shopping website. This project use puppeteer and crawlbase to get data from shopping website.

GitHub repository: https://github.com/TimLinCa/PricingKing (opens in a new tab)

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

Developer: HuiEn Lin

Contact info: Mail: TimLin626@gmail.com Linkdin: https://www.linkedin.com/in/huien-lin-a56089117/ (opens in a new tab)

Breezy App

GitHub repository: https://github.com/IamStudentRommel/breezyapp-article.git (opens in a new tab)

Live demo: https://breezyapp-article.vercel.app/?page=overview (opens in a new tab)

Developer: SyntaxMel

Contact info: https://www.syntaxmelworks.com/contact (opens in a new tab)

Shoppers-in-palace

The project shows the items of men and women clothing and you can see the menu and add to cart and remove it. It also has the upcoming items which are about to come on sale but it has not yet come up for shopping.

GitHub repository: cprg306-project

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

Developer: Urooba Ejaz

Contact info: Urooba.Ejaz@edu.sait.ca

Poultry Pump - Workout Planner

My project is a web app that allows users to create workout plans by fetching exercises from Exercises by API-Ninjas. In order to create a workout plan or view their past workout plans the user will be required to sign in using Github. If the user is not signed in, they are still able to browse through the list of exercises.

Tech Stack - React.js Next.js, and Firebase

Github - https://github.com/jincabia/poultrypump (opens in a new tab)

Demo - https://poultrypump.vercel.app/ (opens in a new tab)

Developer - Jin

Contact:

Personal Portfolio

this is my personal portfolio where i'll showcase all my future projects

github: https://github.com/Akelvin51/portfolio.git (opens in a new tab)

developer: kelvin

linkedln: https://www.linkedin.com/in/kelvin-agho/ (opens in a new tab)

Xpense Trackr

Xpense Trackr is a free web-based tool designed to help you monitor your expenses and manage your finances efficiently. With this application, you can add your expenses and track your monthly spending through a user-friendly dashboard. The technologies used in this project include DaisyUI for styling, Next.js for the web application framework, Tailwind for utility-first CSS, and Firebase for backend support and data management.

GitHub repository: Xpense Trackr (opens in a new tab)

Live demo: Xpense Trackr (opens in a new tab)

Developer: Aivee Madrelejos

Contact info:

My Simple Portfolio Website

Overview: My portfolio website showcases my web development work and achievements in a clean, modern design. It features sections for my bio, a list of completed projects, and contact information. Built with Next.js, the site incorporates global CSS and Tailwind CSS for efficient styling and responsive design. Simple CSS animations enhance the visual appeal and user experience. Visitors can easily navigate through my projects and learn more about my skills, making it a visual resume and platform for industry connections.

GitHub repository: https://github.com/rcostillas/my-portfolio (opens in a new tab)

Live demo: https://my-portfolio-beta-mauve.vercel.app/ (opens in a new tab)

Developer: Romeo Costillas

Contact info: romeo_costillas@yahoo.com

LinkedIn: https://www.linkedin.com/in/romeo-costillas/ (opens in a new tab)

YouTube: https://www.youtube.com/watch?v=T4T2PJVT_js&list=PL6u1_VTMTuroJ2vYazClV476kTJHb4Gyb (opens in a new tab)

Xtract - Expense Tracker/Calculator

A web application for a simple expense tracking made possible by Next.js (opens in a new tab) and Firebase (opens in a new tab).

Sign in with GitHub or Google to start tracking your expenses.

This web application is designed to help you keep track of your expenses.

You can add new expenses, view a list of all your expenses grouped by the date added, and delete expenses that you no longer need.

The application also displays the total amount and average of all your expenses per day, which is updated in real-time as you add or delete expenses.

These features allows you to easily keep track of your spending and manage your budget more effectively.

The sorting feature allows you to sort your expenses by date, name or amount, making it easier to find specific expenses.

Additonally, the application displays random quote from Quotable API (opens in a new tab) to inspire and motivate you as you manage your expenses.

This web application is designed simply and intuitively, making it easy to use for anyone.

GitHub Repository: https://github.com/ShelynDM/expense-calculator.git (opens in a new tab)

Live Demo: https://expense-calculator-shelyn-del-mundos-projects.vercel.app/ (opens in a new tab)

Developer: Shelyn Del Mundo (opens in a new tab)

Contact Info: linkedin.com/in/shelyndelmundo

XYZ

xyz is an online store where you can buy any type of products.

GitHub: https://github.com/hunardeep720/xyz-online-store.git (opens in a new tab)

Developer: Hunardeep SIngh, Sheraj Thabal

Contact info: hunardeep.singh@edu.sai.ca

Trivia

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

Live demo: https://trivia-black-one.vercel.app/quiz (opens in a new tab)

Developer: Michelle Tran

Contact info: https://www.linkedin.com/in/michelle-tran-80005b173/ (opens in a new tab)

NHL Stats

A simple leaderboard of player season stats for the NHL with minimal styling, as well as player detail pages with career stats. Leaderboards can be generated for different types of stats for skaters and goalies, for any regular and playoff season. Player detail buttons will navigate to player landing pages that will display their career stats in a table as well as in a graph to visualize their career trends. Players not present on leaderboards can also be searched by name to view their details pages.

GitHub repository: https://github.com/theodore-bui/nhl-stats/ (opens in a new tab)

Live demo: https://nhl-stats-seven.vercel.app/ (opens in a new tab)

Developer: Ted

Contact info: theodore.bui@edu.sait.ca

Agora BNS

is an E-commerce platform that allows users to post items for sale. Users have the option to buy or sell items depending on their needs. We used technologies such as VSCode, Tailwind CSS, .Next js, Firebase and Vercel.

GitHub: https://github.com/YukiHyuga/Agora-BNS (opens in a new tab)

Vercel: https://agora-bns.vercel.app/ (opens in a new tab)

Developer: Justin James Marquez

Contact info: jjmarquez.mnl@gmail.com

Modern Portfolio

The "Modern Universe Portfolio" project is a dynamic web application built using Next.js, a React framework known for its simplicity and performance. This innovative portfolio serves as a showcase of my skills and expertise, providing visitors with an immersive experience through interactive elements and sleek design. Leveraging Next.js, the project ensures fast load times and smooth navigation, enhancing user engagement and satisfaction. Key features include a visually captivating presentation of my experience and education, animated timelines, and a responsive layout that adapts seamlessly to various devices.

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

Live demo: https://my-portfolio-fn3mv7gjo-danny2705s-projects.vercel.app/ (opens in a new tab)

Developer: Danny

Personal Portfolio

A portfolio showcasing some personal projects I worked on during this class. Hopefully, I update it with more projects both personal and professional.

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

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

Developer: Dexter Balino

Connect with me @ https://www.linkedin.com/in/dexterbalino/ (opens in a new tab)

Personal Portfolio

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

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

Developer: Gourav Sharma

Contact info: Gourav.Sharma@edu.sait.ca

Currency Converter

A currency converter is a tool or application used to convert the value of one currency into another. It's commonly used for financial transactions, international trade, and travel. The converter works by utilizing current exchange rates to calculate the equivalent value of one currency in terms of another. Users typically input the amount of money in one currency, select the currency they want to convert to, and then the converter displays the converted amount. It also shows the trends variations in currency comparing with CAD.

GitHub repository: https://github.com/Harnoor-Dhindsa/Currency-Converter.git (opens in a new tab)

Link: https://currency-converter-hbk.vercel.app/ (opens in a new tab)

Developers:

  • Bhupinder Singh
  • Harnoor Dhindsa
  • Kowarjit Singh Chahal

Contact info:

To Do List

Description: Our project is a ToDoList web application where users can log in using GitHub, add tasks, delete tasks, and mark tasks as complete. The application features a clean and intuitive user interface, enhancing the overall user experience.

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

Live demo: https://vercel.com/nishit1710s-projects/cprg306-finalproject (opens in a new tab)

Developers: Nishit Patel, Shubham Patil, Henilkumar Patel

Contact info: Please feel free to reach out to us if you have any questions or feedback regarding our project.

You can contact us via email at henil9873@gmail.com, patilshubham146@gmail.com, and nishitpatel10481@gmail.com

To Do List

Description: Our project is a ToDoList web application where users can log in using GitHub, add tasks, delete tasks, and mark tasks as complete. The application features a clean and intuitive user interface, enhancing the overall user experience.

GitHub repository: gh repo clone Nishit1710/cprg306-finalproject or https://github.com/Nishit1710/cprg306-finalproject (opens in a new tab)

Live demo: https://vercel.com/nishit1710s-projects/cprg306-finalproject (opens in a new tab)

Developers: Nishit Patel, Shubham Patil, Henilkumar Patel

Contact info: Please feel free to reach out to us if you have any questions or feedback regarding our project. You can contact us via email at

My project covers lots of things including travel exploring options and much more.

GitHub repository: samreetkaurvirk

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

Developer: Samreet Kaur

Contact info: email address: samreetcalgary@gmail.com

Digital Herbarium

This project aims to provide a platform for users to upload images and document their findings after successfully identifying a plant in the field. The project is built using Next.js, a React framework, and Tailwind CSS, a utility-first CSS framework.

Features

  • A unique user authentication system that allows users to create an account, log in, and log out.
  • A comprehensive filter system that allows users to search for plants based on the plant's Family, Genus and Species.
  • A user-friendly interface that allows users to upload images and document their findings.

Backend Services

This project leverages the following Google Firestore services for authentication, database, and storage:

  • Authentication: Google Firestore Authentication is used for user authentication and authorization.

  • Database: Google Firestore is used as the NoSQL database to store and manage user plant collection data.

  • Storage: Google Firestore Storage is used to store and retrieve user-uploaded images.

Information

Typr

Efficiently explore and test font combinations directly from the Google Fonts library, ensuring every choice is not only visually appealing but also fully usable for software projects. This design tool speeds up the process to help developers and designers find perfect, cohesive font pairings quickly, enhancing readability and aesthetics with ease. Perfect for streamlining design workflows.

https://typr.online/ (opens in a new tab)

Developer: Eric Barbosa Jr.

Contact Info:

TaskBucket

The web app I developed serves as a convenient platform for users to organize and manage their daily tasks. It functions as a display interface where users can view their pending tasks and easily delete completed tasks, providing a streamlined approach to task management and productivity tracking.

GitHub repository: https://github.com/Geo-SD/taskbucket (opens in a new tab)

Live demo: taskbucket-41f7bwj3e-george-simons-projects.vercel.app

Developer: George Simon

Contact info: Email: georgedan.20@gmail.com, LinkedIn profile: https://github.com/Geo-SD (opens in a new tab)

Cinema Vault

Welcome to Cinema Vault, a React-based movie database application built with Next.js. This app allows users to view trending movies, search for movies, and view details for every movie including the release date, plot summary, and rating.

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

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

Developer: Kshitij Tagra, Jaskaran Singh

Contact info: kshitij20112003@gmail.com, jaskaran2003.jpr@gmail.com

Portfolio

It is my portfolio. hope you likes it

Live demo: https://portfolio-ruvals-projects.vercel.app (opens in a new tab)

Developer: Ruvalpreet

Receiptify

Receiptify offers services for storing users' receipt information. Users can upload receipt images, and the application converts them to JSON data and stores them in the Firebase database. Then, users can search for any information in the uploaded receipts and view the receipt's data, including its photo.

Technology suing : Firestore database, Firebase storage, Firebase Authentication, Verify Lens API (OCR Technology), Algoria API for substring searching

GitHub repository: https://github.com/ChonthichaJessie/personalReceiptManagement (opens in a new tab)

Live demo: https://personal-receipt-management.vercel.app/ (opens in a new tab)

Developer: Jessie Chonthicha

Contact info: https://github.com/ChonthichaJessie (opens in a new tab)

Entertainment Web App

A dynamic web application that offers a rich repository of information about movies and TV shows, akin to IMDb. Built using React JS and powered by the TMDB API, the app delivers a seamless, user-friendly browsing experience across all devices.

GitHub repository: https://github.com/ksingh62/entertainment-web-app (opens in a new tab)

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

Developers: Kapilmeet Singh, Sahib Singh Aulakh

Contact info:

YYC Flight Deals

This app connects and pulls live flight data from two different APIs and displays cheap flights out of Calgary. Technologies used: React.js, Next.js, Node.js, Tailwind.

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

Live demo: https://yyc-flight-deals.vercel.app/ (opens in a new tab)

Developer: Dillan Ferster

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

Guess the Gathering

Guess the Gathering is a simple card guessing game where players have to guess various attributes of Magic: The Gathering cards. It offers different modes, each focusing on a specific attribute of the card.

GitHub Repository (opens in a new tab) | Live Demo (opens in a new tab)

Developers: Dawson Gall, Greg Pilkington, Ryan Connell

CFL Facts

A Basic "Starter Level" website that shows some facts on each current CFL (Canadian Football League) team as well as another page that lists the defunct CFL teams. There is plenty of room for Improvement!

GitHub repository: https://github.com/GDReadwin/cfl-scores-project.git (opens in a new tab)

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

Developer: Desmond Readwin

Contact Info: gdread3@gmail.com

Yggdrasil Industries

This portfolio functions as an online resume, designed to show off my strengths beyond what a simple CV can demonstrate. While this was built for a project as part of my software development diploma, it will continuously be expanded upon as I learn more skills and continue further into game development. Currently displays ongoing and completed projects, a random quote generator using my own works, and will continue to be built upon in the future. Uses React.js and DaisyUI as the UI toolkit.

Developer: Linden Wright

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

GitHub repository: https://github.com/Reann-Shepard/yggdrasil-industries (opens in a new tab)

Email: linden.wright001@gmail.com

LinkedIn: linkedin.com/in/linden-wright/

Newbies Guide to DnD

This app was developed in react, and pulls from the DnD 5e API to show newcomers to dnd what to expect when they first want to play. The app shows the basic rules, as well as helps them plan a character by showing them the different classes and races that are playable in the basic rules of DnD

Github repository: https://github.com/DannyHorning/dndCharacterCreator (opens in a new tab)

Live demo: https://dnd-character-creator-puce.vercel.app/ (opens in a new tab)

Developer: Danny Horning

Contact info: horningdanny@gmail.com https://www.linkedin.com/in/danny-horning/ (opens in a new tab)

Portfolio Website

Description: My portfolio website showcases my introduction, projects, proficiencies, and contact information. It was built using HTML, CSS, and JavaScript.

GitHub repository: https://github.com/JAGDEEP-BARYAR/baryar-project (opens in a new tab)

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

Developer: Jagdeep Baryar

Contact info:

Healthy Eats

The "Healthy Eats" project is a Next.js and React-based web application that provides users with personalized meal planning capabilities. Key features include user authentication via Firebase, BMI/BMR calculation, and the generation of tailored 7-day meal plans using external APIs, with CRUD operations for managing user data.

GitHub repository: https://github.com/MeetGodad/healthyeats (opens in a new tab)

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

Developer : Meet Hasmukhbhai Patel

Linkedln : www.linkedin.com/in/meet-patel-19860b272 (opens in a new tab)

Developer : Yash Rajesh Bhai Hingu

Linkedln : https://www.linkedin.com/in/yash-hingu-350971198 (opens in a new tab)

Digital Clock.

repo: cprg306-project

Developer: Arshpreet Kaur

Contact: Arshpreetkaur01@gmail.com

LiftFeed

liftfeed is a social media platform for people who regularly like going to the gym and can share their fitness goals with others.

Thank you guys for checking out my demo, I appreciate it.

Recipe Sharing

Our project aims to provide a website where people can share their recipes. We utilized React and Next.js frameworks, along with Tailwind for styling, and integrated Firebase for authentication and database.

GitHub repository: Github recipe-sharing (opens in a new tab)

Live demo: Recipe Sharing (opens in a new tab)

Developer: Sanghyeon Lee, Thuy My Lam

Contact info: sanglee.9174@gmail.com, thuymylam96@gmail.com

TasteTrek

Welcome to TasteTrek! Here, you'll discover a diverse array of recipes, ranging from traditional dishes to contemporary creations. Whether you're a seasoned chef or just beginning your culinary adventures, there's something here for everyone.

Embark on a flavorful journey with us and delve into the captivating world of food!

Brandt's Storyboarding Tool!

A basic tool used to quickly storyboard scenes for cartoons. Simply draw and write your scene, then export it as an image and it will use the text as a caption.

GitHub repository: https://github.com/BrandtFgit/WebDev2FinalProject (opens in a new tab)

Live demo: https://web-dev2-final-project-nvfztfkxk-brandts-projects-0e5d2d99.vercel.app/ (opens in a new tab)

Developer: Brandt Fowler

Contact info: BrandtFowler2004@gmail.com

To Do Activity App

I developed this app to feature a private frriebase system where users can save multiple lists there. Making use of Next.js and react it will allow users to create, read, and probably export their content.

GitHub repository: https://github.com/Jesse25-t (opens in a new tab)

Live Demo: https://proj-306-application.vercel.app/ (opens in a new tab)

Developer: Thomas Jesse

Contact info: jesseayo25@gmail.com

MyPorfolio

I created my own portfolio so I will be able to expand it in the future and make it better or use it to showcase what type of project I have created. My portfolio has the basics of the About, Projects, and Contact sections with some description of myself. I used React, Node.js, and Tailwind for this project.

GitHub repository: https://github.com/brandon-tran8/myportfolio (opens in a new tab)

Live demo: https://myportfolio-ten-tau.vercel.app/ (opens in a new tab)

Developer: Brandon Tran Contact info:

The MONSTERDLE

This is a Dungeons & Dragons themed puzzle game inspired by WORDLE, GAMEDLE, and other simular clones. The objective is to solve what mystery D&D monster the game is prompting by guessing other monsters, and using that monsters stats to narrow down the correct monster. It uses an open DnD5e API to get the information on all the monsters.

GitHub: https://github.com/Andrew-Reimert/monsterdle (opens in a new tab)

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

Developer: Andrew Reimert

Restaurant Ordering System

my project is about resturant ordering system and i used html,css an javascript for interface

git hub repistory : https://github.com/Panthagan/resturantordering (opens in a new tab)

Live demo: https://vercel.com/apoorvas-projects-b9cb0bbb/resturantordering (opens in a new tab)

contact info : email: apoorva.panthagani@edu.sait.ca

https://github.com/PanthaganiAnanya/cprg306Projects/tree/main/app/recipe (opens in a new tab)

VibeCast

Next.js project, where you can make a personalized playlist in minutes based on the current top songs in different countries and moods. You can also set mood based on weather conditions of cities all around the world. This is buggy at the moment but will be fixed as time goes on

GitHub repository: https://github.com/SidhuHarijot/vibecast (opens in a new tab)

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

Developer: Harijot Singh

Contact info: sidhuharijot@gmail.com

Arshpreet’s Portfolio

My personal website is like a display case for my web development skills, projects, and experiences. It's where people can find out about me, see what I've worked on, and get in touch if they want to work together. The design is simple and modern, with cool stuff that keeps people interested as they look around.

Technologies Used:

  1. HTML and JavaScript: for structuring the content and adding interactivity to the website.
  2. Node.js: for server-side scripting and handling backend functionalities.
  3. React: for building a dynamic and responsive user interface.
  4. Styling Libraries (Tailwind CSS): for quickly styling components and maintaining a consistent design system.
  5. GitHub API: for fetching and displaying repositories from my GitHub profile, showcasing my coding projects.

Overall, The project uses both front-end and back-end technologies to make a website that's easy to use and looks good. It gives visitors a peek into what I can do as a web developer.

GitHub repository: https://github.com/Arshpreet77/portfolioarshpreet (opens in a new tab)

Live demo: https://portfolioarshpreet-arshpreet77s-projects.vercel.app/ (opens in a new tab)

Developer: Arshpreet Singh

Contact info:

Crypto Sphere Hub

This website tracks market data for crypto currencies, it has a list of Top and Bottom 10 movers, some global market data and a long list of tokens with their own data shown.

There will be later updates to this website where you'll be able to track your own portfolio, change the currency to CAD (if API doesn't limit this) and a more detailed information page for any crypto when you click on it's name/symbol.

GitHub repository: https://github.com/FrankBosse/CryptoSphereHub (opens in a new tab)

Live demo: https://crypto-sphere-hub.vercel.app/ (opens in a new tab)

Developer: Frank Bosse

Contact info:

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