Aknathpanchal / todo-app

Project Name: Task Management

Description

This project is a task management website built using Next.js, TypeScript, CSS (with Tailwind CSS and Daisy UI), and MongoDB for the backend.

The website allows users to manage their tasks, track their progress, and view detailed information about each task. Users can create new tasks, mark them as "to do," "in progress," or "completed," and perform actions such as editing and deleting tasks.

Usage

1. Upon visiting the website, you will see a list of tasks.
2. To create a new task, click on the "Create Task" button and fill in the necessary details.
3. To update the status of a task, click on the appropriate status button (to do, in progress, completed).
4. To view detailed information about a task, click on the task card.
5. To edit a task, click on the "Edit" button within the task details page.
6. To delete a task, click on the "Delete" button within the task details page.

Technologies Used

• Next.js: A React framework for server-side rendering, providing a great developer experience.
• TypeScript : A statically-typed superset of JavaScript that enhances code reliability and scalability.
• Tailwind CSS: A utility-first CSS framework that helps in building modern and responsive user interfaces.
• MongoDB: A popular NoSQL database used for storing task-related data.
• React Icons: A library that provides a collection of customizable icons for your React applications.
• Daisy UI (Tailwind Plugin): A plugin for Tailwind CSS that adds additional utility classes and components.

Features

1. Task Management: The website allows users to manage tasks, including creating, editing, and deleting them.
2. Task Status: Each task can have one of three statuses - "To Do," "In Progress," or "Completed."
3. Task Details: Clicking on a task displays detailed information about the task, including its description.
4. User Interface: The project utilizes the Tailwind CSS framework and Daisy UI plugin to create an aesthetically pleasing and responsive user interface.
5. Iconography: React Icons library is used to add visually appealing icons throughout the application.

Setup Instructions

To set up and run the project locally, follow these steps:

1. Clone the repository: git clone <repository-url>
2. Navigate to the project directory: cd <project-directory>
3. Install dependencies: npm install
4. Create a .env file in the root directory and configure the MongoDB connection.

   MONGODB_URI=<your-mongodb-uri>
   

5. Start the development server: npm run dev
6. Open your browser and visit http://localhost:3000 to access the task management website.

Folder Structure

• /pages: Contains the Next.js pages for routing and rendering.
• /components: Contains reusable React components.
• /styles: Contains CSS styles for the project.

Additional Resources

If you encounter any issues or need further information, refer to the following resources:

• Next.js Documentation: https://nextjs.org/docs
• TypeScript Documentation: https://www.typescriptlang.org/docs
• Tailwind CSS Documentation: https://tailwindcss.com/docs
• MongoDB Documentation: https://docs.mongodb.com
• React Icons Documentation: https://react-icons.github.io/react-icons
• Daisy UI Documentation: https://daisyui.com/docs

Conclusion

This README provides an overview of your task management project, outlining the technologies, features, and setup instructions. It also offers additional resources for further exploration. Feel free to customize and expand upon this README to suit your project's specific needs. Good luck with your project!