LIVE DEMO: Watch on YouTube
PeepMonopoly is a full-stack application developed using Spring Boot 3 for the backend and React for the frontend. This README is divided into multiple sections for easier navigation.
- Project Overview
- Spring Boot Application
- PeeppeaReact Application
- Postman Ponus Points - https://documenter.getpostman.com/view/33305065/2sA3QwapMe
PeepMonopoly is designed to manage users and cash cards with functionalities encapsulated in various Java classes and React components.
PeepMonopoly
│
├── .gradle
├── .vscode
├── build
├── gradle
├── src
│ ├── main
│ │ ├── java
│ │ │ └── peep
│ │ │ └── xchange
│ │ │ ├── Users
│ │ │ │ ├── User.java
│ │ │ │ ├── UserController.java
│ │ │ │ ├── UserRepository.java
│ │ │ │ ├── UserService.java
│ │ │ ├── CashCard
│ │ │ │ ├── CashCard.java
│ │ │ │ ├── CashCardController.java
│ │ │ │ ├── CashCardRepository.java
│ │ │ ├── Config
│ │ │ │ ├── SecurityConfig.java
│ │ │ │ └── WebConfig.java
│ │ │ ├── CashCardApplication.java
│ │ └── resources
│ │ ├── static
│ │ │ └── index.html
│ │ ├── application.properties
│ │ └── schema.sql
│ └── test
│ ├── java
│ │ └── peep
│ │ └── xchange
│ │ └── Users
│ │ │ ├── UserControllerTests.java
│ │ │ ├──UserJsonTest.java
│ │ ├── CashCardApplicationTests.java
│ │ ├── CashCardJsonTest.java
│ └── resources
│ └── data.sql
└── peeppeareact
└── src
├── App.js
├── index.js
├── components
│ ├── CashCardDetail
│ │ ├── CashCardDetail.js
│ │ ├── CashCardDetail.css
│ │ └── CashCardDetailContainer.js
│ ├── CashCardForm
│ │ ├── CashCardForm.js
│ │ ├── CashCardForm.css
│ │ └── CashCardFormContainer.js
│ ├── CashCardList
│ │ ├── CashCardList.js
│ │ ├── CashCardList.css
│ │ └── CashCardListContainer.js
│ └── common
│ ├── Header.js
│ ├── Footer.js
│ ├── LoginForm.js
│ ├── Home.js
│ └── PrivateRoute.js
└── api
└── apiClient.js
Ensure you have the following installed:
- Java 21
- Node.js
- npm
- Gradle
-
Navigate to the project directory:
cd C:/Path/To/Code/PeepMonopoly
-
Clean and build the project:
./gradlew clean build
-
Run the application:
./gradlew bootRun
- Navigate to the React project directory:
cd src/main/peeppeareact
- Build the React application:
npm run Start
-
http://localhost:3000/
The Spring Boot application is the backend of the PeepMonopoly project. It manages users and cash cards, provides RESTful APIs, and integrates with the frontend React application.
- Represents a user entity.
- Contains fields for ID, username, password, and role.
- Includes a default constructor for JPA and another constructor with parameters for user details.
- Provides standard getters and setters for each field.
- Handles HTTP requests related to user operations.
- Includes methods for creating, reading, updating, and deleting users.
- Uses
UserService
to manage user data and operations.
- Provides database operations for users.
- Extends
CrudRepository
to leverage Spring Data JPA functionalities. - Includes a method to find users by username.
- Contains business logic related to users.
- Uses
UserRepository
for database operations andPasswordEncoder
for encoding passwords. - Provides methods for getting all users, getting a user by ID, creating, updating, and deleting users.
- Represents a cash card entity.
- Contains fields for ID, amount, and owner.
- Entry point for the Spring Boot application.
- Configures and runs the application.
- Handles HTTP requests related to cash card operations.
- Includes methods for creating, reading, updating, and deleting cash cards.
- Provides database operations for cash cards.
- Extends JpaRepository to leverage Spring Data JPA functionalities.
- Configures security settings for the application.
- Defines in-memory user details for testing purposes.
- Disables CSRF protection and enables basic authentication.
Test classes are located under the src/test
directory.
- CashCardApplicationTests.java: Contains tests for the CashCard application.
- CashCardJsonTest.java: Tests for JSON responses related to cash cards.
Resource files such as SQL schemas, JSON data, and application properties are located under the src/main/resources
and src/test/resources
directories.
Placeholder for the PeeppeaReact application details. This section will be expanded with specific information about the React frontend, its structure, and how to work with it.
Detailed setup instructions for the React application will be provided here.
Overview of the various components used in the React application.
Details about API integration and data handling.