Demo & testing repository for ts-nextjs-tailwind-starter expansion pack

Last update: Dec 6, 2021

๐Ÿ”‹ ts-nextjs-tailwind-starter

Next.js + Tailwind CSS + TypeScript starter packed with useful development features.

Made by Theodorus Clarence

CodeFactor Maintainability Rating Bugs GitHub Repo stars

Depfu Last Update

Features

This repository is ๐Ÿ”‹ battery packed with:

  • โšก๏ธ Next.js 12
  • โš›๏ธ React 17
  • โœจ TypeScript
  • ๐Ÿ’จ Tailwind CSS 2 with JIT โ€” Configured with CSS Variables to extend the primary color
  • ๐Ÿ’Ž Pre-built Components โ€” Components that will automatically adapt with your brand color, check here for the demo
  • ๐Ÿƒ Jest โ€” Configured for unit testing
  • ๐Ÿ“ˆ Absolute Import and Path Alias โ€” Import components using @/ prefix
  • ๐Ÿ“ ESLint โ€” Find and fix problems in your code, also will auto sort your imports
  • ๐Ÿ’– Prettier โ€” Format your code consistently
  • ๐Ÿถ Husky & Lint Staged โ€” Run scripts on your staged files before they are committed
  • ๐Ÿค– Conventional Commit Lint โ€” Make sure you & your teammates follow conventional commit
  • โฐ Standard Version Changelog โ€” Generate your changelog using yarn release
  • ๐Ÿ‘ท Github Actions โ€” Lint your code on PR
  • ๐Ÿš˜ Automatic Branch and Issue Autolink โ€” Branch will be automatically created on issue assign, and auto linked on PR
  • ๐Ÿ”ฅ Snippets โ€” A collection of useful snippets
  • ๐Ÿ‘€ Default Open Graph โ€” Awesome open graph generated using og.thcl.dev, fork it and deploy!
  • ๐Ÿ—บ Site Map โ€” Automatically generate sitemap.xml

See the ๐Ÿ‘‰ feature details and changelog ๐Ÿ‘ˆ for more.

Getting Started

1. Clone this template using one of the three ways:

  1. Use this repository as template

    Disclosure: by using this repository as a template, there will be an attribution on your repository.

    I'll appreciate if you do, so this template can be known by others too ๐Ÿ˜„

    Use as template

  2. Using create-next-app

    npx create-next-app -e https://github.com/theodorusclarence/ts-nextjs-tailwind-starter project-name
  3. Deploy to Vercel

    Deploy with Vercel

2. Run the development server

It is encouraged to use yarn so the husky hooks can work properly.

yarn dev

Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx.

3. Change defaults

There are some things you need to change including title, urls, favicons, etc.

Find all comments with !STARTERCONF, then follow the guide.

Don't forget to change the package name in package.json

4. Commit Message Convention

This starter is using conventional commits, it is mandatory to use it to commit changes.

GitHub

https://github.com/theodorusclarence/expansion-pack-demo
You might also like...

my portfolio website using React/Nextjs and tailwind

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dec 28, 2021

Obsidian - Elegant portfolio template built on NextJS and Tailwind CSS

Obsidian - Elegant portfolio template built on NextJS and Tailwind CSS

Obsidian โœจ Obsidian is a minimal and lightweight portfolio template built on Nex

May 6, 2022

Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.

Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin.

Notus NextJS A beautiful UI Kit and Admin for Tailwind CSS and NextJS. Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Le

May 12, 2022

VRT starter (Vite, React, Tailwind CSS)

VRT-Starter (vite, react, tailwindcss) The most lightweight, vanilla template for React, Vite, & Tailwind CSS. It's designed to save you a couple minu

Mar 16, 2022

๐Ÿš€ A web extension starter built with React, Typescript, and Tailwind CSS.

๐Ÿš€ A web extension starter built with React, Typescript, and Tailwind CSS.

A web extension starter, built with React, Typescript, and Tailwind CSS. Build once, and run on multiple browsers: Google Chrome, Mozilla Firefox, Microsoft Edge, and Brave.

May 4, 2022

Next.js + Tailwind CSS + TypeScript starter packed with useful development features.

Next.js + Tailwind CSS + TypeScript starter packed with useful development features.

๐Ÿ”‹ ts-nextjs-tailwind-starter Next.js + Tailwind CSS + TypeScript starter packed with useful development features. Made by Theodorus Clarence Features

Apr 6, 2022

Electron 11 + TypeScript 4.0 + Vite 2 + React 17 + Tailwind 2 + twstyled starter

Electron 11 + TypeScript 4.0 + Vite 2 + React 17 + Tailwind 2 + twstyled starter

Electron 11 + TypeScript 4.0 + Vite 2 + React 17 + Tailwind 2 + twstyled starter

Mar 24, 2022

Nextjs-chakra-navigation-example - NextJS with chakra-ui responsive nav example

nextjs-chakra-navigation-example I looked at how to implement navigation in next

Jan 23, 2022

NextJS Starter Example for Running Zesty.io CMS

NextJS Starter Example for Running Zesty.io CMS

Zesty.io + NextJS Getting Started Node and NPM need to be installed. From your command line.

Mar 18, 2022
โš›๏ธA free and beautiful React admin dashboard template pack.
โš›๏ธA free and beautiful React admin dashboard template pack.

Shards Dashboard React A free React admin dashboard template pack featuring a modern design system and lots of custom templates and components. โœจ Note

May 14, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features โšก๏ธ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

May 9, 2022
Boilerplate-tailwind - A simple boilerplate using NextJS, Typescript, Tailwind, Jest, Storybook and more

This is a Next.js boilerplate using TailwindCSS and other cool stuff. Most of th

Apr 30, 2022
Turborepo (NestJS + Prisma + NextJS + Tailwind + Typescript + Jest) Starter

Fullstack Turborepo starter. Typescript, Nestjs, Nextjs, Tailwind, Prisma, Github Actions, Docker, And Reverse proxy configured

May 7, 2022
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter
Nextjs-ts-mui5-scss-storybook-starter - Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 +

May 5, 2022
Nextjs-starter - A TypeScript starter for Next.js

Next.js TypeScript Starter Features โšก๏ธ Next.js 12 โš›๏ธ React 17 โ›‘ TypeScript ?? ES

Jan 16, 2022
A collection of testing recipes for React Testing Library

React Testing Library Recipes This repository is a collection of common testing recipes for using React Testing Library. It was created as a companion

Jan 19, 2022
Javascript-testing-practical-approach-2021-course-v3 - Javascript Testing, a Practical Approach Course
Javascript-testing-practical-approach-2021-course-v3 - Javascript Testing, a Practical Approach Course

Javascript Testing, a Practical Approach Description This is the reference repos

Jan 8, 2022
Gatsby-typescript-testing - A project with React GatsbyJS and TypeScript with Testing using Atomic Design

?? Inicio Rรกpido Clona el repositorio. Una vez creado el repositorio procede a i

May 3, 2022
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

May 16, 2022