Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nert1n/template--vite-react-fsd
My template for easy and quick creation of new projects on react. If anyone has any suggestions on how to improve it, you can contact me!
https://github.com/nert1n/template--vite-react-fsd
axios eslint github-actions husky lint-staged prettier react-hook-form react-router reactjs scss stylelint template template-project typescript vite
Last synced: 9 days ago
JSON representation
My template for easy and quick creation of new projects on react. If anyone has any suggestions on how to improve it, you can contact me!
- Host: GitHub
- URL: https://github.com/nert1n/template--vite-react-fsd
- Owner: nert1n
- License: mit
- Created: 2024-08-02T12:37:16.000Z (7 months ago)
- Default Branch: dev
- Last Pushed: 2025-02-01T15:33:33.000Z (14 days ago)
- Last Synced: 2025-02-01T16:26:57.503Z (14 days ago)
- Topics: axios, eslint, github-actions, husky, lint-staged, prettier, react-hook-form, react-router, reactjs, scss, stylelint, template, template-project, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 996 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
Template - Frontend Web Application
Template is a feature-rich frontend application built using modern technologies like React, TypeScript, and Vite. It offers a fast and scalable platform for developers to collaborate and share coding knowledge.
Live demo: Visit Template
Design files: Figma
## Table of Contents
- [Features](#features)
- [Tech-Stack](#tech-stack)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Running Locally](#running-locally)
- [Running Tests](#running-tests)
- [Folder Structure](#folder-structure)
- [Contributing](#contributing)
- [License](#license)
## Features
- **Fast and Scalable**: Built using Vite and React for optimal performance.
- **Type-Safe**: Uses TypeScript for catching errors at compile time.
- **Rich Routing**: Implements client-side routing with React Router.
- **Form Management**: Handles form validation with React Hook Form.
- **Code Quality**: Ensures consistent styling with ESLint, Prettier, and Stylelint.
- **End-to-End Testing**: E2E tests using Playwright.
## Tech-Stack
- **React**: JavaScript library for building user interfaces
- **TypeScript**: Typed superset of JavaScript for better maintainability
- **Vite**: Fast build tool for modern web projects
- **SCSS**: CSS preprocessor for enhanced styling capabilities
- **React Router**: Client-side routing
- **Axios**: Promise-based HTTP client for data fetching
## Getting Started
### Prerequisites
- **Node.js**: Ensure you have Node.js installed (>=18.x).
- **pnpm**: Use `pnpm` as the package manager for consistency.
### Installation
Clone the repository and install dependencies:
```bash
git clone https://github.com/
cd Template
pnpm install
```
### Running Locally
Start the development server:
```bash
pnpm dev
```
### Running Tests
For end-to-end testing with Playwright:
```bash
pnpm test:e2e
```
### Linting and Formatting
To ensure code quality:
```bash
pnpm lint
pnpm format
```
## Folder Structure
This project uses the Feature-Sliced Design (FSD) architecture:
```bash
src/
├── app/ # App-level settings, providers, and configuration
├── entities/ # Business entities (e.g., User, Post)
├── features/ # Application features (e.g., Auth, Profile)
├── shared/ # Shared components, utils, styles, etc.
├── pages/ # Top-level routes and layout components
├── widgets/ # UI widgets for composition
```
## Contributing
We welcome contributions! Follow these steps to get started:
1. Fork the repository
2. Create a new branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add your feature')
4. Push the branch (git push origin feature/your-feature)
5. Open a pull request
## License
This project is licensed under the MIT License. See the LICENSE file for details.