Skip to content

Latest commit

 

History

History
82 lines (65 loc) · 3.42 KB

README.md

File metadata and controls

82 lines (65 loc) · 3.42 KB
Raw

Frontend Template (React, Vite, TypeScript)

Template for creating a big frontend project with React, Vite, TypeScript, and other useful libraries.

Contents

Quick Start

Requirements

  • Node.js 18+

Instructions

  1. Copy .env.example to .env and modify it according to your environment.
  2. Run npm i.
  3. Run npm run dev.
  4. Enjoy.

Commands

  1. Simplified commit via terminal: npm run commit

  2. Increase the version of the application, update app.json, and generate CHANGELOG.md:

    • npm run release

    After these commands, you must call git push --follow-tags origin develop to push the version tag to GitHub.

Git Workflow Rules

  1. All changes are made in a new branch based on develop.
  2. Each commit must be accompanied by a comment describing the essence of the changes.
  3. Commit formatting must follow Conventional Commits. (can be done via npm run commit)
    • feature - new functionality
    • fix - bug fixes
    • refactor - code changes without fixing bugs or adding new features
    • style - style changes
    • test - adding tests
    • docs - documentation changes
    • chore - project configuration changes and other auxiliary changes
  4. After completing work on a task, create a Pull Request to the develop branch.
  5. Each Pull Request must contain links to the tasks it resolves.
  6. It's necessary to designate a code reviewer in the Pull Request (usually the Team Lead or Tech Lead of the project).

Used Libraries

  • axios - for HTTP requests
  • mantine - for UI work
  • react-router - for routing
  • vite - for project building and running the dev server
  • vite-plugin-checker - for type checking during development
  • typescript - for typing the entire project and its dependencies (including libraries)
  • eslint - for linting
  • zustand - for global state management
  • zod - for input validation
  • radash - contains useful functions for working with arrays and objects
  • dayjs - for date and time handling
  • @tanstack/react-query - for handling requests
  • @tanstack/table - for table handling
  • iconify - for UI icons
  • lint-staged - for running linters before committing
  • husky - for running hooks before committing
  • prettier - for code formatting
  • sort-package-json - for sorting package.json
  • @trivago/prettier-plugin-sort-imports - for sorting imports

Extension plugins

Visual Studio Code