{"id":25943316,"url":"https://github.com/keenthemes/crudhunt","last_synced_at":"2025-03-04T07:15:50.513Z","repository":{"id":279747690,"uuid":"939260258","full_name":"keenthemes/crudhunt","owner":"keenthemes","description":"Full-stack CRUDs for Next.js","archived":false,"fork":false,"pushed_at":"2025-02-27T06:49:11.000Z","size":3634,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-02-27T09:21:12.409Z","etag":null,"topics":["cruds","nextjs","postgresql","prisma","radix-ui","react","react-aria","supabase","tailwind"],"latest_commit_sha":null,"homepage":"https://crudhunt.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keenthemes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-26T09:00:13.000Z","updated_at":"2025-02-27T06:49:15.000Z","dependencies_parsed_at":"2025-02-27T09:26:54.556Z","dependency_job_id":"710be92f-9728-42ab-8b2e-0cbbd222978e","html_url":"https://github.com/keenthemes/crudhunt","commit_stats":null,"previous_names":["keenthemes/crudhunt"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenthemes%2Fcrudhunt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenthemes%2Fcrudhunt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenthemes%2Fcrudhunt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenthemes%2Fcrudhunt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keenthemes","download_url":"https://codeload.github.com/keenthemes/crudhunt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241801255,"owners_count":20022390,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cruds","nextjs","postgresql","prisma","radix-ui","react","react-aria","supabase","tailwind"],"created_at":"2025-03-04T07:15:49.931Z","updated_at":"2025-03-04T07:15:50.500Z","avatar_url":"https://github.com/keenthemes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Supercharge your app development with CrudHunt's free, full-cycle CRUD examples and 50+ UI components, powered by React, Next.js and styled with Tailwind.\n\n**Live Demo** → [https://CrudHunt.com](https://CrudHunt.com)\n\n## Overview\n\nCrudHunt leverages Next.js to power both the frontend and backend, efficiently delivering robust CRUD prototypes with seamless portability to other tech stacks. The backend is built using Next.js API routes, Prisma, and PostgreSQL, featuring a modular architecture that allows end users to easily adapt it to their own backend environments.\n\n## Install Components\n\n### Prerequisites\n\nBefore you can install and use CrudHunt, make sure your project meets the following requirements:\n\n- **React**: Version 19 or higher.\n- **TypeScript**: Version 5.7 or higher.\n- **Tailwind CSS**: Version 4 or higher.\n\n### Get CrudHunt Source Code\n\nDownload [CrudHunt](http://github.com/keenthemes/CrudHunt) source code or clone it via Git into your machine:\n\n```bash\ngit clone https://github.com/keenthemes/CrudHunt.git\n```\n\n### Initialize a React Project\n\nCrudHunt is compatible with various React frameworks. Choose the one that best fits your needs:\n\n- [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app)\n- [Vite](https://vite.dev/guide/#scaffolding-your-first-vite-project)\n- [Remix](https://remix.run/docs/en/main/start/quickstart)\n- [Astro](https://docs.astro.build/en/install-and-setup/)\n- [Laravel Inertia](https://inertiajs.com/client-side-setup)\n- [Gatsby](https://www.gatsbyjs.com/docs/tutorial/getting-started/part-0/)\n\n\u003e [!WARNING]\n\u003e If you already have a React project with TypeScript and Tailwind CSS, you\n\u003e can skip this step.\n\n### Install Tailwind\n\nFollow [Instalation Guide](https://tailwindcss.com/docs/installation/framework-guides) to setup Tailwind for your React project.\n\n### Add Tailwind CSS Animate\n\n```bash\nnpm i tailwindcss-animate\n```\n\nThis plugin is required for smooth animation effects used by Accordion, Dialog, Popover and other elements.\n\n### Integrate CrudHunt Styles\n\nAdd below code into your Tailwind entry style file `styles/globals.css`:\n\n```css showLineNumbers\n@import 'tailwindcss';\n\n@plugin 'tailwindcss-animate';\n\n/** Dark Mode Variant **/\n@custom-variant dark (\u0026:is(.dark *));\n\n/** Theme Colors **/\n:root {\n  /** Base Colors **/\n  --background: 0 0% 100%;\n  --foreground: 240 10% 3%;\n  --card: 0 0% 100%;\n  --card-foreground: 240 10% 3%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 240 10% 3%;\n\n  /** Contextual Colors **/\n  --muted: 0 0% 97%;\n  --muted-darker: 0 0% 94%;\n  --muted-foreground: 240 3% 40%;\n  --accent: 0 0% 96%;\n  --accent-darker: 0 0% 93%;\n  --accent-foreground: 240 4% 20%;\n  --secondary: 0 0% 95%;\n  --secondary-darker: 0 0% 92%;\n  --secondary-foreground: 240 4% 18%;\n  --primary: 212 88% 51%;\n  --primary-darker: 212 88% 44%;\n  --primary-foreground: 0 0% 100%;\n  --mono: 222 15% 13%;\n  --mono-darker: 0 0% 0%;\n  --mono-foreground: 0 0% 100%;\n  --destructive: 349 86% 50%;\n  --destructive-darker: 349 86% 44%;\n  --destructive-foreground: 0 0% 100%;\n  --warning: 47 100% 48%;\n  --warning-darker: 47 100% 38%;\n  --warning-foreground: 0 0% 100%;\n  --success: 137 89% 41%;\n  --success-darker: 137 94% 31%;\n  --success-foreground: 0 0% 100%;\n  --info: 252 83% 52%;\n  --info-darker: 252 83% 46%;\n  --info-foreground: 0 0% 100%;\n\n  /** Base Styles **/\n  --border: 0 0% 94%;\n  --input: 0 0% 89%;\n  --ring: 0 0% 84%;\n  --radius: 0.5rem;\n}\n\n.dark {\n  /** Base Colors **/\n  --background: 240 10% 4%;\n  --foreground: 0 0% 90%;\n  --card: 240 10% 4%;\n  --card-foreground: 0 0% 90%;\n  --popover: 240 10% 4%;\n  --popover-foreground: 0 0% 90%;\n\n  /** Contextual Colors **/\n  --muted: 240 6% 9%;\n  --muted-darker: 240 6% 13%;\n  --muted-foreground: 240 6% 60%;\n  --accent: 240 6% 10%;\n  --accent-darker: 240 6% 14%;\n  --accent-foreground: 0 0% 98%;\n  --secondary: 240 6% 11%;\n  --secondary-darker: 240 6% 15%;\n  --secondary-foreground: 0 0% 98%;\n  --primary: 212 88% 51%;\n  --primary-darker: 212 88% 55%;\n  --primary-foreground: 0 0% 100%;\n  --mono: 0 0% 90%;\n  --mono-darker: 0 0% 100%;\n  --mono-foreground: 0 0% 0%;\n  --destructive: 349 86% 50%;\n  --destructive-darker: 349 86% 54%;\n  --destructive-foreground: 0 0% 100%;\n  --success: 137 89% 40%;\n  --success-darker: 137 72% 44%;\n  --success-foreground: 0 0% 100%;\n  --warning: 47 100% 48%;\n  --warning-darker: 47 100% 52%;\n  --warning-foreground: 0 0% 100%;\n  --info: 256 89% 52%;\n  --info-darker: 256 89% 56%;\n  --info-foreground: 0 0% 100%;\n\n  /** Base Styles **/\n  --border: 230 10% 14%;\n  --input: 230 10% 20%;\n  --ring: 230 10% 40%;\n}\n\n/** Theme Setup **/\n@theme inline {\n  /** Base Colors **/\n  --color-background: hsl(var(--background));\n  --color-foreground: hsl(var(--foreground));\n\n  --color-card: hsl(var(--card));\n  --color-card-foreground: hsl(var(--card-foreground));\n\n  --color-popover: hsl(var(--popover));\n  --color-popover-foreground: hsl(var(--popover-foreground));\n\n  /** Contextual Colors **/\n  --color-muted: hsl(var(--muted));\n  --color-muted-darker: hsl(var(--muted-darker));\n  --color-muted-foreground: hsl(var(--muted-foreground));\n\n  --color-accent: hsl(var(--accent));\n  --color-accent-darker: hsl(var(--accent-darker));\n  --color-accent-foreground: hsl(var(--accent-foreground));\n\n  --color-primary: hsl(var(--primary));\n  --color-primary-darker: hsl(var(--primary-darker));\n  --color-primary-foreground: hsl(var(--primary-foreground));\n\n  --color-secondary: hsl(var(--secondary));\n  --color-secondary-darker: hsl(var(--secondary-darker));\n  --color-secondary-foreground: hsl(var(--secondary-foreground));\n\n  --color-mono: hsl(var(--mono));\n  --color-mono-darker: hsl(var(--mono-darker));\n  --color-mono-foreground: hsl(var(--mono-foreground));\n\n  --color-destructive: hsl(var(--destructive));\n  --color-destructive-darker: hsl(var(--destructive-darker));\n  --color-destructive-foreground: hsl(var(--destructive-foreground));\n\n  --color-success: hsl(var(--success));\n  --color-success-darker: hsl(var(--success-darker));\n  --color-success-foreground: hsl(var(--success-foreground));\n\n  --color-warning: hsl(var(--warning));\n  --color-warning-darker: hsl(var(--warning-darker));\n  --color-warning-foreground: hsl(var(--warning-foreground));\n\n  --color-info: hsl(var(--info));\n  --color-info-darker: hsl(var(--info-darker));\n  --color-info-foreground: hsl(var(--info-foreground));\n\n  /** Base Styles **/\n  --color-border: hsl(var(--border));\n  --color-input: hsl(var(--input));\n  --color-ring: hsl(var(--ring));\n\n  --radius-xl: calc(var(--radius) + 4px);\n  --radius-lg: var(--radius);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-sm: calc(var(--radius) - 4px);\n\n  --animate-accordion-down: accordion-down 0.2s ease-out;\n  --animate-accordion-up: accordion-up 0.2s ease-out;\n  --animate-collapsible-down: collapsible-down 0.2s ease-out;\n  --animate-collapsible-up: collapsible-up 0.2s ease-out;\n  --animate-caret-blink: caret-blink 1.25s ease-out infinite;\n\n  @keyframes accordion-down {\n    from {\n      height: 0;\n    }\n    to {\n      height: var(--radix-accordion-content-height);\n    }\n  }\n  @keyframes accordion-up {\n    from {\n      height: var(--radix-accordion-content-height);\n    }\n    to {\n      height: 0;\n    }\n  }\n  @keyframes collapsible-down {\n    from {\n      height: 0;\n    }\n    to {\n      height: var(--radix-collapsible-content-height);\n    }\n  }\n  @keyframes collapsible-up {\n    from {\n      height: var(--radix-collapsible-content-height);\n    }\n    to {\n      height: 0;\n    }\n  }\n  @keyframes caret-blink {\n    0%,\n    70%,\n    100% {\n      opacity: 1;\n    }\n    20%,\n    50% {\n      opacity: 0;\n    }\n  }\n}\n\n/** Global Styles **/\n@layer base {\n  * {\n    @apply border-border;\n  }\n\n  *:focus-visible {\n    @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;\n  }\n}\n\n/** Custom Scrollbar **/\n@layer base {\n  * {\n    @apply border-border;\n  }\n\n  *:focus-visible {\n    @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;\n  }\n\n  ::-webkit-scrollbar {\n    width: 5px;\n  }\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: hsl(var(--border));\n    border-radius: 5px;\n  }\n  * {\n    scrollbar-width: thin;\n    scrollbar-color: hsl(var(--border)) transparent;\n  }\n}\n```\n\n### Setup Inter Font(Next.js)\n\nAdd the following code to your root layout file (`app/layout.tsx` or `src/app/layout.tsx`):\n\n```tsx\nimport { Inter } from 'next/font/google';\nimport { cn } from '@/utils/cn';\n\nconst inter = Inter({ subsets: ['latin'] });\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml className=\"h-full\"\u003e\n      \u003cbody\n        className={cn('flex h-full text-base antialiased', inter.className)}\n        style={{ overflow: 'visible !important', marginRight: '0 !important' }}\n      \u003e\n        {children}\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n\u003e [!TIP]\n\u003e For a modern and visually appealing design, we recommend using\n\u003e [Inter](https://fonts.google.com/specimen/Inter) as the default font in your\n\u003e CrudHunt project.\n\n### Add Lucide Icon Library\n\n```bash\nnpm i lucide\n```\n\n### Add Remix Icon Library\n\n```bash\nnpm i @remixicon/react\n```\n\n### Add Tailwind Merge and clsx Library\n\nTailwind Merge and clsx are used to merge and create class names for the components.\n\n```bash\nnpm i tailwind-merge\n```\n\n```bash\nnpm i clsx\n```\n\n### Add Dependency Files\n\nCopy the `utils.ts` file from `lib` directory in the source code to the `components/ui/` directory in your project.\n\n### Add Components\n\nExplore the [CrudHunt Components](/docs/accordion) and add the ones you need into your project.\n\n---\n\n# CRUDs\n\nThis guide will help you get started with CrudHunt's copy-and-paste components and CRUD modules in just a few minutes.\n\n## Prerequisites\n\nBefore you can install and use CrudHunt, make sure your project meets the following requirements:\n\n- **Next.js**: Version 15 or higher.\n- **React**: Version 19 or higher.\n- **TypeScript**: Version 5.7 or higher.\n- **Tailwind CSS**: Version 4 or higher.\n- **Prisma**: Version 6 or higher.\n- **PostgreSQL**: Version 16 or higher.\n\n## Database Setup\n\nChoose one of these options to set up your database:\n\n## 1. Prisma\n\nThe Prisma console allows you to manage your Prisma projects and databases through a web interface.\nThis guide will walk you through the registration process and how to use the console.\n\n### Sign Up for a Prisma Account\n\n- Visit [Prisma](https://www.prisma.io?via=crudhunt).\n- Click on the \"Get started for free\" button.\n- You can sign up using your email address or through a third-party service like GitHub or Google.\n- Follow the prompts to complete the registration process.\n\n### Create a New Project\n\n- Once logged in, you will be redirected to [Prisma Console](https://console.prisma.io?via=crudhunt).\n- Click on \"Create New Project.\"\n- Enter a project name.\n- Click on \"Get Started\" button for Prisma Postgres.\n- Click \"Create project\" button.\n\n![Create a New Project](https://crudhunt.com/media/docs/prisma-1.png)\n\n### Obtain Your Connection String\n\nA connection string is a string that your application uses to connect to a database. It contains information such as the database type, host, port, username, password, and database name. In the context of Prisma, the connection string is used to connect your Prisma Client to your database.\n\n- In the left sidebar, click on the \"Database\" menu.\n- Navigate to the \"Setup\" tab.\n- Select the \"Existing Project\" option.\n- Click on the \"Generate Database Credentials\" button.\n- Copy the generated connection string.\n- Open your project's `.env` file and add the connection string there.\n  ```bash\n  DATABASE_URL=\"prisma+postgres://accelerate.prisma-data.net/?api_key=your_api_key\"\n  ```\n\n![Generate Database Credentials](https://crudhunt.com/media/docs/prisma-2.png)\n\nHere's a breakdown of the Prisma connection string:\n\n```bash\nDATABASE_URL=\"prisma+postgres://username:password@host:port/database?api_key=your_api_key\"\n```\n\n- **prisma+postgres**: Specifies the database type and the protocol Prisma uses to connect.\n- **username**: The username for your database.\n- **password**: The password for your database.\n- **host**: The host address where your database is running.\n- **port**: The port number on which your database is listening.\n- **database**: The name of your database.\n- **api_key**: An optional parameter for additional authentication or configuration.\n\n### Deploy Your Model to the Database\n\nAfter setting up your Prisma project and obtaining your connection string, the next step is to deploy your Prisma schema to your database. This will create the necessary tables and relationships based on your schema.\n\n- Open your terminal.\n- Navigate to your project directory.\n- Run the following command to deploy your schema:\n  ```bash\n  npx prisma db push\n  ```\n  This command will read your `prisma/schema.prisma` file and apply the changes to your database.\n\n### Generate Prisma Client\n\nOnce your schema is deployed, you need to generate the Prisma Client. The Prisma Client is an auto-generated and type-safe query builder that you will use to interact with your database.\n\n- In your terminal, run the following command:\n  ```bash\n  npx prisma generate\n  ```\n  This command will generate the Prisma Client based on your schema and save it in the `node_modules/@prisma/client` directory.\n\n## 2. Supabase\n\nTo get started with Supabase, follow these steps to register for a free account and obtain your connection string.\n\n### Sign Up\n\n- Visit the [Supabase website](https://supabase.io/).\n- Click on the \"Start your project\" button.\n- Sign up using your email address, GitHub, or any other available method.\n\n### Create a New Project\n\n- After signing in, click on the \"New Project\" button.\n- Fill in the required details:\n  - **Project Name**: Choose a name for your project.\n  - **Organization**: Select or create an organization.\n  - **Database Password**: Set a strong password for your database.\n- Click on the \"Create new project\" button.\n\n![Create a New Project](https://crudhunt.com/media/docs/supabase-1.png)\n\n### Configure Database\n\n- Wait for the project to be initialized. This may take a few minutes.\n- Once the project is ready, you will be redirected to the project dashboard.\n\n### Get the Connection String\n\nA connection string is a string that your application uses to connect to a database. It contains information such as the database type, host, port, username, password, and database name. In the context of Prisma, the connection string is used to connect your Prisma Client to your database.\n\n- In the project dashboard, click \"Connect\" button at top.\n- Click on \"ORMs\" tab.\n- You will find your database connection string. It will look something like this:\n  ```bash\n  postgres://username:password@db.supabase.co:5432/dbname\n  ```\n- Replace `[YOUR-PASSWORD]` placeholder with your Supabase database password.\n\n![Get the Connection String](https://crudhunt.com/media/docs/supabase-2.png)\n\nHere's a breakdown of the Supabase connection string:\n\n- **postgres**: Indicates the database type.\n- **username**: Your database username.\n- **password**: Your database password.\n- **db.supabase.co**: The host address of your Supabase database.\n- **5432**: The default port for PostgreSQL databases.\n- **dbname**: The name of your database.\n\n### Set Up Environment Variables\n\n- Copy the connection string.\n- Open your project's `.env` file.\n- Add the following line to set the connection string as an environment variable:\n  ```bash\n  DATABASE_URL=postgres://username:password@db.supabase.co:5432/dbname\n  ```\n\n### Deploy Your Model to the Database\n\nAfter setting up your Prisma project and obtaining your connection string, the next step is to deploy your Prisma schema to your database. This will create the necessary tables and relationships based on your schema.\n\n- Open your terminal.\n- Navigate to your project directory.\n- Run the following command to deploy your schema:\n  ```bash\n  npx prisma db push\n  ```\n  This command will read your `prisma/schema.prisma` file and apply the changes to your database.\n\n### Generate Prisma Client\n\nOnce your schema is deployed, you need to generate the Prisma Client. The Prisma Client is an auto-generated and type-safe query builder that you will use to interact with your database.\n\n- In your terminal, run the following command:\n  ```bash\n  npx prisma generate\n  ```\n  This command will generate the Prisma Client based on your schema and save it in the `node_modules/@prisma/client` directory.\n\n## CRUDs Setup\n\nNow let's set up the CRUD modules:\n\n### Get CrudHunt Source Code\n\nCrudHunt's default Next.js app makes launching CRUD operations effortless.\nDownload the [CrudHunt](http://github.com/keenthemes/CrudHunt) source code or clone it via Git into your machine:\n\n```bash\ngit clone https://github.com/keenthemes/CrudHunt.git\n```\n\n### Copy Dependencies\n\nTo setup CRUDs into existing Next.js project copy these files from the source code to your project:\n\n- `lib/db.ts` → `lib/db.ts`\n- `lib/prisma.ts` → `lib/prisma.ts`\n\n### Add CRUD Modules\n\nCopy these directories maintaining the same structure:\n\n- `app/` - Contains CRUD route handlers and components.\n- `providers/` - Context providers for state management.\n- `hooks/` - Custom hooks for data operations.\n- `prisma/` - Database schema and migrations.\n- `public/` - Static assets.\n\n### Configure Environment\n\nMake sure your `.env` file includes:\n\n```bash\n# Database\nDATABASE_URL=\"your_database_connection_string\"\n\n# API\nNEXT_PUBLIC_API_URL=\"http://localhost:3000/api\"\n```\n\n### Run Migrations\n\n```bash\nnpx prisma migrate dev\n```\n\n### Generate Types\n\n```bash\nnpx prisma generate\n```\n\n### Start App\n\n```bash\nnpm run dev\n```\n\n\u003e CrudHunt components and CRUD modules can be easily integrated into any React project with minimal modifications.\n\nHappy coding with CrudHunt!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenthemes%2Fcrudhunt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeenthemes%2Fcrudhunt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenthemes%2Fcrudhunt/lists"}