Frontend Starter
Frontend starter template with React
Overview:
This article introduces a frontend code template built with preact, a lightweight alternative to React. The template includes various features such as state management with jotai, full TypeScript support, tailwind-css integration, GitHub Actions for linting and code checking, and preconfigured prettier and eslint for code formatting. The template also provides a guide for installing and launching the project locally.
Features:
- State management with jotai: Utilizes jotai for efficient state management in frontend applications.
- Small bundle size: The template, after brotli compression, is approximately 13.53kb, ensuring fast loading times.
- Compatible with react libraries: Built with preact/compat, the template is compatible with virtually any react library while maintaining optimized performance.
- Full TypeScript support: Enables developers to write code using TypeScript without any dangling types.
- Fast development with vite packager and devtools: The use of vite packager and devtools accelerates the development process.
- Built-in tailwind-css with 'daisyui': Integration of tailwind-css with 'daisyui' provides a pre-designed UI framework for easy styling.
- Code linting and checking with GitHub Actions: GitHub Actions are set up to automatically lint and check the code on pull requests.
- Prettier and eslint configuration: Prettier and eslint are configured and enabled to format the code automatically on save.
- Recommended extensions for VSCode: A list of recommended extensions for VSCode is provided to enhance the development experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- daisyUI
daisyUI adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
