# Frontend Development Coding Guidelines

 Crafted by Engineering Team at [Saber Liquidation](https://saberliquidation.com)

## Table of Contents

1. [Introduction](#1-Introduction)
2. [Clean Code](#2-Clean-Code)
3. [Component Reusability](#3-Component-Reusability)
4. [Conventional Commits](#4-Conventional-Commits)
5. [Commit Guidelines](#5-Commit-Guidelines)
6. [Documentation](#6-Documentation)
7. [Performance](#7-Performance)
8. [Security](#8-Security)
9. [Accessibility](#9-Accessibility)
10. [Browser Compatibility](#10-Browser-Compatibility)
11. [TypeScript Recommendations](#11-Typescript-Recommendations)
12. [Tools Guidelines](#12-Tools-Guidelines)

## 1. Introduction

Welcome to the frontend development coding guidelines! These guidelines are designed to help maintain a consistent and high-quality codebase during your coding assingments and further position at the company.

**These are coding practices that we use at the company, feel free to use at your will as some of them don't apply to codding assessments.**

## 2. Clean Code

Write code that is easy to read, understand, and maintain. Follow the principles of clean code:

- Use meaningful variable and function names.
- Use this conventions when writing variable names
- <b>Camel case</b> for variables and methods.
- <b>Pascal case</b> for types and classes in JavaScript and for components names and file names in React.
- <b>Upper case snake</b> case for constants.
- Keep functions short and focused.
- Avoid unnecessary comments; write self-explanatory code.
- Follow a consistent coding style.

## 3. Component Reusability

Encourage the reuse of components to improve maintainability and reduce redundancy:

- Design components to be modular and independent.
- Use a component-based architecture.
- Avoid duplicating code; prefer creating reusable components.

## 4. Conventional Commits

Follow the Conventional Commits specification for clear and standardized commit messages. This helps automate the release process and improves changelog generation.

- Use a conventional format for commit messages (e.g., `feat: add new feature`, `fix: resolve bug`).
- Include a scope and description in each commit.
- Read more about this [here](https://www.conventionalcommits.org/en/v1.0.0/#specification)

## 5. Commit Guidelines

Keep commits small and focused to facilitate effective code reviews:

- Each commit should address a single concern.
- Avoid committing large chunks of code.
- Provide meaningful commit messages.

## 6. Documentation

Maintain comprehensive and up-to-date documentation:

- Document code functionality, usage, and API endpoints.
- Update README files with setup instructions and project details.
- Include inline comments for complex logic or non-trivial code.

## 7. Performance

Write efficient code to ensure optimal application performance:

- Optimize critical code paths.
- Minimize the use of synchronous operations.
- Leverage browser caching and compression techniques.

## 8. Security

Follow best practices to ensure the security of your frontend applications:

- Sanitize user inputs.
- Implement secure authentication and authorization.
- Regularly update dependencies to patch security vulnerabilities.

## 9. Accessibility

Build applications that are accessible to users with disabilities:

- Use semantic HTML elements.
- Provide alternative text for images.
- Ensure keyboard navigation is functional.

## 10. Browser Compatibility

Ensure your application works consistently across different browsers:

- Test on multiple browsers during development.
- Use feature detection and progressive enhancement.
- Stay informed about browser updates and deprecations.

## 11. Typescript Recommendations

When working with Typescript, consider the following recommendations:

- Use any only when developing locally, at the moment of uploading the actual feature or fix, it needs to be properly typed.
- Use strong typing to catch errors during development.
- Define clear interfaces for components and services.
- Leverage TypeScript features such as enums, interfaces, and union types.
- Take advantage of TypeScript's support for modern ECMAScript features.