<h2>Overview</h2>
<p>This product is a frontend monorepo boilerplate that provides a setup for developing web applications with TypeScript, Tailwind CSS, Material UI, and Next.js. It aims to offer a painless developer experience and follows best practices for frontend development. The monorepo setup allows for easy extension and comes with several features such as Turborepo for fast builds, lints, and tests, support for multiple styling solutions, and integration with popular tools like ESLint, Prettier, Jest, and React Testing Library.</p>
<h2>Features</h2>
<ul>
<li><strong>Turborepo v1 remote cache build system</strong>: Fast execution of commands (build, lint, test) on your local machine and CI.</li>
<li><strong>TypeScript v5 codebase</strong>: Strict type-checking and stylistic configuration using typescript-eslint.</li>
<li><strong>Next.js v13 apps</strong>: Provides a framework for building React applications with server-side rendering and routing capabilities.</li>
<li><strong>3 styling solutions</strong>: Monorepo supports three styling options with a shared theme across all apps: Vanilla CSS package, Tailwind components library (built with Tailwind v3), and Material UI components library (built with MUI v5).</li>
<li><strong>Easily import UI components</strong>: UI components packages can be easily imported into apps for convenient development.</li>
<li><strong>Unit and integration tests</strong>: Comes with Jest and React Testing Library for running tests in any monorepo app/package.</li>
<li><strong>Linting with ESLint</strong>: Ensures code quality and follows best practices by running ESLint on all apps and packages.</li>
<li><strong>Prettier code formatter</strong>: Includes Prettier for consistent code formatting.</li>
<li><strong>Git hooks with Husky</strong>: Sets up git hooks to automatically run linting and formatting on staged files.</li>
<li><strong>Conventional commits format</strong>: Enforces conventional commit messages and provides feedback on commit message formatting.</li>
<li><strong>Various npm commands</strong>: Includes commands for building, starting, linting, testing, and cleaning the monorepo.</li>
</ul>
<h2>Summary</h2>
<p>The frontend monorepo boilerplate provides an efficient and convenient setup for frontend development. With its focus on best practices, it offers a painless developer experience. The monorepo structure allows for easy extension, and the inclusion of tools like Turborepo, TypeScript, Next.js, and various styling solutions enhances the productivity and code quality of the development process. With support for linting, testing, formatting, and conventional commits, this boilerplate promotes code consistency and collaboration among developers.</p>


<h2>Overview</h2>
<p>The Heisenberg boilerplate is a powerful starting point for developers looking to build applications using Prisma, Next.js, and TypeScript. With a focus on best practices and an excellent developer experience, this boilerplate streamlines the setup process while ensuring best-in-class coding standards. Ideal for those who want to hit the ground running without excessive overhead, it emphasizes minimalism and the integration of essential features for creating robust applications.</p>
<p>Developers can leverage the Heisenberg boilerplate to easily create a local development environment, and benefit from features designed to enhance productivity, such as seamless API integration and thorough type-safety across the entire stack. This boilerplate is an excellent choice for those familiar with modern JavaScript technologies and looking to implement a solid foundational structure in their projects.</p>
<h2>Features</h2>
<ul>
<li><strong>Minimal Setup</strong>: Quickly get started with a streamlined configuration that can be extended as needed, without unnecessary UI complexities or utility libraries.</li>
<li><strong>Local Development Environment</strong>: Spin up a local environment effortlessly using Docker, complete with a seeded Postgres database by running simple npm commands.</li>
<li><strong>TypeScript Integration</strong>: Enjoy end-to-end type safety with TypeScript, ensuring consistent data handling from the database all the way to the frontend.</li>
<li><strong>RESTful API</strong>: Built-in support for creating RESTful APIs using Next.js, making it easy to manage backend operations without hassle.</li>
<li><strong>Testing Capabilities</strong>: Incorporate unit and integration tests seamlessly with Jest, ensuring your code remains robust and reliable.</li>
<li><strong>Linting and Formatting</strong>: Benefit from automated linting using ESLint and code formatting with Prettier to maintain code quality effortlessly.</li>
<li><strong>Git Hooks Support</strong>: Utilize Husky and lint-staged for Git hooks that help maintain commit message standards and improve overall workflow efficiency.</li>
<li><strong>Contribution Welcomed</strong>: An open attitude towards contributions encourages collaboration and continuous improvement of the boilerplate.</li>
</ul>


