Installation

nvm use
npm install
npm start

Project Structure

├── public/                                 # Static files
│   └── index.html                          # Main HTML file
├── src/                                    # Source code
│   ├── api/                                # API modules
│   │   └── example/                        # Example API module
│   │       ├── exampleApi.ts               # API functions
│   │       ├── types.ts                    # API types
│   │       └── constants.ts                # API constants
│   ├── i18n/                               # Translations
│   ├── ui/                                 # Reusable UI components
│   ├── pages/                              # Application pages
│   │   └── Preview/                        # Main page
│   │       ├── components/                 # Preview-specific components
│   │       ├── index.tsx                   # Main preview component
│   │       └── styled.ts                   # styled components for the preview page
│   ├── utils/                              # Utility functions
│   ├── index.tsx                           # Entry point
│   └── styles/                             # Styles
│       └── globals.css                     # Global CSS styles
└── package.json                            # Project dependencies and scripts
└── README.md                               # This file

Detailed Sections

API Modules (src/api/)

Each API module gets its own folder. This grouping allows us to keep all technical details related to a specific endpoint or set of endpoints together. We use the axios library for requests. Make sure to create a separate folder for each endpoint and always use type annotations for request parameters.

Example structure of the exampleApi folder:

src/api/example/
├── exampleApi.ts               # API functions for managing example
├── types.ts                    # Data types for this API module
├── constants.ts                # Constants used in this API

Creating UI Components

Reusable UI components are placed in src/components/ui. Follow the structure below for consistency.

Example structure of a component:

example-component/              # Example component
  ├── assets/                   # Additional files like images and icons
  ├── index.tsx                 # Component file
  ├── styled.ts                 # Styled component
  ├── types.ts                  # Component types
  └── constants.ts              # Component constants

Regular components, unlike pages, are named using kebab-case.

Utils

Helper functions reused across the project. Always add docstrings for these functions.

Styleguide

General Code Style

If a function has more than one parameter, use objects: const sum = ({ a, b }: { a: number, b: number }) => a + b. All comments must be written in English.

Typescript

Prefer using type over interface for typing. All functions (including components) should have typed arguments.

React

Only use functional components. Custom UI components should not have their own state (useState). they should rely solely on props for rendering, except for complex components like ActionButton.

CSS

In the project we use styled-components for styling. You can read more about it here: https://styled-components.com. All components created with styled-components are named with the postfix Styled, for example:

Working with GIT

For each task, create a separate branch. Name the branches based on the component/page/module you are working on, if there is no specific task identifier (feature/add-timer-button). When the task is complete, create a merge request to the develop branch. If the merge request goes unreviewed for a long time, you may merge it yourself. Create separate commits for different parts of the task. Name your commits with prefixes such as feat for new features and fix for bug fixes. Example: feat: add user authentication, fix: correct header styling. Commit messages should be written in English.

More about gitflow you can read here