nextjs-starter-kit 0.1.1

package/.github/PR_REQUEST_TEMPLATE.md

@@ -0,0 +1,18 @@
+## 📌 What’s changing?
+
+<!-- Briefly explain what this PR does -->
+
+## ✅ Checklist
+
+- [ ] I tested this change locally
+- [ ] I updated related docs (if needed)
+- [ ] This PR is rebased on the latest base branch
+- [ ] This PR is ready to squash & merge
+
+## 🚀 Deployment notes
+
+<!-- Optional: Add notes if anything special is needed during deploy -->
+
+## 🎯 Related Issues or Cards
+
+Closes #

package/.github/workflows/pr_check.yml

@@ -0,0 +1,38 @@
+name: PR Check
+
+on:
+    pull_request:
+        branches:
+            - development
+            - testing
+            - production
+
+jobs:
+    lint-and-build:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Use Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+
+            - name: Enable Corepack & Install
+              run: |
+                  corepack enable
+                  pnpm install
+
+            - name: Lint
+              run: pnpm lint
+
+            - name: Format Check
+              run: pnpm format-check
+
+            - name: Format
+              run: pnpm format
+
+            - name: Build
+              run: pnpm build

package/.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

package/.prettierignore

@@ -0,0 +1,7 @@
+/.vscode
+/node_modules
+./dist
+
+*.env
+.env
+.env.*

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+    "singleQuote": false,
+    "bracketSpacing": true,
+    "tabWidth": 4,
+    "semi": true,
+    "trailingComma": "es5",
+    "plugins": ["prettier-plugin-tailwindcss"],
+    "tailwindFunctions": ["clsx", "cva", "cn"]
+}

package/README.md