<h2>Overview</h2>
<p>React Mighty Mouse is an innovative React hook designed to track mouse events on a selected element. It’s a lightweight solution that boasts zero dependencies, making it easy to integrate into your projects. Whether you're building interactive web applications or simple user interfaces, this tool offers powerful functionalities that enhance user experience by capturing precise mouse interactions.</p>
<p>With support for both mouse and touch events, React Mighty Mouse provides comprehensive data about mouse positions and button activities. The capability to detect key presses and mouse hovering further expands its applications, making it a versatile addition to any developer's toolkit.</p>
<h2>Features</h2>
<ul>
<li><strong>Lightweight</strong>: Minimal bundle size and zero dependencies ensure quick loading and easy integration into projects.</li>
<li><strong>Supports Multiple Events</strong>: Handles both mouse and touch events, catering to a wider array of input methods.</li>
<li><strong>Detailed Mouse Positioning</strong>: Tracks mouse positions across client, page, and screen coordinates, allowing for in-depth interaction analysis.</li>
<li><strong>Relative Mouse Position</strong>: Calculates the mouse's relative position to the selected element, providing context-sensitive insights.</li>
<li><strong>Angle Detection</strong>: Measures mouse angle (0-360°) relative to the selected element, adding advanced geometric interactions.</li>
<li><strong>Button Tracking</strong>: Monitors mouse button events for left, middle, and right clicks, which can enhance interactivity in applications.</li>
<li><strong>Hover Detection</strong>: Identifies when the mouse is hovering over a selected element, useful for dynamic UI effects.</li>
<li><strong>Keyboard Input Detection</strong>: Captures key presses (Ctrl, Shift, Alt), enabling interaction tracking for combined inputs.</li>
</ul>


<h2>Overview</h2>
<p>If you're a React developer looking to enhance the interactivity of your web applications, then the React Tilt library is an exciting tool to consider. With its sleek tilt hover effects, this library allows you to create engaging user experiences effortlessly. Easy to install and lightweight, React Tilt enables you to implement advanced visual effects that can help your components stand out without the overhead of heavy dependencies.</p>
<p>The capabilities of React Tilt extend beyond standard tilt effects; it gives you a range of customization options to tailor interactions to your specific needs. Whether you want gradient glows, motion tracking, or unique parallax images, this library covers it all, making it a versatile addition to your toolkit.</p>
<h2>Features</h2>
<ul>
<li><strong>Lightweight</strong>: At just 3kB, React Tilt is minimalistic and ensures your application's load time remains fast.</li>
<li><strong>Zero Dependencies</strong>: Works independently, reducing integration complexity and enhancing performance.</li>
<li><strong>Support for Multiple Events</strong>: Handles both mouse and touch events seamlessly, ensuring compatibility across devices.</li>
<li><strong>Device Tilting Support</strong>: Implements gyroscope functionality for an enhanced, device-tilted experience.</li>
<li><strong>Customizable Glare Effect</strong>: Easily add and customize glare attributes such as color and position to elevate visual interaction.</li>
<li><strong>Event Tracking</strong>: Monitor component values such as tilt and glare through built-in event tracking, allowing for dynamic adjustments.</li>
<li><strong>Multiple Built-in Effects</strong>: Enjoy a variety of pre-set visual effects, including scaling, flipping, and parallax, to enrich your components.</li>
<li><strong>Flexible Prop Configuration</strong>: All props are optional, granting you the freedom to use only what you need to customize the tilt effect.</li>
</ul>


<h2>Overview</h2>
<p>The tRPC Frontend Boilerplate by HeisenbergCI offers a streamlined solution for developers looking to work with separate backend and frontend repositories. Leveraging Next.js, this minimal boilerplate facilitates the consumption of fully typesafe APIs, making it an ideal choice for larger teams or companies focused on maintaining clear separation between their domain logic and API exposure. Whether you're setting up a new project or integrating with existing infrastructure, this boilerplate aims to simplify the development process.</p>
<p>The boilerplate is particularly advantageous for environments where managing Continuous Integration/Continuous Deployment (CI/CD) pipelines, pull requests, and issues in separate repositories is necessary. With an emphasis on easy setup and usage, it caters to developers aiming to leverage the benefits of tRPC in a disciplined repository structure.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Easy Setup:</strong> Quickly establish a local development environment with simple commands: clone the repo, run npm install, and start the dev server.</p>
</li>
<li>
<p><strong>Typesafe API Consumption:</strong> Consume fully typesafe APIs effortlessly, ensuring that your frontend remains in sync with backend changes while minimizing runtime errors.</p>
</li>
<li>
<p><strong>Flexible API Integration:</strong> Choose between two convenient methods to import tRPC API types from your backend repository, either via an npm package installation or an npm script.</p>
</li>
<li>
<p><strong>Separation of Concerns:</strong> Ideal for teams that prioritize dividing domain/business logic from what needs to be exposed through the API, promoting cleaner architecture.</p>
</li>
<li>
<p><strong>Optimized for Monorepos:</strong> While designed for separate repositories, this boilerplate also acknowledges the benefits of monorepos, allowing developers to easily adapt based on their project requirements.</p>
</li>
<li>
<p><strong>Scalable Development:</strong> Built with larger teams in mind, accommodating the complexities of larger development initiatives without sacrificing efficiency or productivity.</p>
</li>
</ul>


