{"id":21330979,"url":"https://github.com/alexanderuk82/nextjs-prisma-crud","last_synced_at":"2026-04-12T14:54:59.378Z","repository":{"id":198533008,"uuid":"700995697","full_name":"alexanderuk82/nextjs-prisma-crud","owner":"alexanderuk82","description":"TaskMaster is a dynamic task management component built with Next.js. Seamlessly create, update, or delete tasks with an intuitive user interface.","archived":false,"fork":false,"pushed_at":"2023-10-05T17:59:49.000Z","size":98,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T00:41:49.136Z","etag":null,"topics":["api","apicrud","nextjs","postgresql","prisma","reactjs","sqlite","swr","tailwindcss"],"latest_commit_sha":null,"homepage":"https://nextjs-prisma-crud-alexanderuk82.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexanderuk82.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-05T17:39:38.000Z","updated_at":"2023-10-05T18:02:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"7edbdb8f-9109-4d6b-b132-b71e9ea94f28","html_url":"https://github.com/alexanderuk82/nextjs-prisma-crud","commit_stats":null,"previous_names":["alexanderuk82/nextjs-prisma-crud"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexanderuk82/nextjs-prisma-crud","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderuk82%2Fnextjs-prisma-crud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderuk82%2Fnextjs-prisma-crud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderuk82%2Fnextjs-prisma-crud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderuk82%2Fnextjs-prisma-crud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexanderuk82","download_url":"https://codeload.github.com/alexanderuk82/nextjs-prisma-crud/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexanderuk82%2Fnextjs-prisma-crud/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278903008,"owners_count":26065786,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["api","apicrud","nextjs","postgresql","prisma","reactjs","sqlite","swr","tailwindcss"],"created_at":"2024-11-21T22:27:45.802Z","updated_at":"2025-10-08T06:48:47.078Z","avatar_url":"https://github.com/alexanderuk82.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TaskMaster: Next.js Task Management Component\n\nTaskMaster is a dynamic task management component built with Next.js. Seamlessly create, update, or delete tasks with an intuitive user interface. Integrating with an API backend, TaskMaster ensures data persistence and real-time synchronization. Whether you're managing daily chores or business operations, TaskMaster is designed to keep you organized and efficient.\n\n## Features\n\n- Create, update, and delete tasks\n- Real-time synchronization with API backend\n- Intuitive user interface\n- Built with Next.js and React\n- Data persistence with API backend\n\n## Installation\n\nTo install TaskMaster, run the following command:\n\n```bash\nnpm install taskmaster\n```\n\n### `NewTask` Component\n\nThis React component provides functionality to create or update tasks. It integrates with an API for data persistence.\n\n### Table of Contents\n\n- [Imports](#imports)\n- [Functional Component](#functional-component)\n- [State Management](#state-management)\n- [Data Fetching](#data-fetching)\n- [Form Submission](#form-submission)\n- [Render](#render)\n\n### Imports\n\n```javascript\nimport useSWR from 'swr';\nimport { useRouter } from 'next/navigation';\nimport { useState, useEffect } from 'react';\n```\n\n- `useSWR`: A React Hook library for remote data fetching.\n- `useRouter`: Next.js hook for routing.\n- `useState`, `useEffect`: React hooks for managing state and side effects.\n\n### Functional Component\n\n```javascript\nexport default function NewTask({ params }) {\n```\n\nThis component expects `params` as a prop which contains the `id` of the task. If `id` is present, it indicates an update operation.\n\n### State Management\n\n```javascript\nconst [title, setTitle] = useState('');\nconst [description, setDescription] = useState('');\n```\n\nThe component maintains the state for `title` and `description` using the `useState` hook.\n\n### Data Fetching\n\nThe component fetches task details if an `id` is provided.\n\n```javascript\nconst fetcher = (...args) =\u003e fetch(...args).then((res) =\u003e res.json());\nconst { data, error } = useSWR(`/api/tasks/${id}`, fetcher);\n```\n\nThe `useSWR` hook is used here with a custom `fetcher` function.\n\n### Form Submission\n\nThe form submission handles both the creation of a new task and the updating of an existing task.\n\n```javascript\nconst onSubmit = async (e) =\u003e {\n  // ... implementation\n};\n```\n\n### Render\n\nThe component renders a form which accepts the task title and description. Based on the presence of `id` in `params`, it either shows the \"Update task\" or \"Create task\" button. If `id` is present, a \"Delete task\" button is also displayed.\n\n## Starting the Project\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderuk82%2Fnextjs-prisma-crud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexanderuk82%2Fnextjs-prisma-crud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexanderuk82%2Fnextjs-prisma-crud/lists"}