Shadcn UI Example Template

Next.js 14 Admin Dashboard Starter Template With Shadcn-UI

Built with the Next.js App Router

---

Overview

This repository provides a modern, scalable starter template for building admin dashboards using:

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• Components: Shadcn-UI
• Schema Validation: Zod
• State Management: Zustand
• Search Params Management: Nuqs
• Authentication: NextAuth.js
• Tables: Tanstack Tables
• Forms: React Hook Form
• Command Palette: kbar
• Linting: ESLint
• Pre-commit Hooks: Husky
• Formatting: Prettier

---

Features

Page	Description
Signup/Login	Social and email-based authentication using NextAuth.js.
Dashboard	Overview with analytic cards and visualizations.
Employee Management	CRUD operations with server-side pagination, sorting, and filtering using Tanstack Tables and Nuqs.
Product Management	Similar to Employee management, handling product data and forms.
Profile	Multi-step dynamic form with Zod validations.
Kanban Board	Drag-and-drop task management powered by dnd-kit and Zustand for state management.
Custom 404 Page	Friendly 404 error page to handle not-found routes.

---

Architecture

This project follows a clean architecture approach, making it scalable, maintainable, and testable. Key highlights:

• Adapters: Responsible for interacting with external APIs or backend services.
  • httpClient implements the core HTTP methods (GET, POST, PUT, PATCH, DELETE) in a retry-safe manner.
• Core: Includes entities and core business logic.
• DTOs: Data Transfer Objects for strict type definitions.
• Services: Provide reusable methods for business use cases, interacting with Adapters and DTOs.

---

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm (v7 or higher)

Installation

1. Clone the repository:

   git clone https://github.com/itsharppro/shadcn-ui-example-template.git
   cd shadcn-ui-example-template

2. Install dependencies:

   npm install

3. Configure environment variables:

   • Copy the example .env file:

     cp env.example.txt .env.local

   • Update .env.local with the necessary API keys and configurations.

4. Run the development server:

   npm run dev

   The application should now be running at http://localhost:3000.

---

File Structure

.
├── src/
│   ├── adapters/               # Handles external API communications
│   │   ├── http/
│   │   │   ├── httpClient/     # Base HTTP client and interface
│   │   │   └── EmployeeAdapter # Employee-related API methods
│   │   └── services/           # Business logic services
│   │       └── EmployeeService # Employee service implementation
│   ├── app/                    # Next.js pages and routes
│   ├── components/             # UI components
│   ├── constants/              # Shared constants
│   ├── core/                   # Business logic and entities
│   ├── dto/                    # Data Transfer Objects
│   ├── hooks/                  # Custom React hooks
│   ├── lib/                    # Utility functions and helpers
│   ├── middleware.ts           # Custom middleware
│   └── types/                  # TypeScript type definitions
├── public/                     # Public static files
├── README.md                   # Project documentation
├── tailwind.config.js          # Tailwind CSS configuration
├── tsconfig.json               # TypeScript configuration

---

Development Scripts

• Run development server:

  npm run dev

• Build for production:

  npm run build

• Lint and format code:

  npm run lint && npm run format

---

Contributing

1. Fork the repository.
2. Create a new feature branch (git checkout -b feature/my-feature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/my-feature).
5. Open a Pull Request.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Happy coding! 🚀