Awesome

Frontend Template (React, Vite, TypeScript)

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

Contents

• Quick Start - Manual
• Commands
• Git Workflow Rules
• Used Libraries
• Extension plugins

<a name="1">Quick Start</a>

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.

<a name="2">Commands</a>

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.

<a name="3">Git Workflow Rules</a>

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).

<a name="4">Used Libraries</a>

• 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

<a name="5">Extension plugins</a>

Visual Studio Code

• ESLint
• Prettier
• Console Ninja
• Error Lens
• EditorConfig
• IntelliCode
• Pretty TypeScript Errors
• Iconify IntelliSense