https://github.com/krispyarena/todo-java-react
A full-stack Todo App built with React and Spring Boot. It includes authentication, CRUD operations, state management with Context API, and secure API communication using JWT and Spring Security.
https://github.com/krispyarena/todo-java-react
Last synced: 7 months ago
JSON representation
A full-stack Todo App built with React and Spring Boot. It includes authentication, CRUD operations, state management with Context API, and secure API communication using JWT and Spring Security.
- Host: GitHub
- URL: https://github.com/krispyarena/todo-java-react
- Owner: krispyarena
- Created: 2024-07-13T14:21:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-15T17:25:39.000Z (about 1 year ago)
- Last Synced: 2025-01-21T10:51:17.925Z (9 months ago)
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Java-React Todo Management App
Welcome to the React Todo Management App project! This README file will guide you through the structure, setup, and usage of the project. This application is developed using React and Spring Boot, providing a robust platform for managing your todo tasks efficiently.
## Project Overview
The React Todo Management App is a comprehensive web application that includes the following key features:
- User Authentication
- Task Management (CRUD operations)
- Responsive Design with Bootstrap
- State Management with Context API
- Routing with React Router
- Integration with Spring Boot REST API
## Features
### CRUD Operations
- Implement CRUD operations for managing tasks.
### User Authentication
- Integrate a login component.
- Add hardcoded authentication for demonstration purposes.
- Conditionally display messages in the login component.
### Routing
- Use React Router Dom for navigation between components.
- Protect secure routes using authenticated routes.
### User Interface
- Create header, footer, and logout components.
- Add Bootstrap to the frontend application for a responsive design.
- Refactor components into individual JavaScript modules.
### State Management
- Share state with multiple components using Auth Context.
- Update state and verify updates through Auth Context.
- Set `isAuthenticated` into React State via Auth Context.
### Spring Boot Integration
- Set up Todo REST API Project for React Full Stack Application.
- Call Spring Boot Hello World REST API from React Hello World Component.
- Enable CORS Requests for Spring Boot REST API.
- Invoke Spring Boot Hello World Bean & Path Param REST API from React.
- Refactor Spring Boot REST API Invocation Code to New Module.
- Follow Axios Best Practices in Spring Boot REST API.
- Create Retrieve Todos Spring Boot REST API Get Method.
- Display Todos from Spring Boot REST API in React App.
- Create Retrieve Todo and Delete Todo Spring Boot REST API Methods.
- Create Todo React Component to display Todo Page.
- Add Formik and Moment Libraries to Display Todo React Component.
- Add Validation to Todo React Component using Formik.
- Add Update Todo and Create Todo REST API to Spring Boot Backend API.
- Add Update Feature to React Frontend.
- Add Create New Todo Feature to React Frontend.
- Secure Spring Boot REST API with Spring Security.
- Add Authorization Header in React to Spring Boot REST API calls.
- Configure Spring Security to allow all Options Requests.
- Use async and await to invoke Basic Auth API.
- Set Basic Auth Token into Auth Context.
- Set up Axios Interceptor to add Authorization Header.
- Debug Problems with Basic Auth and Spring Boot.
- Integrate Spring Security JWT REST API with React Frontend.
- Debug Problems with JWT Auth and Spring Boot.
## Getting Started
### Prerequisites
- Node.js
- npm or yarn
- Java Development Kit (JDK)
- Maven
- Spring Boot
### Installation
1. **Clone the repository**
```sh
git clone https://github.com/krispyarena/todo-java-react.git
cd todo-java-react
```
2. **Install dependencies**
```sh
npm install
```
3. **Run the React application**
```sh
npm start
```
4. **Run the Spring Boot application**
```sh
mvn spring-boot:run
```
### Usage
1. Navigate to the application URL in your browser.
2. Register a new user or log in with existing credentials.
3. Explore the various features such as adding tasks, managing tasks, and more.
## Resources
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [React Router Documentation](https://reactrouter.com/web/guides/quick-start)
- [Bootstrap Documentation](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
- [Spring Boot Documentation](https://spring.io/projects/spring-boot)
- [Spring Security Documentation](https://spring.io/projects/spring-security)
## How Can You Help Us?
Your contributions are always welcome! Feel free to fork this project, submit issues, and create pull requests.
## License
This project is licensed under the MIT License. See the LICENSE file for details.
## Contact
For any inquiries or feedback, please contact at krispy.arena@gmail.com or create an issue on this repository.