📌 Contents

1. Setup
2. Start
3. Scripts
4. Contribution
5. Conventions
   • Naming
   • Directories
   • Component structure

🛠️ Setup

Using nvm is advised.

Using yarn is required. Install it with npm like this:

npm install -g yarn

Clone the project:

git clone https://github.com/5-semesterprojekt/Frontend.git

Install packages:

cd Frontend
yarn install

Setting up the backend is also highly advisable.

🚀 Start

The frontend can be started by running the start script:

yarn start

It should open by itself, otherwise it is available here: https://localhost:3010/
While the frontend can show the website by itself, there is practically no functionality or data without the corresponding backend.

📜 Scripts

yarn start

Starts the frontend on a local development server, which can be visited on https://localhost:3010/.

yarn build

Builds the project into the /dist directory in root.

yarn test

Runs all tests (see vitest for more).

yarn prettier

Formats the code according to the .prettierrc.

🏗️ Contribution

1. Make a branch from main using the suggested branch name from Shortcut. (i.e. feature/sc-{story number}/{feature-name})
2. Commit until the feature is "complete"
3. Run yarn prettier so the code is formatted correctly
4. Make a pull request to main and request a review
5. Squash and merge when all requirements are met

It is HIGHLY advisable, that you don't branch off secondary branches. Only branch off main. After merge the app is automatically published to Netlify. Feel free to customize and expand upon this documentation based on your specific contributions.

📋 Conventions

Naming

• Variables and functions are camelCased. However functional components are PascalCased. (i.e. UI-related => PascalCasing)
• .ts files must be camelCased
• .tsx files must be PascalCased
• If a .tsx file contains a modal or page, it must be named accordingly (fx. HomePage.tsx or EventModal.tsx)
• All folders are lower case and words are separated with dashes (fx. "sub-pages")
• Avoid abbreviations
• .js files are NOT allowed in src

Examples:

// Modal
✔️ EventModal.tsx
❌ Event.tsx               // Missing 'Modal'
❌ eventModal.tsx          // Not PascalCasing
❌ Event.Modal.tsx         // Don't dot separate

// Page
✔️ CalendarPage.tsx
❌ Calendar.tsx            // Missing 'Page'
❌ calendarpage.tsx        // Not PascalCasing
❌ Calendar.Page.tsx       // Don't dot separate

// Helper functions
✔️ eventValidation.ts
❌ EventValidation.tsx     // Not a UI component
❌ EventValidation.ts      // Not camelCasing

✔️ let organizationId = 0;
❌ let orgId = 0;              // Abbreviation

✔️ function showEvent (event: CalendarEvent)
❌ function ShowEvent (event: CalendarEvent)

Directories

src

// Reusable components for the entire app
📁 components
// Library for more general purpose functions
📁 lib
// Pages contains folders named after the pages
📁 pages
    📁 home
    📁 calendar
        // Components folder for reusable components scoped to this page
        📁 components
            📄 Event.tsx
            📄 EventModal.tsx
        // File handling state (usually selectors and atoms from Recoil)
        📁 state
        // All test files
        📁 tests
        // Type definitions
        📁 types
            📄 calendarEvent.ts
            📄 calendar.ts
        // Main page file
        📄 CalendarPage.tsx

Component structure

// import statements
import { useState } from 'react';

// interface with component properties defiend
interface ComponentProps {
    initial: number;
}

export default function Component (props: ComponentProps) {
    // hooks
    const [number, setNumber] = useState(props.initial);

    // logic
    const addOneToNumber = () => {
        setNumber((value) => value + 1);
    }

    return (
        <div>
            {/* Only JSX code here */}
            <span>Is this an odd number: {isOdd(number)}</span>
            {/* Avoid declaring inline functions */}
            ✔️ <button onClick={addOneToNumber}>Add</button>
            ❌ <button onClick={() => setNumber((value) => value + 1)}>Add</button>
        </div>
    );
}

// helper functions
function isOdd (n: number) {
    return n%2 === 1;
}