I created this project for my software engineering course for Fall 2023
Problem it tries to solve
I worked as a classroom technology assistant at the time of developement and one of my responsibilities was to maintain a department website called the “Virtual Tour”, which has a namespace conflict with an existing “Virtual Tour” that showcases the university interactively. With that in mind, let’s call my department’s virtual tour, CCLT tour
The CCLT tour is a comprehensive static website detailing the A/V technology-equipped rooms at Towson University, including features like projectors and ceiling microphones.
This resource provides essential information for understanding the audiovisual capabilities of each classroom ahead of time.
The pages of this static site are generated by a Visual Basic program that performs the following:
- Database calls to get the list of equipment and other metadata about the room such as the number of seats and whether it has wireless display functionality
- Generates an HTML page for each directory
This project is intended as a modern rewrite of the CCLT tour website that aims to be more extensible.
Tech Stack
| Stack | Name |
|---|---|
| Frontend | Astro & React |
| Styling | TailwindCSS |
| Backend | Supabase |
Back End
This is the first time I’ve ever heard of a BaaS (backend as a service)
Initially, I was worried I was going to spend a considerable amount of time architecturing and implementing the backend but I was surprised at how it automatically generated API endpoints based on the database.
Supabase provides a Javascript SDK for the front-end that allows the front-end to easily communicate with the back-end, compared to an API
Front End
I’ve always tip-toed my way out of working with any type of front-end development by using some CSS framework or Googling it. It’s a weakness I’m not proud of having but I’m planning to improve by doing a front-end deep dive and taking a course on web development. I was heavily reliant on Tailwind since I lack experience with CSS and it just looks good.
The image carousel and the chatbot required me to import React. I choose React because it had the most code samples I can take from.
My struggles with front-end has greatly humbled me.
Use of AI
This sounds like a push by the CS department at my university, but one of the requirements of this project was to have AI in our projects, somehow… even if it doesn’t need it.
So I’ve opted to use Hugging Face’s inference API for a Q&A bot that I’ve disabled because the chat UI is client-side rendered, exposing my API key 😅