Introduction
In a website, the frontend refers to what the user interactive with and sees. Our case is no different then that definition. React and shadcn/ui is what the frontend primarily uses.
Prerequisites
There are some tools that you would need to have installed before you continue. They are listed below:
It's also important to read the contributing guidelines, as they are recommendations on how you should contribute.
Setup
Step 1 - Clone the repo
We first need to clone the repo so we can start programming. This can be done shown below.
git clone https://github.com/UCMercedACM/Chapter-Website \
&& cd Chapter-Website/react
Step 2 - Install all dependencies
bun install
Step 3 - Run the development server
bun run dev
Website Features & Structure
Generally, the website is structured into these four main features:
Homepage
This page serves as the main landing page, and is what is loaded in when someone goes to the website. Ideally this would contain the necessary information as designed on the wireframe to get the attention of the user.
Events and Workshops
Although CatLife does exist, this component itself would allow for much more detailed information, along with a way to keep track of different events in a convenient and centralized manner. These are pulled from the backend, which would allow for dynamic content served to the user.
SIGs Overview
Some people may get confused when first joining the club, so we need a page to display each SIG and what they do. There are some data that has to be fetched from the backend, but this mostly serves as an informational page.
Dashboard
We all know that clubs have to make a QR code that goes to a Google Forms link just to get you to sign in to the meeting. Now with this system, you literally don't have to. Just with a click of a button, you can sign up to attend a workshop or any important meetings. Also with the added features of reminders via Outlook events, etc.