Add flexible vite-react-ts-chakra template

[bartstc]

This project provides a basic dev setup intended for Single Page Application (SPA) development. It contains already configured tools and libraries providing a quick and seamless start, making the Developer Experience (DX) and scalability of your project easily manageable. It also shows a practical application of selected tools and practices in a form of a demo app.

Template versions

Bearing in mind flexibility and openness to various tools and preferences, this template allows you to adjust your workflow to your needs, assuring best practices and following opinionated frontend/React trends at the same time.

Thus, the template provides two different versions, differing in complexity and spectrum of solved problems.

Basic version - basic

The most basic config of the dev environment. It provides seamless DX and assures a legible and consistent codebase.

Key features

• Dev environment based on ViteJS 4 toolkit.
• Testing environment based on Vitest and Storybook 7.
• Static code analysis: eslint, prettier, husky.
• TypeScript support.
• Devcontainer config for VS Code.

Extended version - core

The extension of the basic version. It contains already configured tools and libraries that aim to solve the most basic and typical problems existing in a modern frontend application (SPA).

Key features

• Everything that's included in the basic version.
• Simple, modular, and accessible components based on Chakra UI.
• Data fetching and external state synchronization based on React Query.
• Routing based on React Router 6.
• Date formatting based on DayJS.
• State management with Zustand.
• API mocking with MSW.
• A demo app with authentication presenting project structure, good practices, and used tooling in action (with a little help of Fake Store API).

I am glad that I can support this project. If there was any doubt about this PM, please let me know :).