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.
Summary:
The frontend code template presented in this article provides a comprehensive solution for building lightweight and efficient frontend applications. With features such as state management, small bundle size, compatibility with react libraries, TypeScript support, fast development tools, pre-configured styling options, and automated code linting, the template offers developers a solid foundation for their projects. The provided installation guide ensures a smooth setup process, allowing developers to quickly get started with their frontend development.
- 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.
- Jotai
Jotai is a primitive and flexible state management library for React. It takes a bottom-up approach with an atomic model inspired by Recoil, offering a minimal API that scales from simple to complex state management needs without boilerplate.
- 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.