Table of Contents

• Overview
• Useful scripts
• Special Thanks

Overview

This is a tailwindcss typescript nextjs template that aims to facilitate your life as a developer. Comes up with a few but handy scripts and conventions, like the followings:

• Automatic creation for storybook stories
• Usage of atomic folders to keep your code base as clean as possible
• Pre-commit and pre-push hooks. Breaking production is no longer a concern!
• Formatter and linter.

Useful scripts

npm run component

Command

npm run component [component-name] [folder]

Description

Creates a .tsx, .stories.tsx and index.ts (export file) files with the provided component-name inside the specified folder.

Why should I use it?

• Automatically creates the component story.
• Since the component is exported on the index.ts, find the new component is fairly easy (you just need to search the component-name).
• Helps keeping order in the codebase.

npm run icon

Command

npm run icon [icon-name]

Description

Creates a SVG .tsx file with the provided icon-name and the prefix Icon. Don't forget to add the content of the file inside of it

Why should I use it?

• Automatically adds all SVG types to the component.
• The prefix Icon allows you to effortlessly identify if the component is a SVG.
• Using .tsx file allows the usage of react's lifecycle.

Special Thanks

These guys also contributed to make this system possible:

• @juanpasolano
• @nerami
• @sergioegb