<h2>Overview</h2>
<p>The tRPC Frontend Boilerplate by HeisenbergCI is a minimalistic yet powerful solution designed for those who wish to implement a Vite frontend in conjunction with a separate backend repository. This boilerplate stands out by providing seamless access to fully typesafe APIs, making it a fantastic choice for projects where frontend and backend responsibilities are clearly divided. Its architecture allows for flexibility in managing domain logic, team roles, and CI/CD processes effectively.</p>
<p>For developers looking to streamline the setup of their local development environment, this boilerplate offers an efficient way to kickstart projects while ensuring the backend and frontend remain distinct. It's particularly beneficial for larger teams or companies that require clarity in their development workflows and want to keep their deployments independent.</p>
<h2>Features</h2>
<ul>
<li><strong>Typesafe API Consumption</strong>: Leverage fully typesafe APIs easily, which minimizes runtime errors and improves code quality.</li>
<li><strong>Separate Repositories</strong>: Ideal for projects that need distinct backend and frontend repositories, providing clear separation of concerns.</li>
<li><strong>Easy Setup</strong>: Quickly establish a local development environment with simple commands for cloning and running the project.</li>
<li><strong>Customizable Imports</strong>: Flexible options for importing tRPC API types directly from the backend repository, enhancing convenience.</li>
<li><strong>Optimized for Monorepos</strong>: While supporting separate repos, it also accommodates monorepo architectures when needed.</li>
<li><strong>CI/CD Support</strong>: Manage pull requests, issues, and deployments independently, aligning with complex project requirements.</li>
<li><strong>Scalable for Teams</strong>: Designed with larger teams in mind, it allows for better management of developer responsibilities and domain logic exposure.</li>
</ul>


<h2>Overview</h2>
<p>The Turborepo / Next.js / TypeScript boilerplate is an opinionated frontend monorepo that focuses on best practices and providing a painless developer experience. It includes a range of features such as a remote cache build system, support for TypeScript codebase, Next.js apps, UI component packages, testing with Jest, linting with ESLint, and more.</p>
<h2>Features</h2>
<ul>
<li><strong>Turborepo v1 remote cache build system</strong>: Allows for fast execution of commands (build, lint, test, etc.) on your local machine and CI.</li>
<li><strong>TypeScript v4 codebase with Strict Configuration</strong>: Provides the benefits of TypeScript, ensuring type safety and improving code quality.</li>
<li><strong>NextJs apps</strong>: Includes a set of Next.js applications for building modern web applications.</li>
<li><strong>UI component packages</strong>: Offers three separate packages (Vanilla CSS, MUI v5, Tailwind v3) with respective configurations. These can be easily imported into the Next.js apps for building custom UI components.</li>
<li><strong>Unit and integration tests with Jest</strong>: Allows for writing and running tests for all apps and packages.</li>
<li><strong>Linting with ESLint</strong>: Provides automatic code linting to catch potential errors and enforce code style conventions.</li>
<li><strong>Prettier code formatter</strong>: Includes Prettier for consistent code formatting across the project.</li>
<li><strong>Git hooks with Husky and lint-staged</strong>: Sets up git hooks to run commands (such as linting) before commits and ensures commit messages meet conventional commit format.</li>
<li><strong>Commitizen</strong>: Simplifies the process of creating commit messages that follow the conventional commits format.</li>
</ul>
<h2>Summary</h2>
<p>The Turborepo / Next.js / TypeScript boilerplate is a comprehensive frontend monorepo that provides a structured and efficient development environment. It includes essential features such as remote cache build system, TypeScript support, Next.js apps, UI component packages, testing, linting, and code formatting. With easy setup and convenient scripts, this boilerplate is designed to promote best practices and deliver a seamless developer experience.</p>


