https://github.com/nikkiaung/angular-spring-boot-shopping
https://github.com/nikkiaung/angular-spring-boot-shopping
angular bootsrap5 dependency-injection hibernate-jpa html-css java jwt-authentication mysql-database object-oriented-programming spring-boot typescript
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nikkiaung/angular-spring-boot-shopping
- Owner: NikkiAung
- Created: 2025-12-14T07:09:35.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-01-11T02:15:15.000Z (6 months ago)
- Last Synced: 2026-01-11T10:16:05.606Z (6 months ago)
- Topics: angular, bootsrap5, dependency-injection, hibernate-jpa, html-css, java, jwt-authentication, mysql-database, object-oriented-programming, spring-boot, typescript
- Language: Java
- Homepage:
- Size: 170 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spring Boot + Angular Shopping
A full-stack shopping app split into two projects:
- `shop/`: Spring Boot REST API with JWT auth and MySQL persistence.
- `shoppy/`: Angular UI for shopping and basic admin management.
The backend serves data and static images; the frontend consumes the API and manages auth via JWT stored in `localStorage`.
## Tech Stack
Backend
- Java + Spring Boot
- Spring Web, Spring Security, Spring Data JPA
- MySQL
- JWT authentication
Frontend
- Angular (standalone components, Angular Router)
- TypeScript, RxJS
## Project Structure
```
.
├── shop/ # Spring Boot API
│ ├── src/main/java/... # Controllers, services, models, security
│ ├── src/main/resources
│ │ ├── application.properties
│ │ └── static/images # Uploaded product/category images
│ └── pom.xml
├── shoppy/ # Angular app
│ ├── src/app # Components, routes, services
│ ├── src/styles.css
│ └── package.json
└── README.md
```
## Backend Overview (`shop/`)
Key layers:
- Controllers: REST endpoints for public API (`/api/*`) and admin API (`/admin/*`).
- Services + Impl: business logic and persistence orchestration.
- Repositories: Spring Data JPA repositories for CRUD queries.
- Models: JPA entities (`Category`, `Subcat`, `Childcat`, `Tag`, `Product`, `Order`, `OrderItem`, `AppUser`, `Role`).
- Security: JWT filter + user details service + security config.
Important classes:
- `com.coder.shop.controller.ApiController` handles public endpoints:
- `GET /api/cats`, `/api/subcats`, `/api/childcats`, `/api/tags`, `/api/products`
- `POST /api/login`, `/api/register`
- `POST /api/orders` (requires JWT)
- `POST /api/myOrders` (requires JWT)
- `com.coder.shop.controller.*Controller` under `/admin/*` for CRUD of categories, products, tags, roles, users, etc.
- `com.coder.shop.security.*` for JWT parsing and auth integration.
- `com.coder.shop.services.ImageService` saves uploads to `src/main/resources/static/images`.
Config:
- `server.port=3000`
- MySQL DB: `jdbc:mysql://localhost:3306/shoppy`
- JWT secret + expiration set in `application.properties`
Note: The JWT secret in `application.properties` is committed; for real use, move it to environment variables.
## Frontend Overview (`shoppy/`)
Routing is defined in `src/app/app.routes.ts` with pages for:
- Home, login, register, cart, order history
- Admin sections for categories, subcategories, child categories, tags, products, roles, users
API integration:
- `src/app/apiservice.ts` for public endpoints (`/api/*`)
- Feature services under `src/app/**/` for admin endpoints (`/admin/*`)
Auth:
- `src/app/auth.interceptor.ts` injects `Authorization: Bearer ` for API calls
- `src/app/login/login.ts` stores JWT in `localStorage`
Base URLs are defined in `src/app/utils/Vary.ts`:
- API base: `http://localhost:3000/api`
- Admin base: `http://localhost:3000/admin/...`
## Local Development
### 1) Database
Create a MySQL database named `shoppy`.
If needed, update credentials in:
- `shop/src/main/resources/application.properties`
### 2) Backend (Spring Boot)
From `shop/`:
```
./mvnw spring-boot:run
```
The API will run on `http://localhost:3000`.
### 3) Frontend (Angular)
From `shoppy/`:
```
npm install
npm start
```
The Angular dev server will run on `http://localhost:4200`.
## CORS / Port Notes
Backend controllers use `@CrossOrigin(origins = "http://localhost:4000")` while the Angular dev server defaults to `http://localhost:4200`. For local development, either:
- Change Angular to run on port 4000, or
- Update CORS origins in the backend to allow 4200.
## API Summary
Public endpoints (`/api/*`):
- `GET /api/cats`, `/api/subcats`, `/api/childcats`, `/api/tags`, `/api/products`
- `POST /api/login`
- `POST /api/register`
- `POST /api/orders` (JWT required)
- `POST /api/myOrders` (JWT required)
Admin endpoints (`/admin/*`):
- CRUD for categories, subcategories, child categories, tags, products, roles, users
Images:
- Uploaded images are available at `http://localhost:3000/images/`
## Testing
Backend: no explicit test setup found in this repo.
Frontend: Angular uses `ng test` (Vitest in `package.json`).
## Known Caveats
- `ProductImpl.add` throws `UnsupportedOperationException` and is not implemented; product creation may fail unless updated.
- JWT secret is committed to source; consider moving to environment variables.
## Suggested Next Steps
- Implement `ProductService.add` to allow product creation.
- Align CORS origins with your frontend port.
- Move DB credentials and JWT secret to environment variables.