Todo List Board with NextJS

Web App designed for managing tasks of varying difficulties, priority levels, and categories. This project serves as a practical exploration of Tailwind UI CSS and NextJS React Framework, with a specific focus on understanding server components and actions. Additionally, it utilizes Jest lib for testing and json-server to simulate an API, enabling seamless interaction between the front-end and back-end components.

Explore the docs »

todo-app-demo.mp4

Table of Contents

1. Features
2. Technologies Used
3. Skills Worked On
4. Getting Started
5. Usage
6. Gallery
7. Contributing
8. License
9. Contact

Features

• Task Management: Organize tasks based on different difficulties, priority levels, and categories.
• Clean Interface: Tailwind UI CSS favored a customization full of style features such as alerts, animations, transitions, giving visual feedback to users.
• Status Tracking: Keep track of changes in task status over time for improved productivity and workflow management.
• Server Components and Actions: Utilize NextJS React Framework to implement server components and actions for enhanced performance and functionality.
• API Simulation: Employ json-server to simulate an API, enabling seamless communication between front-end and back-end components.

Technologies Used

• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• NextJS React Framework: A React framework with server-side rendering capabilities for building fast and scalable web applications.
• json-server: A full fake REST API that enables rapid development and prototyping by simulating a fully functional backend.
• Jest: A JavaScript testing framework for unit testing. //TODO - ADD TESTS

Skills worked on

• Tailwind CSS Styling
• NextJS React Framework
• Server components
• Server Actions
• Client components
• Design UI creation
• Testing

Getting Started

1. Clone the Repository:

   git clone https://github.com/Shellyda/nextjs-todo-app.git

2. Install Dependencies:

   cd nextjs-todo-app
   yarn install

3. Start json-server:

   yarn server

4. Start the Development Server:

   yarn dev

5. Access the Application:
   • Open your web browser and navigate to http://localhost:3000 to access the Todo board.
   • Also, you can navigate to http://localhost:3001/todos to check todos' mocked REST API route response.

Usage

• Add Todo: Click on the form text entry at the bottom left of the page to add a new task. Fill in the necessary details such as title, difficulty, priority, and category color.
• Change Status: Use the provided options to change the status of a todo (e.g., Pending, Completed, Archived).
• Delete Todo: Click on the delete icon next to a task to remove it from the list.
• Alerts: Notice the alerts that give feedback on changes in the status of your todo.

Gallery

App with closed form input	App with open form input

Videos:

1. Add todo form animations:

form-input-animations-demo.mp4

2. Cards hover effect:

hover-effects-demo.mp4

3. Alerts feedbacks:

alerts-feedbacks-demo.mp4

Contributing

Contributions are welcome! Feel free to submit bug reports, feature requests, or pull requests to help improve this project.

License

This project is licensed under the MIT License.

Contact

For any inquiries or feedback, please contact sfsb2@cin.ufpe.br.

Enjoy organizing your tasks!