Todo-Management-System 📚

This is a full-stack web application developed using React and Spring Boot, designed to efficiently manage to-do tasks. The To-Do Management System empowers users to seamlessly add, update, and delete their to-do items.

This system ensures smooth communication between the frontend and backend, delivering a user-friendly interface for efficient student details management. Additionally, it offers user registration and login features, ensuring that only users with the correct roles can perform actions like updating and deleting to-do items.

Tech Stack 🖥

Client: React, Bootstrap, React Router, Axios

Server: Spring Boot, Spring JPA, Spring Web, Spring Security, MySQL, JWT Authentication

Key Features 🎇

• Comprehensive Task Management: Users can efficiently manage their to-do tasks through a feature-rich interface. They can easily add new tasks, update existing ones, and mark tasks as completed or delete them. This robust task management capability ensures users can stay organized and on top of their responsibilities.

• Secure User Authentication: The application offers a secure user authentication system, allowing individuals to register their accounts and log in securely. This authentication system ensures that each user has a personalized experience and data privacy.

• Role-Based Access Control: To enhance security and control, the app employs role-based access control. Users are assigned specific roles, and access to various features is determined by these roles. For example, only users with certain roles can delete or update to-do items, ensuring that sensitive data remains protected.

• Efficient Communication: The app establishes seamless communication between the frontend and backend components. This efficient communication ensures that data updates and interactions are near-instantaneous, providing users with a smooth and responsive experience.

• Intuitive User Interface: The user interface is carefully designed to be intuitive and user-friendly. It incorporates best practices in user experience (UX) design, making it easy for users to navigate the application, manage tasks, and access relevant information effortlessly.

• Customizable Task Categories: Users can organize their tasks into different categories or lists, helping them categorize and prioritize their to-do items based on their needs and preferences.

• User Registration and Profile Management: The system allows users to register their accounts and manage their profiles, including updating their personal information and profile pictures. This feature adds a personal touch to the user experience.

• Task Notifications and Reminders: The application can provide task notifications and reminders, ensuring that users stay on top of their tasks and deadlines. This functionality can be customized to match the user's preferences.

• Cross-Platform Compatibility: The app is designed to work seamlessly across various devices and platforms, including desktop computers, tablets, and mobile phones, providing users with flexibility in how they access and manage their tasks.

Screenshots 🎞

Instructions 🕶

Prerequisites:

Before running this application, ensure that you have the following prerequisites in place:

• Java Development Kit (JDK) 8 or above
• Node.js and npm (Node Package Manager)
• MySQL database with a designated schema named "student_management_system"

Setup:

First clone this repository.

$ git clone https://github.com/LuisSalas94/Todo-Management-System

Set Up the MySQL Database:

• Create a MySQL database named "todo_management_system".
• Set the accurate values for spring.datasource.url, spring.datasource.username, and spring.datasource.password.
• Build and Run the Spring Boot Backend:
• Open a terminal and navigate to the springboot-backend folder.
• Build the backend application using Maven: Execute the command ./mvnw clean package.
• Run the backend application: Use the command ./mvnw spring-boot:run.
• Install Dependencies and Run the React Frontend:
• Open another terminal and go to the react-frontend folder.
• Install dependencies using npm: Run npm install.
• Start the React development server: Execute npm start.
• Access the Application:
• Open your web browser and enter http://localhost:3000 to access the React frontend and interact with the application.

With these steps, you'll have the necessary environment set up to run the Spring Boot backend and the React frontend of the application locally.

Author 👤

• GitHub: @LuisSalas94
• LinkedIn: Fernando Salas
• Medium: Fernando Salas
• Portfolio: Link

Contributing 🤝

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

License 📝

This project is MIT licensed.