DePaul CSS Website

View the site here: https://depaulcss.vercel.app

Club website for the DePaul University Computer Science Society. This project is a React single-page application built with Vite and deployed with a Vercel SPA rewrite so client-side routes work in production.

Overview

The site currently includes four main sections:

• / - landing page with club information, meeting details, and Discord call to action
• /events - upcoming and past events rendered from CSV data in public/events/events.csv
• /projects - project inquiry section and project showcase area
• /eboard - executive board member profiles

Tech Stack

• React 18
• Vite 5
• React Router DOM 6
• Papa Parse for reading event data from CSV files
• ESLint 9 for linting

Getting Started

Prerequisites

• Node.js
• npm

Install dependencies

npm install

Start the development server

npm run dev

By default Vite will print the local development URL in the terminal.

Build for production

npm run build

Preview the production build locally

npm run preview

Lint the project

npm run lint

Project Structure

.
├── public/
│   ├── events/
│   │   ├── events.csv
│   │   └── pastEvents.csv
│   └── images/
├── src/
│   ├── components/
│   ├── pages/
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
├── vercel.json
└── vite.config.js

Content Maintenance

Events

The Events page parses public/events/events.csv in the browser using Papa Parse. The current CSV header is:

title,date,description,googleDriveLink

Behavior to be aware of:

• events with a future date are shown under Upcoming Events
• events with a past date are shown under Past Events
• both sections are derived from events.csv
• googleDriveLink is optional and can be used for event resources or photo folders

When editing dates, use a format that JavaScript Date can parse consistently.

Executive Board

Board member content is currently hard-coded in src/pages/Eboard.jsx. Update names, roles, bios, and image paths there.

Projects

The Projects page is currently scaffolded with static placeholder cards in src/pages/Projects.jsx and src/components/project/Project.jsx. If you want real project content, this is the next area to make data-driven.

Deployment

The app includes vercel.json with a rewrite rule that sends all routes to /, which is required for React Router paths like /events, /projects, and /eboard to work after deployment.

Notes

• Static assets are served from public/ and referenced with root-relative paths such as /images/logo.png.
• The landing page copy and social links are maintained directly in the React components under src/components/.