Skip to main content

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:

tip

Volta is recommended to be used for this project as it makes installing Node.js and configuring it much easier.

important

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
note

Lefthook is automatically installed and set up during this setup. Each time before you commit, Biome will automatically run to lint and format the code.

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.