@@ -0,0 +1,165 @@
+# Next.js Starter
+
+[![Next.js](https://img.shields.io/badge/Next.js-16%2B-blue?logo=next.js)](https://nextjs.org/)
+[![pnpm](https://img.shields.io/badge/pnpm-%E2%9C%94-green?logo=pnpm)](https://pnpm.io/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier)](https://prettier.io/)
+[![ESLint](https://img.shields.io/badge/linting-eslint-blue?logo=eslint)](https://eslint.org/)
+
+> A modern Next.js starter template with modular structure, reusable UI components, and best practices for scalable web development.
+
+---
+
+## Features
+
+- **Next.js 15.5.0** with App Router
+- Modular folder structure (`src/animations`, `src/assets`, `src/components`, etc.)
+- Reusable UI components (Accordion, Button, Card, Table, etc.)
+- Context, hooks, and helpers for state management and utilities
+- Axios setup for API requests
+- QueryClient for data fetching and caching
+- Global styles and custom fonts
+- Linting and formatting with ESLint, Prettier, and lint-staged
+- PostCSS for advanced CSS processing
+- Husky for Git hooks
+- Tailwind CSS for utility-first styling
+- Prettier and Prettier-plugin-tailwindcss for code formatting
+- Embla Carousel, Recharts, Lucide, Tabler Icons, and more for UI/UX enhancements
+- Zod for schema validation
+- React Query for data fetching
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 22+
+- pnpm (recommended) or npm/yarn
+
+### Installation
+
+```bash
+pnpm install
+```
+
+### Running the Development Server
+
+```bash
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+### Building for Production
+
+```bash
+pnpm build
+```
+
+---
+
+## Project Structure
+
+```text
+src/
+  animations/         # Animation utilities
+  app/                # Next.js app router structure
+    (routes)/         # Route groups
+      (home)/         # Home page
+  assets/             # Static assets and logos
+  components/         # UI components, constants, context, helpers, hooks, lib, providers, schema, shared, styles, utils, validations
+    ui/               # Reusable UI elements
+    constants/        # App-wide constants
+    context/          # React context providers
+    helpers/          # Utility functions
+    hooks/            # Custom React hooks
+    lib/              # Libraries (axios, queryClient, utils)
+    providers/        # Context providers
+    schema/           # Validation schemas
+    shared/           # Shared resources (icons, etc.)
+    styles/           # Fonts and global styles
+    utils/            # Utility functions
+    validations/      # Validation logic
+```
+
+---
+
+## Scripts
+
+- `pnpm dev` — Start development server
+- `pnpm build` — Run lint, format, and build for production
+- `pnpm lint` — Run ESLint
+- `pnpm format` — Format code with Prettier
+- `pnpm check-format` — Check code formatting
+- `pnpm prepare` — Prepare Husky hooks
+- `pnpm start` — Start production server
+
+---
+
+## Dependencies
+
+### Main
+
+- next@15.5.0
+- react@19.1.0, react-dom@19.1.0
+- axios
+- @tanstack/react-query, @tanstack/react-query-devtools
+- @radix-ui/react-\* (Accordion, Dialog, Tabs, etc.)
+- @tabler/icons-react, lucide-react
+- embla-carousel-react
+- recharts
+- zod
+- input-otp
+- sonner
+- tailwind-merge
+- next-themes
+- date-fns
+- class-variance-authority, clsx
+- vaul
+
+### Dev
+
+- eslint, eslint-config-next, eslint-config-prettier, eslint-plugin-react-hooks, @tanstack/eslint-plugin-query, @eslint/eslintrc
+- prettier, prettier-plugin-tailwindcss
+- husky
+- lint-staged
+- tailwindcss, @tailwindcss/postcss, tw-animate-css
+
+---
+
+## Linting & Formatting
+
+- ESLint config: `eslint.config.mjs`
+- Prettier: integrated via lint-staged
+- Lint-staged: `lint-staged.config.js`
+- Husky for pre-commit hooks
+
+---
+
+## Customization
+
+- Add new UI components in `src/components/ui/`
+- Add new routes in `src/app/(routes)/`
+- Update global styles in `src/components/styles/globals.css`
+- Configure Axios in `src/components/lib/axios.js`
+- Add/modify validation schemas in `src/components/schema/`
+
+---
+
+## Author
+
+**Harshit Ostwal**  
+[codewithharshitjain@gmail.com](mailto:codewithharshitjain@gmail.com)
+
+---
+
+## License
+
+This project is licensed under the MIT License.
+
+---
+
+## Contributing
+
+Pull requests, issues, and suggestions are welcome!

package/components.json

@@ -0,0 +1,21 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": true,
+    "tsx": false,
+    "tailwind": {
+        "config": "",
+        "css": "@/styles/globals.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "iconLibrary": "lucide"
+}

package/eslint.config.mjs

@@ -0,0 +1,42 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+    {
+        ignores: [
+            "node_modules/**",
+            ".next/**",
+            "out/**",
+            "build/**",
+            "next-env.d.ts",
+        ],
+    },
+    ...compat.extends("next/core-web-vitals", "prettier"),
+    {
+        files: ["**/*.{js,jsx}"],
+        languageOptions: {
+            parserOptions: {
+                ecmaVersion: 2022,
+                sourceType: "module",
+            },
+        },
+        rules: {
+            "no-unused-vars": "warn",
+            "no-console": "warn",
+            "@next/next/no-document-import-in-page": "off",
+            "react-hooks/rules-of-hooks": "error",
+            "react-hooks/exhaustive-deps": "warn",
+            "@typescript-eslint/no-unused-vars": "off",
+        },
+    },
+];
+
+export default eslintConfig;

package/jsconfig.json

@@ -0,0 +1,7 @@
+{
+    "compilerOptions": {
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    }
+}

package/lint-staged.config.js

@@ -0,0 +1,6 @@
+const config = {
+    "**/*.{js,jsx}": ["eslint --fix", "prettier --write"],
+    "**/*.{css,scss,md,json}": ["prettier --write"],
+};
+
+export default config;

package/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    devIndicators: false,
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,72 @@
+{
+    "name": "nextjs-starter-kit",
+    "version": "0.1.1",
+    "private": false,
+    "scripts": {
+        "dev": "next dev --turbopack",
+        "build": "pnpm lint && pnpm format &&  next build --turbopack",
+        "start": "next start",
+        "lint": "eslint",
+        "check-format": "prettier --check .",
+        "format": "prettier --write .",
+        "prepare": "husky"
+    },
+    "dependencies": {
+        "@hookform/resolvers": "^5.2.1",
+        "@next/third-parties": "^15.5.0",
+        "@radix-ui/react-accordion": "^1.2.12",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-collapsible": "^1.1.12",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-select": "^2.2.6",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slider": "^1.3.6",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.6",
+        "@radix-ui/react-tabs": "^1.1.13",
+        "@radix-ui/react-tooltip": "^1.2.8",
+        "@tabler/icons-react": "^3.34.1",
+        "@tanstack/react-query": "^5.85.5",
+        "@tanstack/react-query-devtools": "^5.85.5",
+        "axios": "^1.11.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
+        "date-fns": "^4.1.0",
+        "embla-carousel-react": "^8.6.0",
+        "input-otp": "^1.4.2",
+        "lucide-react": "^0.541.0",
+        "next": "15.5.0",
+        "next-themes": "^0.4.6",
+        "react": "19.1.0",
+        "react-day-picker": "^9.9.0",
+        "react-dom": "19.1.0",
+        "react-hook-form": "^7.62.0",
+        "recharts": "2.15.4",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^3.3.1",
+        "vaul": "^1.1.2",
+        "zod": "^4.0.17"
+    },
+    "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@tailwindcss/postcss": "^0.6.14",
+        "@tanstack/eslint-plugin-query": "^5.83.1",
+        "eslint": "^9",
+        "eslint-config-next": "15.5.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.1.5",
+        "prettier": "^3.6.2",
+        "prettier-plugin-tailwindcss": "^0.6.14",
+        "tailwindcss": "^4",
+        "tw-animate-css": "^1.3.7"
+    }
+}

package/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+    plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

package/src/animations/loader.js

@@ -0,0 +1,81 @@
+import gsap from "gsap";
+
+export function LoaderAnimation() {
+    const tl = gsap.timeline();
+
+    tl.set("#loader", {
+        "--gradient-opacity": 0,
+        background: `linear-gradient(to right, 
+            rgba(243, 24, 17, var(--gradient-opacity, 0)), 
+            rgba(250, 240, 48, var(--gradient-opacity, 0)), 
+            rgba(255, 255, 255, var(--gradient-opacity, 0)), 
+            rgba(6, 144, 36, var(--gradient-opacity, 0)), 
+            rgba(15, 45, 202, var(--gradient-opacity, 0))
+        ), black`,
+    });
+
+    tl.fromTo(
+        "#loader-heading",
+        {
+            visibility: "hidden",
+        },
+        {
+            visibility: "visible",
+            display: "flex",
+        }
+    );
+
+    tl.fromTo(
+        "#loader-heading span",
+        {
+            y: -25,
+            opacity: 0,
+        },
+        {
+            opacity: 1,
+            stagger: 0.12,
+            duration: 1,
+            delay: 0.5,
+            y: 0,
+        }
+    );
+
+    tl.to("#loader-heading span", {
+        y: -25,
+        stagger: 0.12,
+        duration: 1,
+        opacity: 0,
+    });
+
+    tl.set("#loader", {
+        background: `linear-gradient(to right, 
+            rgba(243, 24, 17, var(--gradient-opacity, 0)), 
+            rgba(250, 240, 48, var(--gradient-opacity, 0)), 
+            rgba(255, 255, 255, var(--gradient-opacity, 0)), 
+            rgba(6, 144, 36, var(--gradient-opacity, 0)), 
+            rgba(15, 45, 202, var(--gradient-opacity, 0))
+        ), white`,
+        "--gradient-opacity": 1,
+        duration: 0.5,
+    });
+
+    tl.fromTo(
+        "#logo",
+        {
+            visibility: "hidden",
+            scale: 1.05,
+            filter: "blur(10px)",
+            opacity: 0,
+        },
+        {
+            visibility: "visible",
+            display: "flex",
+            scale: 1,
+            opacity: 1,
+            duration: 0.5,
+            filter: "blur(0px)",
+        }
+    );
+
+    return tl;
+}

package/src/app/(routes)/(home)/page.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function page() {
+    return <div>page</div>;
+}
+
+export default page;

package/src/app/layout.js

@@ -0,0 +1,81 @@
+import { Toaster } from "@/components/ui/sonner";
+import { cn } from "@/lib/utils";
+import { QueryProvider } from "@/providers/QueryProvider";
+import { manrope, figtree, inter } from "@/styles/fonts";
+import "@/styles/globals.css";
+import { GoogleAnalytics, GoogleTagManager } from "@next/third-parties/google";
+
+// export const metadata = {
+//     title: {
+//         default: "Next JS Starter",
+//         template: "%s | Next JS Starter",
+//     },
+//     description: "",
+//     keywords: [],
+//     metadataBase: new URL(""),
+//     alternates: {
+//         canonical: "0",
+//     },
+//     openGraph: {
+//         title: "",
+//         description: "",
+//         url: "0",
+//         siteName: "0",
+//         locale: "en_US",
+//         type: "website",
+//         images: [
+//             {
+//                 url: "0",
+//                 width: 0,
+//                 height: 0,
+//                 alt: "",
+//             },
+//         ],
+//     },
+//     twitter: {
+//         card: "",
+//         title: "",
+//         description: "",
+//         images: [
+//             {
+//                 url: "",
+//                 width: 0,
+//                 height: 0,
+//                 alt: "",
+//             },
+//         ],
+//     },
+//     icons: {
+//         icon: "/favicon.ico",
+//         apple: "/favicon.ico",
+//     },
+// };
+
+export default function RootLayout({ children }) {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <GoogleTagManager gtmId="" />
+            <GoogleAnalytics gaId="" />
+
+            <body
+                className={cn(
+                    manrope.variable,
+                    figtree.variable,
+                    inter.variable,
+                    "font-Manrope tracking-tighter antialiased"
+                )}
+            >
+                <QueryProvider>{children}</QueryProvider>
+                <Toaster
+                    richColors
+                    theme="light"
+                    closeButton
+                    expand
+                    position="top-right"
+                    dir="auto"
+                    gap={20}
+                />
+            </body>
+        </html>
+    );
+}

package/src/app/not-found.jsx

@@ -0,0 +1,19 @@
+import { Button } from "@/components/ui/button";
+import Container from "@/components/ui/container";
+import { Heading } from "@/components/ui/headings";
+import Link from "next/link";
+
+export default function NotFound() {
+    return (
+        <Container
+            className={
+                "flex h-screen flex-col items-center justify-center gap-4"
+            }
+        >
+            <Heading size="h4">404 - Page Not Found</Heading>
+            <Link href={"/"}>
+                <Button>Go Back</Button>
+            </Link>
+        </Container>
+    );
+}

package/src/app/robots.js

@@ -0,0 +1,10 @@
+export default function robots() {
+    return {
+        rules: {
+            userAgent: "*",
+            allow: "/",
+            disallow: ["/private/", "/api/", "/admin/", "/_next/"],
+        },
+        sitemap: "",
+    };
+}

package/src/app/sitemap.js

@@ -0,0 +1,10 @@
+export default async function sitemap() {
+    return [
+        {
+            url: "/example",
+            lastModified: new Date().toISOString(),
+            changeFrequency: "monthly",
+            priority: 0.5,
+        },
+    ];
+}

package/src/assets/Logos/index.js

@@ -0,0 +1,3 @@
+export const Logos = {
+    alt: "",
+};

package/src/assets/index.js

@@ -0,0 +1,5 @@
+import { Logos } from "./Logos";
+
+export const Assets = {
+    logos: Logos,
+};