https://github.com/lifeisbeautifu1/modern-react-app
A modern React app (early 2025 edition)
https://github.com/lifeisbeautifu1/modern-react-app
babel browserslist cicd codecoverage eslint netlify-deployment playwright postcss prettier react react-router react-starter stylelint tailwindcss typescript vite vitest
Last synced: about 2 months ago
JSON representation
A modern React app (early 2025 edition)
- Host: GitHub
- URL: https://github.com/lifeisbeautifu1/modern-react-app
- Owner: lifeisbeautifu1
- License: mit
- Created: 2025-01-03T12:52:20.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-20T18:08:08.000Z (over 1 year ago)
- Last Synced: 2025-02-20T19:23:41.715Z (over 1 year ago)
- Topics: babel, browserslist, cicd, codecoverage, eslint, netlify-deployment, playwright, postcss, prettier, react, react-router, react-starter, stylelint, tailwindcss, typescript, vite, vitest
- Language: TypeScript
- Homepage: https://modern-react-demo.netlify.app/
- Size: 2.39 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/modern-react-demo/deploys)
[](https://github.com/lifeisbeautifu1/modern-react-app/actions/workflows/ci.yml)
[](https://github.com/lifeisbeautifu1/modern-react-app/actions/workflows/playwright.yml)
[](https://codecov.io/github/lifeisbeautifu1/modern-react-app)
[](https://github.com/lifeisbeautifu1)
# A modern react app (January 2025 edition)
This is a public template to start up a preconfigured React app for best DX.
The main features of this template:
- Editor config - for human-readable line length, consistent space indentations and end of line rules.
- List of VS Code recommended extensions to enhance web developer experience.
- `Husky` git hooks manager that enables running scripts at various points in the Git workflow (e.g., pre-commit).
- `Lint-staged` runs linters on staged files only, ensuring code quality and formatting before commits.
- `Stylelint` helps maintain consistent and error-free CSS code by enforcing coding standards and catching syntax errors.
- `Eslint` to enforce consistent coding styles and catch potential errors in your JavaScript code.
- `TypeScript` enhances code quality and maintainability in web development by providing static typing and advanced tooling features.
- `PostCSS` allows you to transform CSS with plugins, enabling features like autoprefixing, nesting, and custom syntax, enhancing your workflow and code quality.
- `Tailwind CSS` utility-first, flexible CSS framework for rapid custom styling and responsive design, promoting a component-based approach.
- `Browserslist` allows you to specify target browser versions for your project, ensuring compatibility and optimized performance across different environments. (Integrated with eslint, stylelint and babel)
- `Babel` for transpilation to ensure compatibility with older browsers and to leverage modern JavaScript features through plugins.
- `Vite` for fast, lightweight, modern build tool with instant HMR and native ES module support.
- `Vitest` testing framework optimized for Vite projects, supporting unit and integration testing with instant feedback.
- `React Testing Library` user centric, lightweight testing utility for React applications, encouraging best practices by focusing on component behavior rather than implementation details.
- `Playwright` cross-browser automation tool for end-to-end testing, enabling fast and reliable testing of web applications across multiple platforms.
- `GitHub Actions` CI/CD automation tool for building, testing, and deploying code directly from GitHub repositories, enabling seamless workflows.
- `Lighthouse` automated tool for performance, accessibility, and SEO auditing of web pages, providing insights for optimization.
- `PWA (Progressive Web App)` web application that uses service workers for offline capabilities, background syncing, and improved performance, delivering a native app-like experience.