Add e-commerce starter (React frontend + Spring Boot backend)#1
Add e-commerce starter (React frontend + Spring Boot backend)#1ramcharan032785-code wants to merge 1 commit into
Conversation
📝 WalkthroughWalkthroughA new full-stack e-commerce project initialized with React frontend (Vite), Spring Boot backend, and MySQL database. Includes project configuration, backend REST API with product endpoint, frontend UI for product browsing, and setup documentation. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
frontend/src/App.jsx (1)
28-45: Add request cancellation inuseEffectto prevent stale updates.Line 31 fetch should be abortable, and the catch branch should ignore abort errors.
💡 Proposed fix
useEffect(() => { + const controller = new AbortController(); const loadProducts = async () => { try { - const response = await fetch('/api/products'); + const response = await fetch('/api/products', { signal: controller.signal }); if (!response.ok) { throw new Error('Failed to load products'); } const data = await response.json(); setProducts(data); setStatus(''); } catch (error) { + if (error?.name === 'AbortError') return; setProducts(fallbackProducts); setStatus('Showing demo products. Connect the Spring Boot API for live data.'); } }; loadProducts(); + return () => controller.abort(); }, []);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/App.jsx` around lines 28 - 45, The useEffect's async loadProducts should use an AbortController so the fetch('/api/products') call is abortable: create an AbortController, pass controller.signal to fetch in loadProducts, and call controller.abort() in the effect cleanup; in the catch block ignore errors caused by abort (check error.name === 'AbortError') and only fallback to setProducts(fallbackProducts) / setStatus('Showing demo products...') for non-abort failures; ensure references: useEffect, loadProducts, fetch, setProducts, setStatus so the changes are applied in the same function.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@backend/src/main/java/com/example/ecom/Product.java`:
- Line 3: The Product record currently uses a primitive double for price which
must be changed to java.math.BigDecimal to avoid floating-point rounding errors;
update the record signature to Product(Long id, String name, String description,
BigDecimal price) and add the import for BigDecimal, then update all call sites
that construct Product instances (referenced in ProductController) to pass
BigDecimal values (prefer BigDecimal.valueOf(long/double) or new
BigDecimal(String) for incoming strings) instead of raw doubles and adjust any
JSON (de)serialization or DTO mapping to handle BigDecimal consistently.
In `@backend/src/main/resources/application.properties`:
- Around line 8-9: The main application.properties should not enable schema
mutation or SQL logging by default; remove or disable
spring.jpa.hibernate.ddl-auto=update and spring.jpa.show-sql=true from
application.properties and instead place them into a development-only profile
file (create application-dev.properties) so local dev can use
spring.jpa.hibernate.ddl-auto=update and spring.jpa.show-sql=true while
production uses safe defaults (omit ddl-auto or set to validate and set
show-sql=false); update any Spring active profile documentation or startup
configs to reference the "dev" profile if needed.
- Around line 3-6: The properties file currently contains hardcoded DB
credentials (spring.datasource.url, spring.datasource.username,
spring.datasource.password, spring.datasource.driver-class-name); replace these
literal values with environment-backed property placeholders so the app reads
DB_URL/DB_USER/DB_PASSWORD (or your secret manager keys) at runtime instead of
committing secrets. Update the properties to reference
environment/config-server/Vault variables (e.g., use Spring property
placeholders for DB URL, user, and password) and remove any default plaintext
password; ensure any local dev defaults live outside source control (e.g., in a
.env or CI/CD secret) and document the required env var names.
In `@frontend/src/styles.css`:
- Line 2: The font-family declaration in frontend/src/styles.css is violating
stylelint's font-family-name-quotes rule by quoting Inter; update the
font-family rule (the line containing "font-family: 'Inter', system-ui,
sans-serif;") to remove the quotes around Inter so it reads an unquoted
identifier (e.g., font-family: Inter, system-ui, sans-serif;), preserving the
rest of the stack and formatting.
In `@README.md`:
- Around line 30-31: The README's DB setup grants are too broad; instead of
"GRANT ALL PRIVILEGES ON ecom_db.* TO 'ecom_user'@'localhost';" restrict
privileges for the application user 'ecom_user'@'localhost' to only the needed
operations (e.g., SELECT, INSERT, UPDATE, DELETE, CREATE, INDEX, ALTER) on
ecom_db.*; update the example SQL in README.md to replace the ALL PRIVILEGES
grant with a least-privilege GRANT for those specific privileges and include a
short comment explaining why least privilege is recommended.
- Around line 17-20: The README's backend run instruction references a missing
Maven Wrapper (./mvnw); either add and commit the Maven Wrapper scripts to the
repo or update the README to use the global Maven command (mvn spring-boot:run)
and include a short note about requiring Maven installed; update the command
text where the current "./mvnw spring-boot:run" example appears so it matches
whichever approach you choose.
---
Nitpick comments:
In `@frontend/src/App.jsx`:
- Around line 28-45: The useEffect's async loadProducts should use an
AbortController so the fetch('/api/products') call is abortable: create an
AbortController, pass controller.signal to fetch in loadProducts, and call
controller.abort() in the effect cleanup; in the catch block ignore errors
caused by abort (check error.name === 'AbortError') and only fallback to
setProducts(fallbackProducts) / setStatus('Showing demo products...') for
non-abort failures; ensure references: useEffect, loadProducts, fetch,
setProducts, setStatus so the changes are applied in the same function.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
.gitignoreREADME.mdbackend/pom.xmlbackend/src/main/java/com/example/ecom/EcomApplication.javabackend/src/main/java/com/example/ecom/Product.javabackend/src/main/java/com/example/ecom/ProductController.javabackend/src/main/resources/application.propertiesfrontend/index.htmlfrontend/package.jsonfrontend/src/App.jsxfrontend/src/main.jsxfrontend/src/styles.cssfrontend/vite.config.js
| @@ -0,0 +1,3 @@ | |||
| package com.example.ecom; | |||
|
|
|||
| public record Product(Long id, String name, String description, double price) {} | |||
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, locate the Product.java file and examine its current state
find . -name "Product.java" -type f | head -20Repository: ramcharan032785-code/Codex
Length of output: 123
🏁 Script executed:
# Search for all Product constructor instantiations
rg -nP --type=java '\bnew\s+Product\s*\(' -B2 -A2Repository: ramcharan032785-code/Codex
Length of output: 910
🏁 Script executed:
# Check for any Product-related tests or serialization configs
rg -nP --type=java 'Product.*price|price.*Product' -B1 -A1 | head -50Repository: ramcharan032785-code/Codex
Length of output: 259
🏁 Script executed:
# Look for any BigDecimal usage patterns already in the codebase
rg -nP --type=java 'BigDecimal' | head -20Repository: ramcharan032785-code/Codex
Length of output: 52
🏁 Script executed:
# Look for Product tests
find . -name "*ProductTest*" -o -name "*Test*Product*" | grep -i testRepository: ramcharan032785-code/Codex
Length of output: 52
🏁 Script executed:
# Check if Product is a JPA entity or just a record
cat -n ./backend/src/main/java/com/example/ecom/Product.javaRepository: ramcharan032785-code/Codex
Length of output: 198
🏁 Script executed:
# Check for any price-related operations or calculations in the codebase
rg -nP --type=java '\bprice\b' -B1 -A1 | head -60Repository: ramcharan032785-code/Codex
Length of output: 259
Use BigDecimal instead of double for price to prevent rounding errors in financial calculations.
The e-commerce domain requires precise monetary handling. Using double introduces floating-point rounding drift that will cause discrepancies in cart totals, taxes, and discounts. This must be fixed at the model level.
Three call sites in ProductController.java (lines 15–17) will also need updates to wrap price values with BigDecimal constructors.
Proposed fix
+import java.math.BigDecimal;
-
-public record Product(Long id, String name, String description, double price) {}
+public record Product(Long id, String name, String description, BigDecimal price) {}Update call sites in ProductController.java:
-new Product(1L, "Lunar Running Shoes", "Lightweight sneakers with responsive cushioning.", 129.00)
+new Product(1L, "Lunar Running Shoes", "Lightweight sneakers with responsive cushioning.", new BigDecimal("129.00"))📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| public record Product(Long id, String name, String description, double price) {} | |
| import java.math.BigDecimal; | |
| public record Product(Long id, String name, String description, BigDecimal price) {} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/src/main/java/com/example/ecom/Product.java` at line 3, The Product
record currently uses a primitive double for price which must be changed to
java.math.BigDecimal to avoid floating-point rounding errors; update the record
signature to Product(Long id, String name, String description, BigDecimal price)
and add the import for BigDecimal, then update all call sites that construct
Product instances (referenced in ProductController) to pass BigDecimal values
(prefer BigDecimal.valueOf(long/double) or new BigDecimal(String) for incoming
strings) instead of raw doubles and adjust any JSON (de)serialization or DTO
mapping to handle BigDecimal consistently.
| spring.datasource.url=jdbc:mysql://localhost:3306/ecom_db | ||
| spring.datasource.username=ecom_user | ||
| spring.datasource.password=change_me | ||
| spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver |
There was a problem hiding this comment.
Do not commit live datasource credentials in shared config.
These values should come from environment variables/secrets, not source-controlled defaults.
🔐 Suggested change
-spring.datasource.url=jdbc:mysql://localhost:3306/ecom_db
-spring.datasource.username=ecom_user
-spring.datasource.password=change_me
+spring.datasource.url=${DB_URL:jdbc:mysql://localhost:3306/ecom_db}
+spring.datasource.username=${DB_USERNAME:ecom_user}
+spring.datasource.password=${DB_PASSWORD}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| spring.datasource.url=jdbc:mysql://localhost:3306/ecom_db | |
| spring.datasource.username=ecom_user | |
| spring.datasource.password=change_me | |
| spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver | |
| spring.datasource.url=${DB_URL:jdbc:mysql://localhost:3306/ecom_db} | |
| spring.datasource.username=${DB_USERNAME:ecom_user} | |
| spring.datasource.password=${DB_PASSWORD} | |
| spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/src/main/resources/application.properties` around lines 3 - 6, The
properties file currently contains hardcoded DB credentials
(spring.datasource.url, spring.datasource.username, spring.datasource.password,
spring.datasource.driver-class-name); replace these literal values with
environment-backed property placeholders so the app reads
DB_URL/DB_USER/DB_PASSWORD (or your secret manager keys) at runtime instead of
committing secrets. Update the properties to reference
environment/config-server/Vault variables (e.g., use Spring property
placeholders for DB URL, user, and password) and remove any default plaintext
password; ensure any local dev defaults live outside source control (e.g., in a
.env or CI/CD secret) and document the required env var names.
| spring.jpa.hibernate.ddl-auto=update | ||
| spring.jpa.show-sql=true |
There was a problem hiding this comment.
Avoid schema mutation and SQL logging as shared defaults.
ddl-auto=update and show-sql=true are unsafe defaults for non-dev environments and can cause data integrity/logging risks.
🛠️ Suggested change
-spring.jpa.hibernate.ddl-auto=update
-spring.jpa.show-sql=true
+spring.jpa.hibernate.ddl-auto=validate
+spring.jpa.show-sql=falseUse a dedicated application-dev.properties profile if you want update/show-sql during local development only.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@backend/src/main/resources/application.properties` around lines 8 - 9, The
main application.properties should not enable schema mutation or SQL logging by
default; remove or disable spring.jpa.hibernate.ddl-auto=update and
spring.jpa.show-sql=true from application.properties and instead place them into
a development-only profile file (create application-dev.properties) so local dev
can use spring.jpa.hibernate.ddl-auto=update and spring.jpa.show-sql=true while
production uses safe defaults (omit ddl-auto or set to validate and set
show-sql=false); update any Spring active profile documentation or startup
configs to reference the "dev" profile if needed.
| @@ -0,0 +1,191 @@ | |||
| :root { | |||
| font-family: 'Inter', system-ui, sans-serif; | |||
There was a problem hiding this comment.
Fix Stylelint violation for font-family quoting.
Line 2 should not quote Inter for the active font-family-name-quotes rule.
💡 Proposed fix
- font-family: 'Inter', system-ui, sans-serif;
+ font-family: Inter, system-ui, sans-serif;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| font-family: 'Inter', system-ui, sans-serif; | |
| font-family: Inter, system-ui, sans-serif; |
🧰 Tools
🪛 Stylelint (17.3.0)
[error] 2-2: Unexpected quotes around "Inter" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/styles.css` at line 2, The font-family declaration in
frontend/src/styles.css is violating stylelint's font-family-name-quotes rule by
quoting Inter; update the font-family rule (the line containing "font-family:
'Inter', system-ui, sans-serif;") to remove the quotes around Inter so it reads
an unquoted identifier (e.g., font-family: Inter, system-ui, sans-serif;),
preserving the rest of the stack and formatting.
| ```bash | ||
| cd backend | ||
| ./mvnw spring-boot:run | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Checking for Maven wrapper scripts..."
fd -HI '^mvnw$'
fd -HI '^mvnw\.cmd$'Repository: ramcharan032785-code/Codex
Length of output: 107
Either commit Maven Wrapper scripts or update the backend setup command in the documentation.
The referenced ./mvnw command in Line 19 does not exist in the repository. New contributors following these instructions will encounter a "command not found" error. Either commit the Maven Wrapper scripts to the repository or provide an alternative command (e.g., mvn spring-boot:run if Maven is available globally).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 17 - 20, The README's backend run instruction
references a missing Maven Wrapper (./mvnw); either add and commit the Maven
Wrapper scripts to the repo or update the README to use the global Maven command
(mvn spring-boot:run) and include a short note about requiring Maven installed;
update the command text where the current "./mvnw spring-boot:run" example
appears so it matches whichever approach you choose.
| CREATE USER 'ecom_user'@'localhost' IDENTIFIED BY 'change_me'; | ||
| GRANT ALL PRIVILEGES ON ecom_db.* TO 'ecom_user'@'localhost'; |
There was a problem hiding this comment.
Tighten DB privileges in the setup example.
Granting ALL PRIVILEGES is broader than needed for an app account. Prefer least-privilege grants in docs.
🔒 Suggested SQL example
-GRANT ALL PRIVILEGES ON ecom_db.* TO 'ecom_user'@'localhost';
+GRANT SELECT, INSERT, UPDATE, DELETE ON ecom_db.* TO 'ecom_user'@'localhost';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| CREATE USER 'ecom_user'@'localhost' IDENTIFIED BY 'change_me'; | |
| GRANT ALL PRIVILEGES ON ecom_db.* TO 'ecom_user'@'localhost'; | |
| CREATE USER 'ecom_user'@'localhost' IDENTIFIED BY 'change_me'; | |
| GRANT SELECT, INSERT, UPDATE, DELETE ON ecom_db.* TO 'ecom_user'@'localhost'; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 30 - 31, The README's DB setup grants are too broad;
instead of "GRANT ALL PRIVILEGES ON ecom_db.* TO 'ecom_user'@'localhost';"
restrict privileges for the application user 'ecom_user'@'localhost' to only the
needed operations (e.g., SELECT, INSERT, UPDATE, DELETE, CREATE, INDEX, ALTER)
on ecom_db.*; update the example SQL in README.md to replace the ALL PRIVILEGES
grant with a least-privilege GRANT for those specific privileges and include a
short comment explaining why least privilege is recommended.
Motivation
Description
/api/products, and fallback demo products (frontend/src/*,frontend/package.json,frontend/vite.config.js).EcomApplication, aProductrecord, andProductControllerthat exposes a sample/api/productsendpoint (backend/src/main/java/com/example/ecom/*,backend/pom.xml).backend/src/main/resources/application.propertiesand a README with setup instructions for frontend, backend, and MySQL..gitignoreentries for common build/artifact folders and environment files.Testing
npm installin thefrontenddirectory which failed with a registry error (403 Forbidden) so the frontend dev server could not be started.Codex Task
Summary by CodeRabbit
New Features
Documentation
Chores