https://github.com/shellyda/nextjs-todo-app
Todo List Board Web App, managing tasks by different difficulties, priority levels and categories, customizable cards in the interface and tracking changes in status. Project to study Tailwind UI CSS and NextJS React Framework, especially the concept of server components and actions.
https://github.com/shellyda/nextjs-todo-app
frontend javascript json-server next nextjs react reactjs serveractions servercomponent tailwindcss todoapp todolist typescript ui-components webapp
Last synced: 2 months ago
JSON representation
Todo List Board Web App, managing tasks by different difficulties, priority levels and categories, customizable cards in the interface and tracking changes in status. Project to study Tailwind UI CSS and NextJS React Framework, especially the concept of server components and actions.
- Host: GitHub
- URL: https://github.com/shellyda/nextjs-todo-app
- Owner: Shellyda
- License: mit
- Created: 2024-03-27T15:55:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-04T17:32:35.000Z (over 1 year ago)
- Last Synced: 2025-05-14T18:11:34.151Z (5 months ago)
- Topics: frontend, javascript, json-server, next, nextjs, react, reactjs, serveractions, servercomponent, tailwindcss, todoapp, todolist, typescript, ui-components, webapp
- Language: TypeScript
- Homepage:
- Size: 261 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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 »
https://github.com/Shellyda/nextjs-todo-app/assets/69990297/eaa6db61-5da6-4f95-99f8-e52e20c0a96d
Table of Contents
- Features
- Technologies Used
- Skills Worked On
- Getting Started
- Usage
- Gallery
- Contributing
- License
- 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](https://tailwindcss.com/)**: A utility-first CSS framework for rapid UI development.
- **[NextJS React Framework](https://nextjs.org/)**: A React framework with server-side rendering capabilities for building fast and scalable web applications.
- **[json-server](https://github.com/typicode/json-server)**: A full fake REST API that enables rapid development and prototyping by simulating a fully functional backend.
- **[Jest](https://jestjs.io/)**: 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**:
```bash
git clone https://github.com/Shellyda/nextjs-todo-app.git
```
2. **Install Dependencies**:
```bash
cd nextjs-todo-app
yarn install
```
3. **Start json-server**:
```bash
yarn server
```
4. **Start the Development Server**:
```bash
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:
https://github.com/Shellyda/nextjs-todo-app/assets/69990297/d0ef7d0e-8626-4cad-9578-eb8aa5568639
#### 2. Cards hover effect:
https://github.com/Shellyda/nextjs-todo-app/assets/69990297/3fbf979e-e52d-41d6-85fc-0bcdd3537464
#### 3. Alerts feedbacks:
https://github.com/Shellyda/nextjs-todo-app/assets/69990297/4ed285c6-f0b6-4f5e-858c-26bcfe7a7992
## 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](LICENSE).
## Contact
For any inquiries or feedback, please contact [sfsb2@cin.ufpe.br](mailto:sfsb2@cin.ufpe.br).
Enjoy organizing your tasks!