Skip to content

Add e-commerce starter (React frontend + Spring Boot backend)#1

Open
ramcharan032785-code wants to merge 1 commit into
mainfrom
codex/set-up-e-commerce-app-architecture
Open

Add e-commerce starter (React frontend + Spring Boot backend)#1
ramcharan032785-code wants to merge 1 commit into
mainfrom
codex/set-up-e-commerce-app-architecture

Conversation

@ramcharan032785-code
Copy link
Copy Markdown
Owner

@ramcharan032785-code ramcharan032785-code commented Mar 2, 2026

Motivation

  • Provide a minimal e-commerce starter project that includes a React storefront and a Spring Boot API so developers can iterate on frontend and backend features locally.
  • Include a simple MySQL-backed configuration and sample data so the app can be wired to a real database or used in demo mode.

Description

  • Add a Vite + React frontend with a responsive storefront layout, product fetching from /api/products, and fallback demo products (frontend/src/*, frontend/package.json, frontend/vite.config.js).
  • Add a Spring Boot backend with EcomApplication, a Product record, and ProductController that exposes a sample /api/products endpoint (backend/src/main/java/com/example/ecom/*, backend/pom.xml).
  • Add a MySQL configuration and JPA properties in backend/src/main/resources/application.properties and a README with setup instructions for frontend, backend, and MySQL.
  • Add .gitignore entries for common build/artifact folders and environment files.

Testing

  • Ran npm install in the frontend directory which failed with a registry error (403 Forbidden) so the frontend dev server could not be started.
  • No automated backend tests or builds were executed in this rollout.

Codex Task

Summary by CodeRabbit

  • New Features

    • Launched a complete e-commerce platform with product browsing and shopping capabilities.
    • Product catalog displays items with details, pricing, and add-to-cart functionality.
  • Documentation

    • Added comprehensive setup guide and project structure documentation.
  • Chores

    • Initialized application configuration and database setup.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 2, 2026

📝 Walkthrough

Walkthrough

A 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

Cohort / File(s) Summary
Project Setup & Documentation
.gitignore, README.md
Adds git ignores for node_modules, dist, target, .env and introduces project documentation covering structure, setup instructions, database initialization, and API proxy configuration.
Backend Stack
backend/pom.xml, backend/src/main/resources/application.properties, backend/src/main/java/com/example/ecom/EcomApplication.java, backend/src/main/java/com/example/ecom/Product.java, backend/src/main/java/com/example/ecom/ProductController.java
Establishes Maven Spring Boot 3.2.3 project with Java 17, MySQL datasource configuration on port 8080, application entry point, Product data model as a record type, and REST controller exposing hardcoded product list at /api/products endpoint.
Frontend Stack
frontend/package.json, frontend/vite.config.js, frontend/index.html, frontend/src/main.jsx, frontend/src/App.jsx, frontend/src/styles.css
Sets up React + Vite project on port 5173 with API proxy to backend, HTML entry point, React bootstrap with StrictMode, App component that fetches products from /api/products with fallback handling, and comprehensive CSS stylesheet for hero sections, product cards, badges, and responsive layouts.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Hops through the code with glee so bright,
A full-stack burrow, built just right!
React and Spring now dance as one,
MySQL seeds—the harvest's begun!
This NovaCart brings commerce cheer,
A brand-new world of code is here! 🛒✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: introducing a complete e-commerce starter project combining React frontend and Spring Boot backend, which matches the core deliverable of this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch codex/set-up-e-commerce-app-architecture

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.


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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 6

🧹 Nitpick comments (1)
frontend/src/App.jsx (1)

28-45: Add request cancellation in useEffect to 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

📥 Commits

Reviewing files that changed from the base of the PR and between b638074 and 8f71797.

📒 Files selected for processing (13)
  • .gitignore
  • README.md
  • backend/pom.xml
  • backend/src/main/java/com/example/ecom/EcomApplication.java
  • backend/src/main/java/com/example/ecom/Product.java
  • backend/src/main/java/com/example/ecom/ProductController.java
  • backend/src/main/resources/application.properties
  • frontend/index.html
  • frontend/package.json
  • frontend/src/App.jsx
  • frontend/src/main.jsx
  • frontend/src/styles.css
  • frontend/vite.config.js

@@ -0,0 +1,3 @@
package com.example.ecom;

public record Product(Long id, String name, String description, double price) {}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, locate the Product.java file and examine its current state
find . -name "Product.java" -type f | head -20

Repository: ramcharan032785-code/Codex

Length of output: 123


🏁 Script executed:

# Search for all Product constructor instantiations
rg -nP --type=java '\bnew\s+Product\s*\(' -B2 -A2

Repository: 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 -50

Repository: 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 -20

Repository: ramcharan032785-code/Codex

Length of output: 52


🏁 Script executed:

# Look for Product tests
find . -name "*ProductTest*" -o -name "*Test*Product*" | grep -i test

Repository: 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.java

Repository: 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 -60

Repository: 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.

Suggested change
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.

Comment on lines +3 to +6
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
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
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.

Comment on lines +8 to +9
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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=false

Use 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.

Comment thread frontend/src/styles.css
@@ -0,0 +1,191 @@
:root {
font-family: 'Inter', system-ui, sans-serif;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

Suggested change
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.

Comment thread README.md
Comment on lines +17 to +20
```bash
cd backend
./mvnw spring-boot:run
```
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 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.

Comment thread README.md
Comment on lines +30 to +31
CREATE USER 'ecom_user'@'localhost' IDENTIFIED BY 'change_me';
GRANT ALL PRIVILEGES ON ecom_db.* TO 'ecom_user'@'localhost';
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant