React Vite TypeScript Template

👋 Welcome to the React Vite TypeScript Template repository!

This template provides a modern and efficient starting point for building React applications using Vite and TypeScript. It comes preconfigured with a set of useful packages to enhance your development experience and help you build awesome web applications. Let's take a look at the packages included and their purposes:

Packages 📦

Core Dependencies 🌍

• React - A JavaScript library for building user interfaces.
• React DOM - Provides DOM-specific methods that can be used at the top level of your application.
• Vite - A fast and efficient development server and build tool for modern web applications.
• TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
• Zustand - A small, fast, and scalable state management library.

UI Libraries and Styling 💅

• @emotion/react - A library for writing CSS styles with JavaScript.
• @emotion/styled - Provides a way to define styled components using the @emotion/react library.
• @mui/icons-material - A set of Material-UI icons as React components.
• @mui/material - A popular UI component library based on Material Design guidelines.
• @mui/system - A utility library that powers the component styling in Material-UI.
• @mui/x-date-pickers - Date picker components for Material-UI.
• @fontsource/roboto - A package that allows you to use the Roboto font in your application.

Utility Libraries 🦾

• cross-env - A cross-platform environment variable setting package.
• date-fns - A modern JavaScript date utility library.
• react-dark-mode-toggle-2 - A customizable dark mode toggle switch for React applications.
• react-loader-spinner - A library for displaying loading spinners in React.
• react-query - A powerful data-fetching library for React applications.
• react-router-dom - DOM bindings for React Router, enabling declarative routing.
• react-share - A library for social sharing buttons in React.

Development and Testing 🏗️

• @playwright/test - A testing framework for end-to-end testing web applications.
• @testing-library/react - A set of utilities for testing React components.
• @types/node - Type definitions for Node.js modules.
• @types/react - Type definitions for React.
• @types/react-dom - Type definitions for React DOM.
• @typescript-eslint/eslint-plugin - ESLint plugin for TypeScript-specific linting rules.
• @typescript-eslint/parser - Parser for TypeScript used by ESLint.
• @vitejs/plugin-react-swc - A Vite plugin for using React with the SWC compiler.
• @vitest/coverage-c8 - A code coverage reporter for Vitest.
• copyfiles - A utility for copying files and directories.
• dotenv - Loads environment variables from a .env file.
• eslint - A pluggable and configurable linter tool for identifying and reporting JavaScript code issues.
• eslint-config-google - ESLint rules for Google JavaScript style.
• eslint-config-prettier - Disables ESLint rules that conflict with Prettier.
• eslint-plugin-react - React specific linting rules for ESLint.
• eslint-plugin-testing-library - ESLint rules for Testing Library.
• prettier - Opinionated code formatter to enforce consistent code style.
• vitest - A powerful and flexible test runner for Vite.

Getting Started 🛫

To start using this template, follow these steps:

1. Clone this repo or click the Use this template Button
2. Install dependencies: npm install
3. Run the development server: npm run dev
4. Open your browser and visit http://localhost:4000
5. Start building your awesome React application!

Available Scripts 💻

• npm run dev - Starts the development server.
• npm run compile - Runs the TypeScript compiler.
• npm run build - Compiles TypeScript and builds the application for production.
• npm run test - Runs unit tests using Vitest.
• npm run test:e2e - Runs end-to-end tests using Playwright.
• npm run coverage - Runs tests and generates code coverage report.
• npm run preview - Builds and previews the production-ready application.
• npm run lint - Lints the source code using ESLint.
• npm run prettier-check - Checks the source code for Prettier formatting.
• npm run prettier-write - Formats the source code using Prettier.

GitHub Workflows 💡

CI (ci.yml) 🏗️

This CI (Continuous Integration) YAML file is used to automate the testing and validation process for a Node.js project. It sets up different workflows and jobs to ensure code quality and detect any issues before merging changes into the main branch. You can set the jobs to be required to prevent merging unfinished branches.

Deploy Infrastructure (deploy.yml) 🚀

This YAML file is used for automating the deployment of a frontend application to a production environment using FTP (File Transfer Protocol). Before using this deployment YAML file, you need the following prerequisites svaed as secrets:

• FTP server address (FTP_SERVER_ADRESS)
• FTP username (FTP_USERNAME)
• FTP password (FTP_PASSWORD)

Publish Release (release.yml) 📦

This YAML file is used for automating the process of publishing a new release for a GitHub repository. You need to commit with conventional commits (See Conventional Commits) and need a existing release.

License 🧾

This project is licensed under the MIT License.

Feel free to explore the code, customize the template to your needs, and start building amazing React applications! If you have any questions or feedback, don't hesitate to reach out. Happy coding! 😄🚀