Skip to content

Project Structure

Jump to bottom
Jon Andre Briones edited this page Jul 24, 2025 · 2 revisions

Tech Stack

Here are some skills you can put on your resume.

Languages

  • TypeScript/JavaScript
  • HTML5
  • Sass/CSS
  • Bash

Libraries/Frameworks

  • Node.js
  • GSAP (animation library)
  • FontAwesome (icon library)
  • Angular (web framework)

Main Site

At the moment, the main site is fully single-page application (SPA) and client-side rendered (CSR). We are using Angular 20, which stabilized a paradigm shift that has been built up since Angular 16.

Static Sites

The current static sites are for the events that the CSSS runs. They are tech-fair, frosh, madness and fall-hacks. These are all being transitioned to be independent from the main site and are made using the trio of HTML/CSS/JavaScript.

Directory Structure

The project is currently split up into the main site code and everything else (static sites, assets).

  • /public Contains assets and things that will be shared between the static and main sites. This folder will need to be cleaned up in the future.
    • /images Images used by the main site
      • affiliates Images that contain the logos that our affiliate organizations use
      • full-size Mess of images that have not been compressed
      • placeholders Placeholder images for when you need to get something with images done quickly
    • /legacy An old folder that contains remnants of pre-rewrite stuff. Will be removed in the future
    • /static Shared assets used in the static sites
    • /<subdomain> Folders that contain the files used for all the static sites
  • /scripts Contains scripts used to aid in development
    • /app Scripts used for the main site
  • /src Contains all the code used in the main site, everything here is used when compiling the application
    • /app All the main-site-specific Angular code lives here, such as components, services, directives and test files
    • /assets Files for assets that need to be defined in TypeScript, such as icons
    • /styles TypeScript files that compile to _<file-name>.scss. when running npm run pre-build. These files make it so we can share share variables with our style sheets and our Angular code.
    • /ui The component library that will eventually be worked on that can be shared with other projects
  • styles.scss Global stylesheet. Anything put here will apply to the entire main site
  • index.html HTML file that is used as the entry point for the application. Doesn't do anything if unless you're running the application.
  • main.ts Entry point of the Angular application. Doesn't do anything unless you're running the application.
Clone this wiki locally