PCMart is a modern, full-stack e-commerce application designed for selling PC hardware components. It features a React-based Single Page Application (SPA) frontend and a Spring Boot REST API backend.
- User & Admin Roles: Secure authentication and role-based access control.
- Theme Support: Built-in Dark/Light Mode with a custom color palette (Dark Blue/Light Blue).
- Product Management: Admin interface to add, update, and delete products with rich details (features, technical specs, images).
- Search: Universal product search functionality with optimized backend query.
- Shopping Cart: Fully functional cart with stock validation.
- Checkout & Payments: Integrated checkout flow (simulated Razorpay integration) with inventory updates.
- User Dashboard: Order history, profile management, and address updates.
- Admin Dashboard: Comprehensive management of products, users, and advertisements.
- Product Details: Dynamic product pages with:
- Star ratings and reviews.
- "Bought in past month" statistics.
- Technical details table and feature bullet points.
- Static Pages: Informational pages like About Us, Privacy Policy, and Terms & Conditions.
- File Storage: Product details (specs/features) are stored as JSON files on the server for flexibility.
- Java 21
- Spring Boot 3.4.1: REST API, Data JPA, Security (Session-based).
- Maven: Build tool.
- Database: MySQL (Production) / H2 (Dev/Test).
- Hibernate/JPA: ORM.
- React 19: UI Library.
- Vite: Build tool and dev server.
- Tailwind CSS v4: Styling framework.
- React Router: Navigation and Routing.
- Axios: HTTP Client.
- React Icons: Icon library.
Before running the project, ensure you have the following installed:
- Java JDK 21 or later.
- Node.js (v18 or later) and npm.
- MySQL (optional, uses H2/Aiven by default configuration).
git clone https://github.com/pralaynaskar/PCMart.git
cd pcmartNavigate to the backend directory and run the application:
cd backend
# Grant execution permission to Maven wrapper (Linux/Mac)
chmod +x mvnw
# Run the application
./mvnw spring-boot:run- The backend server will start on port 8090.
- The database is configured in
backend/src/main/resources/application.properties.
Open a new terminal, navigate to the frontend directory, install dependencies, and start the dev server:
cd frontend
npm install
npm run dev- The frontend dev server will start on http://localhost:5173.
- It is configured to proxy API requests (
/api,/uploads) to the backend at port 8090.
- Browse: Visit the homepage to see featured products and advertisements. Toggle between Dark/Light mode using the icon in the navbar.
- Search: Use the search bar to find specific components (e.g., "Processor", "i9").
- Details: Click on a product to view full specifications, reviews, and warranty info.
- Cart: Add items to your cart. The system validates stock availability.
- Checkout: Proceed to checkout (requires login). Enter details and simulate payment.
- Dashboard: View your order history and update profile in the User Dashboard.
- Info: Access About Us, Contact, and Policy pages via the footer.
- Login: Log in with an admin account.
- Dashboard: Access the Admin Dashboard via the profile menu.
- Manage Products: Add new products with descriptions, specs (Key: Value format), and images. Delete obsolete products.
- Manage Ads: Create and remove promotional banners displayed on the homepage.
- View Users: Inspect registered users.
pcmart/
├── backend/ # Spring Boot Application
│ ├── src/main/java # Java Source Code (Controllers, Models, Repos)
│ ├── src/main/resources # Config (application.properties) & Static Resources
│ └── uploads/ # Stored images and product detail JSONs
├── frontend/ # React Application
│ ├── src/
│ │ ├── components/ # Reusable UI components (Navbar, ProductCard, Footer, etc.)
│ │ ├── context/ # React Context (Auth, Cart, Theme)
│ │ ├── pages/ # Page components (Home, Dashboard, Checkout, StaticPage, etc.)
│ │ └── App.jsx # Routing configuration
│ └── vite.config.js # Vite & Proxy config
├── .gitignore # Unified gitignore
└── README.md # Project documentation