Overview

The Front-end Boilerplate is a powerful repository that includes Next.js, TailwindCSS, FramerMotion, Google Analytics, and Twemoji. This boilerplate is designed to speed up productivity and offers additional features for developers to customize and enhance the codebase.

Features

• Framer motion: Includes pre-made animations to enhance the user experience.
• Google Analytics: GDPR approved implementation for tracking website analytics.
• Pre-made regex matcher: Allows for easy matching of URLs and emails.
• Built-in regex validation: Integrated validation for <Form> components.
• Button components: Pre-defined button components for quick implementation.
• Form components: Includes input fields, textarea, and checkboxes for form creation.
• Tooltip wrapper: Wraps content with tooltip functionality.
• Dropdown wrapper: Wraps content with dropdown functionality.
• Modal wrapper: Wraps content with modal functionality.
• Pre-made heading components: Provides pre-defined heading components for easy implementation.
• SEO optimization for Next.js: Support for search engine optimization.
• Next.js sitemap generator: Generates sitemaps for better search engine visibility.
• Zustand (State management replacing Redux): Offers state management functionality.
• Hydration component: Built-in skeleton and error handling for improved user experience.
• Typescript: Built with Typescript for enhanced code organization and type safety.
• Responsive design: Optimal rendering for all screen sizes.

Installation

To set up the Front-end Boilerplate, follow these steps:

1. Clone the repository.
2. Run pnpm i to install all the necessary dependencies.
3. Update the Google Analytics code in /src/common/utils/data/analytics.ts with your own code.
4. Start the local server with pnpm run dev.
5. You’re done! Don’t forget to star the repository and contribute if you have any additional tweaks.

Summary

The Front-end Boilerplate is a powerful repository that includes Next.js, TailwindCSS, FramerMotion, Google Analytics, and Twemoji. It aims to boost productivity by providing pre-made components, utilities, and integrations. With its extensive feature set, responsive design, and easy installation process, it is a valuable tool for front-end developers looking to streamline their development workflow.