A modern and responsive front-end e-commerce website designed using HTML, CSS, and JavaScript. This project focuses on creating a clean user interface and improving user experience for online shopping. Currently in progress, with plans to implement AI-powered features.
- ✅ Fully responsive design for mobile, tablet, and desktop
- 🛍️ Product listing and product detail layout
- 🔐 User login and signup pages
- 🛒 Basic cart structure
- ✨ Clean UI with smooth user interactions
- 🤖 AI-Enhanced Virtual Try-On System
A planned feature that will allow users to upload their profile picture and preview how selected clothes would look on them using AI-based image processing.
- Frontend: HTML, CSS, JavaScript (Vanilla)
- Tools: Visual Studio Code, Git
- Version Control: GitHub
- Enhance web development skills with HTML, CSS, and JavaScript
- Apply responsive design techniques
- Understand user authentication page setup
- Explore the integration of AI in real-world web applications
- Trishna Bhattarai
- 📧 trishnabhattarai36@gmail.com
- 🔗 https://www.linkedin.com/in/trishna-bhattarai/
- This project is still under development. Contributions, suggestions, and feedback are welcome!
- Clone the repository:
git clone https://github.com/your-username/ecommerce-website.git- Navigate to the project:
cd ecommerce-website- Install dependencies:
cd ecommerce-backend
npm install
cd ../my-app
npm install
- Start the backend:
node Server.js- Start the frontend:
npm start📦 ecommerce-website/
│
├── 📂 ecommerce-backend/ # Backend API for product handling
│ ├── 📂 models/ # MongoDB schema files
│ │ └── Product.js # Product schema model
│ ├── 📜 Server.js # Main backend server file
│ ├── 📜 package.json # Backend dependencies & scripts
│ └── 📜 package-lock.json
│
├── 📂 my-app/ # Main React frontend application
│ ├── 📂 public/ # Public static files
│ │ ├── 📂 photo/ # Images used in the app
│ │ ├── 📜 index.html # Root HTML file
│ │ ├── 📜 favicon.ico, manifest.json, robots.txt
│ │
│ ├── 📂 src/ # Source files for React app
│ │ ├── 📂 Component/ # All UI components
│ │ │ ├── BabiesToy.jsx
│ │ │ ├── CategoryPage.jsx / .css
│ │ │ ├── Contact.jsx
│ │ │ ├── Createaccount.jsx
│ │ │ ├── ElectronicDevices.jsx
│ │ │ ├── Errorpage.jsx
│ │ │ ├── Healthbeauty.jsx
│ │ │ ├── Image.jsx
│ │ │ ├── ImForm.jsx
│ │ │ ├── Login.jsx
│ │ │ ├── Mensfashion.jsx
│ │ │ ├── Navbar.jsx
│ │ │ ├── Payment.jsx
│ │ │ ├── ProductDetail.jsx
│ │ │ ├── RatingComponent.jsx / .css
│ │ │ ├── ReviewBox.jsx
│ │ │ ├── SellerAccount.jsx
│ │ │ ├── Service.jsx
│ │ │ ├── StarRating.jsx
│ │ │ ├── TVHome.jsx
│ │ │ ├── UploadProduct.jsx
│ │ │ ├── User.jsx / User.css
│ │ │ ├── WatchesAcc.jsx
│ │ │ └── Women.jsx
│ │ │
│ │ ├── 📂 Context/ # App-wide styling and test configs
│ │ │ ├── App.css, index.css
│ │ │ ├── App.test.js, setupTests.js
│ │ │ └── reportWebVitals.js
│ │ │
│ │ ├── 📜 App.js, index.js # Main app component and entry
│ │
│ ├── 📜 package.json # React app dependencies
│ ├── 📜 package-lock.json
│ ├── 📜 README.md
│ └── 📜 .gitignore
│
├── 📂 women-category-backend/ # Backend for women’s product section
│ ├── 📜 Server.js # Server file for separate product logic
│ ├── 📜 package.json / lock.json
│ └── 📂 node_modules/
│
└── 📜 (other global files as needed)- Full database integration (MongoDB or SQL)
- Implement complete authentication & session management
- Deploy using Netlify (Frontend) and Render/Heroku (Backend)
- Integrate AI-powered Virtual Try-On system