Introduction
In a website, the frontend refers to what the user interactive with and sees. Our case is no different then that definition. React, TailwindCSS, and NextUI 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:
Volta is recommended to be used for this project as it makes installing Node.js and configuring it much easier.
It's also important to read the contributing guidelines, as they are recommendations on how you should contribute.
Setup
Node.js v22 or higher is required!
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
npm install
Step 3 - Run the development server
npm run dev
Website Structure
Generally, the website is structured into these four main components:
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.