Next.js Application Boilderplate with Shadcn/ui components

This project is a Next.js application bootstrapped with create-next-app. It leverages a variety of modern web development tools and libraries to create a scalable and maintainable application.

Getting Started

To get started with the development server, you can use one of the following commands:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Project Structure

The project's overall structure consists of a root directory containing essential configuration and utility files, along with two main directories: app and components.

Key Directories and Files

• README.md: This file, providing an overview of the project and its usage.
• components.json: Metadata about the available components in the project.
• next.config.mjs: Configuration file for the Next.js framework.
• postcss.config.mjs: Configuration file for PostCSS.
• tailwind.config.ts: Configuration file for Tailwind CSS.
• tsconfig.json: TypeScript configuration file.
• yarn.lock: Lock file recording the exact dependencies and their versions used in the project.
• app directory: Contains the main application files, including:
  • layout.tsx: The layout component for the application.
  • page.tsx: The main page component.
  • fonts subdirectory: Holds custom font files used in the project.
• components directory: Central hub for all custom UI components, organized into subdirectories:
  • core: Fundamental components used across the application.
  • hooks: Custom hooks for reusable functionality.
  • providers: Custom providers managing state and other global resources.
  • ui: Basic Shadcn UI components.

Main Dependencies

• @radix-ui/react-*: A set of React components for building complex, accessible, and customizable UI components, cored for Shadcn components.
• react: The JavaScript library for building user interfaces.
• react-dom: The DOM-specific package for React.
• react-hook-form: A flexible Hooks library that brings easy-to-use form state management and form validation to React applications.
• tailwindcss: A utility-first CSS framework for rapidly building modern websites.
• typescript: A typed superset of JavaScript that compiles to plain JavaScript.
• react: The JavaScript library for building user interfaces.
• react-dom: The DOM-specific package for React.
• @tanstack/react-query: Powerful data synchronization and caching for React.
• @tanstack/react-table: Headless UI for building tables in React.
• @tanstack/react-virtual: Virtualization utilities for React.

Types

• typescript: A typed superset of JavaScript that compiles to plain JavaScript.

Services

• Custom services for handling API requests and other business logic.

Schemas

• Form validation schemas using libraries like yup or zod for ensuring data integrity.

Important Scripts

• dev: Runs the development server for your Next.js application.
• build: Builds your Next.js application for production.
• start: Starts the production server for your Next.js application.
• lint: Runs ESLint to lint your project.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation: Learn about Next.js features and API.
• Learn Next.js: An interactive Next.js tutorial.
• Next.js GitHub repository: Your feedback and contributions are welcome.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js. Check out the Next.js deployment documentation for more details.

License

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

This `README.md` file provides a comprehensive overview of the project, including how to get started, the project structure, main dependencies, important scripts, and additional resources for learning more about Next.js.