CS 571: p91 Project

A modern React application built for CS 571, utilizing Vite. The project is strictly typed with TypeScript and styled using a combination of Tailwind CSS and React Bootstrap.

Live demo: https://cs571-s26.github.io/p91/

Tech Stack

• Framework: React 19
• Routing: React Router v7
• Build Tool: Vite 8
• Language: TypeScript 5.9
• Styling: Tailwind CSS v4 & React Bootstrap
• Icons: Lucide React
• Linting & Formatting: ESLint (v10 Flat Config) + Prettier

Getting Started

Prerequisites

Ensure you have Node.js installed on your machine.

Installation

Clone the repository and install the dependencies:

npm install

Development Server

Start the Vite development server:

npm run dev

The application will be available at http://localhost:5173/p91/.

Code Quality & Formatting

This project maintains strict code quality standards to ensure consistency and prevent bugs.

• Linting: ESLint is configured with rules for modern JavaScript, TypeScript, and React Hooks.
• Formatting: Prettier is integrated to handle all code formatting (2-space indent, single quotes, trailing commas).

Available Commands

• npm run lint: Scans the src directory for logical errors and rule violations.
• npm run lint:fix: Automatically fixes fixable linting errors.
• npm test: Runs the test suite (Vitest).
• npm run test:run: Runs the test suite once (CI-friendly).

Note for Developers: It is highly recommended to use VS Code with the ESLint and Prettier extensions installed, and to enable editor.formatOnSave in your local workspace settings.

Build & Deploy (GitHub Pages)

Production builds output to docs/ and set Vite base to /p91/ so the app works when hosted under that subpath on GitHub Pages (see vite.config.ts).

npm run build

To preview the production build locally:

npm run preview

Project Layout (high level)

• src/: application source
• src/pages/: route-level pages
• src/components/: reusable UI components
• src/test/: Vitest setup