TESC-Portal

• TESC-Portal
• Links
• About the project:
  • The vision
  • Project specifications / Todo list:
• Getting Started
  • Technology
  • Installation
• Folder Structure
• Dependencies

Links

• Site home page
• TESC home page
• TESC tech project ideas doc (for future reference)

About the project:

Born from combining ideas and suggestions from our PVP members, we needed both a membership portal to monitor membership status and personal points for attending events (attendance verified at the event) along with an interactive bulletin board for clubs to post events on. These ideas were combined and centralised into the TESC-portal project managed by the Tech team @TESC.

The vision

In creating this portal, we wish to:

• Stream-line interaction and marketing of club events
• Promote membership participation in events
• Provide a central hub for all of our internally developed tools in the future

Project specifications / Todo list:

• Basic requirements

  • User log in and management
  • Different views for TESC internal members, club principal members and general club members

• Membership requirements

  • Student points management
  • Profile picture and description management for clubs

• Bulletin Board Requirements

  • Principal members of clubs able to post and edit events and set passwords for events
  • Principal members able to view events they've posted
  • Manage user RSVP and attendance status
  • Sort, Search and filter functionality

Getting Started

Technology

• Node.js (v20 or later recommended)
• Text/Code editor

Installation

1. Clone the repo with git clone https://github.com/UCSDTESC/tesc-portal.git
2. Open the repo in your preferred code editor
3. Run npm install to install dependencies
4. Run npm run dev to start the development server

Folder Structure

📂src
 ┃ ┣ 📂components           # components file
 ┃ ┣ 📂adminUser            # components used by principal members
 ┃ ┃ ┣ 📂Data               # components for the Data Table
 ┃ ┃ ┗ 📂Form               # components for insert form
 ┃ ┣ 📂Bulletin             # components for bulletin
 ┃ ┗ 📂User                 # components for general User
 ┣ 📂lib
 ┃ ┣ 📂hooks                # Custom Hooks
 ┃ ┣ 📜constants.ts         # Global constants
 ┃ ┣ 📜UserContext.tsx      # UserContext and methods for
 ┃ ┗ 📜utils.ts             # utility functions
 ┣ 📂pageRoot               # Root components like navbar, footer...
 ┣ 📂services               # backend middleware
 ┣ 📂supabase               # bank-end connection

Dependencies

The dependencies listed below are the main important ones to understand the project workflow along with the folder structure. Other packages are also used so this list is by no means exhaustive. Please check package.json for the actual list of dependencies

• Vite - Build Tool
• React - Frontend Framework
• React Router - Routing
• Tailwind CSS (v4.0+) - CSS Framework
• Supabase - Back-end client for data storage and user auth

---

Contributors: Hieu Nguyen, Nishitha Selvakumar Last Edited: 21.04.25

---