• Stars
    star
    732
  • Rank 61,915 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript setup โœจ

Deploy with Vercel Deploy to Netlify Deploy on Railway

Open in StackBlitz

This is a Next.js project bootstrapped with create-next-app, added with Chakra UI and TypeScript setup.
Start developing right away!

๐Ÿ”‹ โšก Battery Packed template

  • ๐Ÿš€ Next.js 13 - React 18
  • โ›“๏ธ TypeScript
  • Chakra-UI v2
  • โœ”๏ธ toolings for linting, formatting, and conventions configured
    • eslint, prettier, husky, lint-staged, commitlint, commitizen, and standard-version
    • pre-commit, pre-push, commit-msg, prepare-commit-msg hook configured
  • ๐Ÿ“ฑ PWA-ready - next-pwa configured, disabled by default, just enable it through next.config.js
  • ๐Ÿ”Ž SEO optimization configured - with next-sitemap.
    • you'll need to reconfigure or tinker with it to get it right according to your needs, but it's there if you need it.
  • ๐ŸŽจ basic responsive layout configured - don't need it? just remove it ๐Ÿ˜ƒ
  • ๐Ÿค– Automatic Dependency Update with Renovate
  • ๐ŸŽ๏ธ Turbo setup
  • ๐Ÿงช Playwright E2E Test

CodeFactor Quality Gate Status Maintainability Rating Bugs Code Smells Duplicated Lines (%)

Commitizen friendly

Pre-requisites

  1. Node.js or nvm installed.
  2. pnpm installed.

Getting Started

  1. You can either click Use this template button on this repository and clone the repo or directly from your terminal:
npx degit sozonome/nextarter-chakra <YOUR_APP_NAME>
  1. After cloning the project, run this command: pnpm or pnpm install

  2. Then, run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/lib/pages/index.tsx. The page auto-updates as you edit the file.

How to Run e2e Test (in local machine)

  1. Build production with pnpm build, then run the production build using pnpm start.
  2. Open another terminal (or new terminal tab, don't cancel / close the production server), then run the test with pnpm test:e2e.

References:

More Repositories

1

sznm.dev

My Personal Dev Site, built with Next.js and Chakra UI
TypeScript
166
star
2

nextarter-tailwind

battery packed template / boilerplate to initialize PWA ready Next.js app with TailwindCSS & Typescript setup โœจ
TypeScript
79
star
3

vite-react-chakra-starter

template to initialize vite react-ts app with Chakra UI setup โœจ
TypeScript
65
star
4

spoker

My take on making scrum poker room
TypeScript
53
star
5

pub-apis

Find public APIs, powered by api(dot)publicapis(dot)org
TypeScript
32
star
6

mixtarter-chakra

remix starter template with chakra-ui and typescript setup
TypeScript
19
star
7

nextarter-nextui

template to initialize Next.js project with Next-UI and typescript setup
TypeScript
14
star
8

og-img

Edge service to generate embeddable dynamic ๐Ÿ–ผ๏ธ OpenGraph image. Powered by @vercel/og
TypeScript
13
star
9

covid-19-data

COVID-19 Data PWA built with NextJS, SWR, and Chakra-UI
TypeScript
10
star
10

my-base

My personal knowledge base
MDX
9
star
11

add-to-calendar-generator

Add to Calendar link / button generator
TypeScript
9
star
12

agustinusnathaniel.com

5th iteration of my personal site. Built using svelte kit + unocss, powered by Notion API
TypeScript
8
star
13

muvees

Movie, TV Shows, Person library. Powered by themoviedb.org
TypeScript
7
star
14

my-spotify-astro

Spotify API consumption demo for personal profile. Built using Astro API route & SSR.
TypeScript
6
star
15

eslint-config-sznm

My personal ESLint configs
JavaScript
6
star
16

my-spotify-nuxt

[Learn Nuxt 3 RC] Spotify API consumption demo for personal profile.
TypeScript
6
star
17

nextarter-windi

battery packed template / boilerplate to initialize PWA ready Next.js app with WindiCSS & Typescript setup โœจ
TypeScript
4
star
18

vite-react-tailwind-starter

template to initialize vite react-swc-ts app with TailwindCSS setup โœจ
TypeScript
4
star
19

nextarter-chakra-pages-router

[Pages Router version] battery packed template / boilerplate to initialize Next.js app with Chakra UI & Typescript setup โœจ
TypeScript
4
star
20

my-sites-archive

TypeScript
3
star
21

greet-gaas

Greeting as a Service (GaaS)
TypeScript
3
star
22

swindi

battery packed template / boilerplate to initialize sveltekit app with WindiCSS & Typescript setup โœจ
Svelte
2
star
23

xtarter

Starter templates landing page
TypeScript
2
star
24

zustand-playground

playin around with zustand and immer
TypeScript
2
star
25

kapturalumina

Basic Photography Learning App
TypeScript
2
star
26

workflows

Personal reusable workflows
2
star
27

mixtarter-tailwind

remix starter template with Tailwind v3 and typescript setup
TypeScript
1
star
28

speedlify-vercel

Benchmark web pages over time. Fork of speedlify by @zachleat
JavaScript
1
star
29

try-astro

Astro
1
star
30

linktester

mini web app for testing app url in android
TypeScript
1
star
31

QRcodeGenerator

QR Code Generator app
TypeScript
1
star
32

nextjs-reproduce-not-found-issue

TypeScript
1
star
33

sznm.link

my personal shortener service
TypeScript
1
star
34

learn-mintlify-docs

1
star
35

muvees-flutter

TMDB flutter app
Dart
1
star
36

ua-check

TypeScript
1
star
37

simple-react-app

Learning Assignment
TypeScript
1
star