SkinVault

A Premium E-Commerce Web App for Device Skins

📖 Overview

SkinVault is a cutting-edge full-stack e-commerce web application designed for premium device skins. It delivers an immersive shopping experience with 3D parallax scrolling, cinematic video backgrounds, and a highly responsive modern UI. The robust Spring Boot backend ensures a seamless and secure REST API for efficient product and database management.

✨ Features

• Immersive UI/UX: Cinematic video backgrounds, Framer Motion powered 3D parallax scrolling, and fluid directional page transitions mimicking native mobile apps.
• Glassmorphism Authentication: An interactive, beautifully animated authentication modal using Framer Motion layout transitions and advanced backdrop blurring for a premium login/registration experience.
• Dual Role Management (JWT): Secure JSON Web Token authentication system built-in. Features distinct Customer and Admin roles, including a secure "Secret Code" registration mechanism (SECRET_ADMIN_123) to seamlessly promote administrators.
• Modern Storefront: Built with React 19, Tailwind CSS v4, and dynamic components.
• Smart Multi-Device Selection: Custom cascading dropdowns allowing users to beautifully select compatible devices per skin before adding to cart.
• Comprehensive Checkout: Integrated support for multiple interactive payment methods including Credit Card, PayPal, Apple Pay, and BHIM UPI.
• Admin Dashboard: A dedicated admin panel featuring real-time dynamic search and category filters for efficient product inventory management.
• Robust Backend API: Powered by Spring Boot, featuring RESTful endpoints for products, users, and orders.
• Secure Data Management: Fully integrated with MySQL using Spring Data JPA.
• Fully Responsive: Optimized for desktop, tablet, and mobile devices.

🛠️ Tech Stack

Frontend

• Framework: React 19 + Vite
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Routing: React Router DOM v7

Backend

• Framework: Spring Boot 4.0.3 (Java 21)
• Database: MySQL
• ORM: Spring Data JPA / Hibernate
• Tools: Lombok, Maven

🚀 Getting Started

Prerequisites

• Node.js (v18+)
• Java JDK 21
• MySQL Server
• Maven

1. Clone the Repository

git clone https://github.com/Tabsheerul/E-Commerece-.git
cd E-Commerece-

2. Setup the Backend (Spring Boot)

cd ecommerce-backend
# Ensure your MySQL database is running and update src/main/resources/application.properties with your DB credentials.
./mvnw spring-boot:run

3. Setup the Frontend (React + Vite)

cd ecommerce-frontend
npm install
npm run dev

The frontend will be available at http://localhost:5173 and the backend API at http://localhost:8080.

📁 Project Structure

E-Commerce-Project/
├── ecommerce-frontend/    # React frontend application
│   ├── src/               # React components, pages, and assets
│   ├── public/            # Static assets
│   └── package.json       # Frontend dependencies
└── ecommerce-backend/     # Spring Boot backend application
    ├── src/main/java/     # Java source code
    ├── src/main/resources/# Application properties & static files
    └── pom.xml            # Maven dependencies

🤝 Contributing

Contributions, issues, and feature requests are welcome!