Next.js Todo Tutorial Project

This is an open-source Next.js project bootstrapped with create-next-app. It serves as a tutorial for building a simple Todo application.

Getting Started

To get started with this project, follow the steps below.

Prerequisites

Ensure you have the following installed:

• Node.js (version 18.17.0 or higher)
• npm, yarn, pnpm, or bun

Installation

Clone the repository and install the dependencies:

git clone https://github.com/HoshangDEV/nextjs-todo-tutorial.git
cd nextjs-todo-tutorial
npm install
# or
yarn install
# or
pnpm install
# or
bun install

Running the Development Server

Start the development server:

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

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

Editing the Project

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

Features

• Add Todos: Create new tasks to keep track of your to-do list.
• Edit Todos: Modify existing tasks to update their details.
• Delete Todos: Remove tasks that are no longer needed.
• Responsive Design: Works on both desktop and mobile devices.

Font Optimization

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Demo

Check out the live demo of the application here.

Icons

This project uses icons from Lucide Icons to enhance the user interface. Ensure you have the necessary setup to use these icons.

Packages Used

• @clerk/nextjs: For integrating Clerk authentication with Next.js.
• @prisma/client: Prisma Client for database access.
• again: For retrying operations.
• lucide-react: A collection of simple, beautiful, and consistent icons for React.
• next: The Next.js framework.
• react: The React library for building user interfaces.
• react-dom: The React package for working with the DOM.
• daisyui: A Tailwind CSS component library.
• eslint: A tool for identifying and fixing problems in JavaScript code.
• tailwindcss: A utility-first CSS framework.
• typescript: A typed superset of JavaScript that compiles to plain JavaScript.

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!

Video Tutorial

For a step-by-step video tutorial, check out our YouTube video.

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 our Next.js deployment documentation for more details.

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a pull request.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Contact

For any questions or feedback, please reach out to the project maintainers at contact@hoshang.dev.