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
authjs boilerplate cicd commitizen drag-and-drop eslint github-actions husky jest lint-staged monogodb next playwright react-hook-form shadcn-ui taliwindcss template typescript vercel zustand
Last synced: 4 months 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 (6 months ago)
- Default Branch: main
- Last Pushed: 2025-03-14T05:07:49.000Z (4 months ago)
- Last Synced: 2025-03-14T06:22:34.489Z (4 months ago)
- Topics: authjs, boilerplate, cicd, commitizen, drag-and-drop, eslint, github-actions, husky, jest, lint-staged, monogodb, next, playwright, react-hook-form, shadcn-ui, taliwindcss, template, typescript, vercel, zustand
- Language: TypeScript
- Homepage: https://next-board-lovat.vercel.app
- Size: 1.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Production-Ready Next.js 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 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, Code Quality tools pre-configured and pass the SonarQube Quality Check
- 🎯 Developer-Friendly: Clear documentation and best practices built-in
- 🎨 Modern UX: Drag-and-drop, animations, dark mode, responsive design for mobile, tablet, and desktop
- 💾 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, Security, Reliability and Maintainability 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](https://nextjs.org/docs/14/getting-started), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/)
- **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/)
- **UI**: [Shadcn/UI](https://ui.shadcn.com/)
- **Testing**: [Jest](https://jestjs.io/), [Playwright](https://playwright.dev/)
- **Authentication**: [NextAuth](https://next-auth.js.org/)
- **State Management**: [Zustand](https://zustand-demo.pmnd.rs/)
- **Forms**: [React Hook Form](https://react-hook-form.com/), [Zod](https://zod.dev/)
- **Database**: [MongoDB](https://www.mongodb.com/), [Docker compose](https://docs.docker.com/compose/))
- **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
# start mongodb in docker
cd mongodb
docker-compose up -d
# stop mongodb in docker
docker-compose down
# 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 responsive support for multiple screen sizes
- [ ] Add localization: i18n ready with English and German support
- [ ] Persistent data into Database
- [ ] User authentication for secure project/task management
- [ ] Add Profile page
and more...
## 📖 Detailed Technical Documentation
### Database
- In production , I use [MongoDB Atlas](https://www.mongodb.com/products/platform/atlas-database)
- In local development, I use [Docker Compose](https://docs.docker.com/compose/), you need to have [Docker](https://www.docker.com/) or [OrbStack](https://orbstack.dev/) installed.
### 📊 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
public/ # Static files such as images and i18n localization
mongodb/ # MongoDB container
src/
├── 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/).