EMPOL PROJECT

Movies project. In this Readme you can find some patterns to be followed

TECH

• React
• Typescript
• SASS

FILES STRUCTURE

1. /components Folder with all available components.
2. /forms Folder with all forms.
3. /pages Folder with all pages.
4. /helpers Folder with helper functions.
5. /themes Folder with themes.

NOMENCLATURE

• Everything must be named in english.
• Components, functions and constants must have clear name that express its functionality.
• General folders have the names above.
• Folder of each component: is in Upper Camel Case (ex: DropdownMenu)
• Components files: in Upper Camel Case (ex: DropdownMenu.scss)
• Classes: in Upper Camel Case (ex: DropdownMenu)
• Functions, attributes, constants: in Lower Camel Case (ex: getList)
• CSS classes: in lower kebab case (ex: form-button)

CREATING COMPONENTS

Every component must have its scss file and its test. Components must be generics, without much logic, and reusable.

Basic structure of components

• file.tsx Mandatory
• file.scss
• file.test.tsx Mandatory
• file.hook.tsx Hooks implementation
• file.schema.tsx Definition of types
• file.slice.tsx Redux implementation

OTHER PATTERNS

• Variables always declared at the beginning.
• Use of single quotes.
• Spacing in SPACE SIZE 4.
• Comments in each function, always with /**

Commit pattern

• Follow this pattern Conventional Commits
• Commits types must be: Docs, Fix, Feat or Refactor.
• Between () you put what changed, example: comment, library, pipeline, component, page, form...
• Clear message about what changed.
• Specify what component or page changed.
• End the message with Issue: #task-name
• Example: 'feat(component): Created Dropdown component. Component: Dropdown. Issue: #FELL-20'

Libs on this project

• Reactstrap
• Axios
• React Hook Form
• React Router
• ClassNames
• FontAwesome
• Playwright
• Redux Tookit