Content Comparison

client/
    package.json
    src/
        App.scss                # Contains styles that we want globally applied, eg. scrollbar styles, default fonts, etc.
        App.tsx                 # The root React UI component. This is where you should add new routes.
        assets/                 # A bunch of images, fonts and other static content that you wouldn't put next to your source code
        components/             # All our React components (minus the pages themselves - those belong in the 'views' directory!)
            Autocomplete            # Basically a dropdown that suggests autocompletion results. See mui.com/components/autocomplete/.
            Features                # Some components used to help showcase our project features on the landing page.
            FloatingWindow          # The collapsible floating window on the visualiser, used for the operations menu and the code snippets
            Footer                  # Footer element at the bottom of some pages, showing social links and links to other places.
            Frame                   # Literally like picture 'frames', used to decorate showcase images 
            Gallery                 # A pretty container for pictures. Used to showcase a collection of items that have pictures. See mui.com/components/image-list/.
            HorizontalRule          # Basically prettier <hr /> components. See mui.com/components/dividers/.
            Loader                  # Some fancy spinners, used to show some content is loading. See mui.com/components/progress/.
            Navbars                 # Top navbar and side navbar
            PageLayout              # Contains some fundamental UI that is reused by our pages. Eg. the topnav, some container padding, etc.
            Tags                    # A list of 'chip' components. It's mainly used to show tags for a topic like "COMP2521", "COMP1511", etc. See mui.com/components/chips/. 
            Topics                  # Contains the UI cards for all the topics (linked list, BST, etc.) that appear on the homepage.
            Visualiser              # Our visualiser UI. This includes the controller UI, terminal, GUI form, etc. 
                                    # This DOES NOT include any visualiser implementation! This is purely the surrounding UI. For the actual implementation, see 'visualiser-src'
        constants/              # Contains global config and values that would otherwise be hard-coded in our source code.   
            api.ts              # This contains important API connection info, eg. what the API URL is.
            cookies.ts          # This contains the names of cookies we're using. Eg. We need a name for the cookie that tracks whether the user should have dark mode on or off.
        main.tsx               # The REAL root UI component. This should rarely be touched unless we're doing fundamental changes. See 'App.tsx'.
        structsThemes.ts        # Our colour palette!
        utils/                  # A bunch of reusable functions.
            apiRequests.ts          # Contains all the functions you need to grab or change content from the API. Eg. there's functions for fetching lessons, topics, etc.
            markdown-util.ts        # Some functions for working with markdown.
            Notification.ts         # Spawns a small notification/popup. Great for non-invasive error messages and communicating short messages with the user.
            url.ts                  # Some string manipulation functions, specifically for working with URL-like strings.
        pages/                  # Our pages. These are React components that specifically define page layout and content. For specific UI elements, see 'components'.            
            Feedback.tsx                     
            HomePage.tsx                     # Our landing page.
            Page404.tsx                      # A cool 404 page for when the user navigates to a route that we haven't defined. Eg. structs.sh/non-existent-page.
            VisualiserPage.tsx
        visualiser-src/                      # Our visualiser source code. All the internal visualiser magic happens here. This does NOT define anything related to UI - for that, see 'components/Visualiser'. 
            binary-search-tree-visualiser/   # BST visualiser layout and operations. Includes things like insertion, rotation, etc. and drawing the tree.  
            controller                       # Executes controller operations like play, pause, speed change, etc. and manages state such as the animation timeline and operations history.
            linked-list-visualiser           # Linked list visualiser layout and operations. Includes things like insertion, deletion, etc. and drawing the linked list. 
            typedefs.ts                      # Custom data types used by the Visualiser implementation.