Skip to content

Commit

Permalink
feat: Add ReadMe (#178)
Browse files Browse the repository at this point in the history
  • Loading branch information
coolusaHD authored Jul 12, 2023
1 parent d077804 commit 475e97b
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 2 deletions.
82 changes: 81 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,81 @@
# Template
# 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.

## License 🧾

This project is licensed under the [MIT License](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! 😄🚀
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"types": ["node", "vite/client"],
"outDir": "build",
"paths": {
"@comcal/*": ["src/*"]
"@ProjectXYZ/*": ["src/*"]
}
},
"include": ["src", "**/*.ts"],
Expand Down

0 comments on commit 475e97b

Please sign in to comment.