ui-test-rowflex

Prerequisites

You need to have a node version installed >= 14.x. (https://nodejs.org/en/)

You need to have a yarn version installed >= 1.21.1 (https://yarnpkg.com/getting-started/install)

Project installation

• You need to install the packages, use: yarn install
• Now, you can start the project in the development mode by using: yarn dev
• Open http://localhost:3000 to view it in the browser.

Useful commands:

• yarn install to install dependencies
• yarn dev to start a local dev-server
• yarn build to build a minified version of the code, for production use!
• yarn test to launch tests in watch mode
• yarn lint:fix to automatically fix linting errors
• yarn test:coverage to generate the coverage

Technology stack

• React: a JavaScript library for building user interfaces (more information)
• Next.Js: The React Framework (more information)
• Redux-toolkit (more information)
• Jest / React testing library for all testing
• Eslint, Prettier for linting and formatting
• Gitlab-CI/CD for Continuous Integration CI / Continuous Deployment CD
• Typescript

Frontend architecture

The project is structured as follows:

• components: React components are reusable pieces of the application (such as a button).
  • Atoms: the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
  • Molecules: the molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
  • Organisms: the organisms are relatively complex UI components composed of groups of molecules and/or atoms. These organisms form distinct sections of an interface.
  • Templates: the templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
• pages: Next pages correspond to the application pages (such as the home page).
• redux: Redux hooks/reducers/slices/store. Learn more about Redux / Redux-toolkit by reading Usage With TypeScript.

TODO

• Complete the documentation

• Use i18n