https://github.com/alexanderuk82/nextjs-prisma-crud
TaskMaster is a dynamic task management component built with Next.js. Seamlessly create, update, or delete tasks with an intuitive user interface.
https://github.com/alexanderuk82/nextjs-prisma-crud
api apicrud nextjs postgresql prisma reactjs sqlite swr tailwindcss
Last synced: 2 months ago
JSON representation
TaskMaster is a dynamic task management component built with Next.js. Seamlessly create, update, or delete tasks with an intuitive user interface.
- Host: GitHub
- URL: https://github.com/alexanderuk82/nextjs-prisma-crud
- Owner: alexanderuk82
- Created: 2023-10-05T17:39:38.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-05T17:59:49.000Z (over 2 years ago)
- Last Synced: 2025-03-16T00:41:49.136Z (over 1 year ago)
- Topics: api, apicrud, nextjs, postgresql, prisma, reactjs, sqlite, swr, tailwindcss
- Language: JavaScript
- Homepage: https://nextjs-prisma-crud-alexanderuk82.vercel.app/
- Size: 95.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TaskMaster: Next.js Task Management Component
TaskMaster 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.
## Features
- Create, update, and delete tasks
- Real-time synchronization with API backend
- Intuitive user interface
- Built with Next.js and React
- Data persistence with API backend
## Installation
To install TaskMaster, run the following command:
```bash
npm install taskmaster
```
### `NewTask` Component
This React component provides functionality to create or update tasks. It integrates with an API for data persistence.
### Table of Contents
- [Imports](#imports)
- [Functional Component](#functional-component)
- [State Management](#state-management)
- [Data Fetching](#data-fetching)
- [Form Submission](#form-submission)
- [Render](#render)
### Imports
```javascript
import useSWR from 'swr';
import { useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
```
- `useSWR`: A React Hook library for remote data fetching.
- `useRouter`: Next.js hook for routing.
- `useState`, `useEffect`: React hooks for managing state and side effects.
### Functional Component
```javascript
export default function NewTask({ params }) {
```
This component expects `params` as a prop which contains the `id` of the task. If `id` is present, it indicates an update operation.
### State Management
```javascript
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
```
The component maintains the state for `title` and `description` using the `useState` hook.
### Data Fetching
The component fetches task details if an `id` is provided.
```javascript
const fetcher = (...args) => fetch(...args).then((res) => res.json());
const { data, error } = useSWR(`/api/tasks/${id}`, fetcher);
```
The `useSWR` hook is used here with a custom `fetcher` function.
### Form Submission
The form submission handles both the creation of a new task and the updating of an existing task.
```javascript
const onSubmit = async (e) => {
// ... implementation
};
```
### Render
The 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.
## Starting the Project
This 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).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.