mteguhirawan1996 / singularity

Next.js + Mantine UI + TypeScript Starter and Boilerplate

Next.js + Mantine UI + TypeScript Starter and Boilerplate

🔋 ts-nextjs-mantine-starter

Next.js 14+, Mantine UI, TypeScript starter packed with useful development features.

Made by OneDev

Features

Developer experience first, extremely flexible code structure and only keep what you need:

• ⚡ Next.js with App Router support
• 🔥 Type checking TypeScript
• 💎 Integrate with Mantine UI
• ✅ Strict Mode for TypeScript and React 18
• ♻️ Type-safe environment variables with T3 Env
• ⌨️ Form handling with React Hook Form
• 🔴 Validation library with Zod
• ⏲️ Date config with Dayjs
• 📏 Linter with ESLint (default Next.js, Next.js Core Web Vitals, Airbnb configuration)
• 💖 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🚓 Lint git commit with Commitlint
• 📓 Write standard compliant commit messages with Commitizen
• 💡 Absolute Imports using @ prefix
• 🗂 VSCode configuration: Settings
• 🤖 SEO metadata, Open Graph tags
• 🗺️ Sitemap.xml and robots.txt
• ⚙️ Bundler Analyzer
• 💯 Maximize lighthouse score

Built-in feature from Next.js:

• ☕ Minify HTML & CSS
• 💨 Live reload
• ✅ Cache busting

Requirements

• Node.js 20+ and npm

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/MTeguhIrawan1996/singulartw.git my-project-name
cd my-project-name
yarn

Then, you can run the project locally in development mode with live reload by executing:

yarn dev

Open http://localhost:3000 with your favorite browser to see your project.

Project structure

.
├── README.md                       # README file
├── .husky                          # Husky configuration
├── .vscode                         # VSCode configuration
├── public                          # Public assets folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # React components
│   ├── services                    # Api Services folder
│   ├── libs                        # 3rd party libraries configuration
│   ├── styles                      # Styles folder
│   ├── types                       # Type definitions
│   ├── utils                       # Utilities folder
│   └── test-utils                  # Testing utilities config
└── tsconfig.json                   # TypeScript configuration

Commit Message Format

The project enforces Conventional Commits specification. This means that all your commit messages must be formatted according to the specification. To help you write commit messages, the project uses Commitizen, an interactive CLI that guides you through the commit process. To use it, run the following command:

yarn git:commit