Discuss workflow

[retrokiller543]

Basic Outline

You need to discuss how you are going to work with the code and come to an agreement on what each of you should do. For example one of you focus on the login page while the other person makes the landing page.

Coding Conventions

When coding in a team its really important that everyone follows a common set of coding conventions, this makes it easier to work with other peoples code. A good starting ground is to see what are the conventions of the language used, for javascript its common to use camelCase as the naming convention.

Try to setup some OCD guidelines that everyone can agree on, for example should everything be as compact as possible or can it be more spaced out for better readability.

[EmEhPa]

Project Coding Conventions

File Structure

• Vue files shall be placed in the frontend repository.
• Component files such as Button will be placed in frontend/src/components.
• Pages such as Home, About Us will be placed in frontend/src/views.
• Pinia store files will be placed in frontend/src/stores.
• Router configuration files will be placed in frontend/src/router.
• Static assets (e.g., images, fonts) will be placed in frontend/src/assets.

Example Directory Structure

frontend/

src/

components/

Button.vue

views/

Home.vue AboutUs.vue

stores/

userStore.js

router/

index.js

assets/

images/ fonts/

Code Structure

• In Vue files, the HTML section shall come first, followed by JavaScript, ending with CSS.
• All functions should have a clear and concise comment explaining their purpose.

Naming Conventions

General Guidelines

• camelCase for variables, functions, methods, props, data properties, computed properties,
• PascalCase for component names.
• kebab-case for HTML attributes and event naming in templates.
• UPPER_SNAKE_CASE for constants.

  Examples: *

  camelCase: createUser, handleClick, userDetails, getUserInfo PascalCase: HeaderComponent, CreateUser.vue kebab-case: create-user, @user-clicked UPPER_SNAKE_CASE: API_KEY, MAX_RETRIES

HTML

• Id attributes will be in kebab-case with a “-” divider between words.
• Ex: create-user

JavaScript

• Variables in Vue will be written in camelCase.
• Ex: createUser

Components

• Vue components will be named using PascalCase.
• Ex: CreateUser.vue

CSS

• Use kebab-case for CSS class names.
• Ex: font-size: 16px;

Components:

• Use PascalCase for naming components.
  • Ex: HeaderComponent, MainContent, FooterComponent

Variables, Classes, Functions:

• Use camelCase for naming variables, functions, and methods.
  • Ex: buttonClass, handleClick, authButtons

Valid Values for Props:

• When defining props with limited valid values, ensure you use a pattern that validates them.
  • Ex: size prop can accept small, medium, or large.

    
    props: {
    size: {
    type: String,
    validator(value) {
    return ['small', 'medium', 'large'].includes(value);
    }
    }
    }

Code Formatting

• ESLint will be used to enforce JavaScript code style conventions.
• Prettier will be used for consistent formatting across the project.

Imports

Relative paths for components within the same folder. Absolute paths (using aliases) for imports from different directories. Example:

import Button from '@/components/Button.vue';

Summary

File Structure: Organize Vue files logically. Code Structure: Follow the order of HTML, JavaScript, and CSS. Naming Conventions: Use distinct naming conventions for different elements to avoid confusion. Formatting: Ensure code style consistency using ESLint and Prettier.