Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/john-data-chen/next-dnd-starter-kit
This project is a production-ready Next and dnd-kit template designed to demonstrate modern frontend development practices. It includes a full suite of tools and configurations for TypeScript, testing, and CI/CD pipelines. Perfect for a starting point for beginner developers exploring Next and related technologies.
https://github.com/john-data-chen/next-dnd-starter-kit
boilerplate cicd commitlint dnd-kit drag-and-drop eslint github-actions husky jest lint-staged next next-auth playwright shadcn-ui taliwindcss template typescript vercel zustand
Last synced: about 19 hours ago
JSON representation
This project is a production-ready Next and dnd-kit template designed to demonstrate modern frontend development practices. It includes a full suite of tools and configurations for TypeScript, testing, and CI/CD pipelines. Perfect for a starting point for beginner developers exploring Next and related technologies.
- Host: GitHub
- URL: https://github.com/john-data-chen/next-dnd-starter-kit
- Owner: john-data-chen
- Created: 2024-12-27T12:28:34.000Z (26 days ago)
- Default Branch: main
- Last Pushed: 2025-01-21T06:10:57.000Z (1 day ago)
- Last Synced: 2025-01-21T06:26:38.576Z (1 day ago)
- Topics: boilerplate, cicd, commitlint, dnd-kit, drag-and-drop, eslint, github-actions, husky, jest, lint-staged, next, next-auth, playwright, shadcn-ui, taliwindcss, template, typescript, vercel, zustand
- Language: TypeScript
- Homepage: https://next-board-lovat.vercel.app
- Size: 262 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Production-Ready Next.js TypeScript Template | Drag & Drop Support
[](https://codecov.io/gh/john-data-chen/next-dnd-starter-kit)
[](https://sonarcloud.io/summary/new_code?id=john-data-chen_next-dnd-starter-kit)
[](https://github.com/prettier/prettier)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/john-data-chen/next-board/actions/workflows/CI.yml)
## ✨ Why Choose This Template:
The **Enterprise-grade Next.js TypeScript template** with 85%+ test coverage, featuring drag & drop functionality, WAI-ARIA accessibility. It is designed for saving time while adhering to best practices and including:
- 🚀 Production-Ready: Enterprise-level architecture with full TypeScript support
- 💪 Professional Setup: CI/CD, Testing, and Code Quality tools pre-configured
- 🎯 Developer-Friendly: Clear documentation and best practices built-in
- 🎨 Modern UX: Drag-and-drop, animations, and dark mode included
- 💾 Persistent data: via local storage
---
⭐ **Love this template?**
If you like it, don't forget to [give it a star](https://github.com/john-data-chen/next-dnd-starter-kit) today!
Every star motivates me to deliver more high-quality templates. 🚀
---
**Key Accomplishments**:
- **Test Coverage in Codecov**: 85%+
- **Reliability Rating in SonarQube**: A
- **Cross-browser Testing**: for both desktop and mobile devices.
- **CI/CD automation**: in GitHub actions and Vercel.
## 🛠️ Technical Stack
- **Requirements**: [Node.JS](https://nodejs.org/en/download/) v22.13.0 or higher
- **Frontend**: [Next.js](https://nextjs.org/docs/14/getting-started), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [Zustand](https://zustand-demo.pmnd.rs/)
- **Build**: [PNPM](https://pnpm.io/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [Commitizen](https://commitizen.github.io/cz-cli/), [Lint Staged](https://github.com/okonet/lint-staged), [husky](https://github.com/typicode/husky)
- **Styling**: [Taliwind CSS](https://tailwindcss.com/), [shadcn/ui](https://ui.shadcn.com/)
- **Testing**: [Jest](https://jestjs.io/), [Playwright](https://playwright.dev/)
- **Drag and Drop**: [dnd-kit](https://dndkit.com/)
- **CI/CD**: [GitHub Actions](https://github.com/features/actions), [Vercel](https://vercel.com/home), [Codecov](https://codecov.io/), [SonarQube](https://sonarcloud.io/)
## 🚀 Getting Started
- Press **Use this template** to create a new repository.
- Generate Secret in `.env.local` file.
### Commands
```bash
# Generate Secret
echo "NEXTAUTH_SECRET=$(openssl rand -base64 32)" > .env.local
# Install dependencies
pnpm install
# Start development server
pnpm run dev
# Run unit and integration tests by Jest
pnpm run test
# Run E2E tests by Playwright
pnpm run playwright
```
## 🔜 Roadmap
- [x] Full-stack support by Next.js
- [x] Enhanced accessibility with Shadcn UI
- [x] Drag and drop supports
- [x] CI / CD pipelines
- [x] Add code quality check with Codecov and SonarQube
- [x] Increase test coverage to 85%+
- [ ] Add localization: i18n ready with English and German support
- [ ] Persistent data into Database
- [ ] User authentication for secure project/task management
and more...
## 📖 Detailed Technical Documentation
### 📊 Testing Strategy
- Achieved 85%+ test coverage with unit, integration, and E2E tests.
- Cross-browser testing ensures functionality across desktop and mobile.
### Project Structure
```
__tests__/ # Test cases
src/
├── assets/ # Static files such as images
├── app/ # Next.js App routes
│ ├── page.tsx # Root page
│ ├── layout.tsx # Layout component
│ ├── not-found.tsx # 404 page
│ ├── (auth)/login/ # Authentication routes
│ └──(workspace)/ # Workspace routes (protected routes)
│ └── kanban/ # Kanban routes
├── components/ # Reusable React components
├── constants/ # Application-wide constants
├── hooks/ # Custom React hooks
├── styles/ # Global styles
├── types/ # TypeScript type definitions
└── utils/ # Utility functions such as Authentication and State management
```
### 📃 License
This project is licensed under the [MIT License](https://opensource.org/license/mit/).