<h2>Overview</h2>
<p>The Frontend Monorepo Boilerplate is a TypeScript-based development setup that focuses on best practices and provides a seamless developer experience. It allows for easy extension and comes with several key features such as Turborepo remote caching, Next.js apps, multiple styling solutions, component libraries, testing with Jest and React Testing Library, linting with ESLint, and git hooks with Husky. The monorepo can be set up with a single command and provides a local development environment for easy code building and testing.</p>
<h2>Features</h2>
<ul>
<li><strong>Turborepo v1 remote cache build system</strong>: Enables blazingly fast execution of commands (build, lint, test, etc.) on your local machine and CI.</li>
<li><strong>TypeScript v5 codebase</strong>: The entire codebase is written in TypeScript with configurations for strict type checking and styling.</li>
<li><strong>Next.js v13 apps</strong>: The monorepo includes Next.js apps for building powerful web applications.</li>
<li><strong>Multiple styling solutions</strong>: Includes three styling solutions with a shared theme across all apps. Choose between Vanilla CSS, Tailwind components library built with Tailwind v3, and Material UI components library built with MUI v5.</li>
<li><strong>Easily import UI components package into apps</strong>: Allows for easy import of UI component packages into apps for seamless integration.</li>
<li><strong>Unit and integration tests with Jest and React Testing Library</strong>: Run tests for individual apps or packages instantly.</li>
<li><strong>Linting with ESLint</strong>: Ensures code quality and adherence to coding standards.</li>
<li><strong>Prettier code formatter</strong>: Provides consistent code formatting for improved readability.</li>
<li><strong>Git hooks with Husky and lint-staged</strong>: Automatically runs linting and formatting scripts before committing changes, ensuring code consistency.</li>
<li><strong>Conventional commits format</strong>: Enforces the use of conventional commit messages with instant feedback and prompts for required fields.</li>
<li><strong>Various commands</strong>: The monorepo includes several convenient npm commands for tasks like setting up git hooks, building apps, starting apps, linting, testing, and more.</li>
</ul>
<h2>Summary</h2>
<p>The Frontend Monorepo Boilerplate provides a comprehensive development setup for building web applications. With its focus on best practices and developer experience, it offers features like remote caching, TypeScript codebase, Next.js apps, multiple styling solutions, component libraries, testing, linting, git hooks, and conventional commits. By following the installation guide, developers can quickly set up a local development environment and start building applications with ease.</p>


<h2>Overview:</h2>
<p>The Heisenberg Boilerplate is a robust RESTful API boilerplate built with TypeORM, Express, and TypeScript. It focuses on best practices and provides a seamless developer experience with minimal setup. This boilerplate offers features such as JWT authentication, Docker environment setup, role-based authorization, and automated testing, making it a versatile choice for building scalable applications.</p>
<h2>Features:</h2>
<ul>
<li><strong>Express framework</strong></li>
<li><strong>TypeScript v4 codebase</strong></li>
<li><strong>TypeORM using Data Mapper pattern</strong></li>
<li><strong>Easily start local development using Docker Compose</strong></li>
<li><strong>Connect to different staging or production environments</strong></li>
<li><strong>JWT authentication with role-based authorization</strong></li>
<li><strong>Contract-first REST API design</strong></li>
<li><strong>Consistent schema error response</strong></li>
<li><strong>Logging with morgan</strong></li>
<li><strong>Unit and integration tests with Mocha and Chai</strong></li>
<li><strong>Linting with ESLint</strong></li>
<li><strong>Prettier code formatter</strong></li>
<li><strong>Git hooks with Husky and lint-staged</strong></li>
<li><strong>Automated npm &#x26; Docker dependency updates with Renovate</strong></li>
<li><strong>Conventional commit messages format with Commitizen</strong></li>
</ul>
<h2>Summary:</h2>
<p>The Heisenberg Boilerplate provides a solid foundation for building RESTful APIs with modern technologies. Its thoughtful features like Docker for easy setup, JWT authentication, and automated testing make it a practical choice for developers aiming for efficiency and best practices in API development. By leveraging TypeScript, Express, and TypeORM, this boilerplate streamlines the development process while ensuring scalability and maintainability in the long run.</p>


Mkosir

Frontend Monorepo Boilerplate

Prisma Next Graphql Typescript

Prisma Next Typescript

React Hook Mighty Mouse

React Parallax Tilt

Trpc Fe Boilerplate Next

Trpc Fe Boilerplate Vite

Typescript Style Guide

Frontend Monorepo Boilerplate

Typeorm Express Typescript