Skip to content

mohammedelahmar/Elegance_Shop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

75 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ›οΈ Elegance Shop

Elegance Shop is a full-featured web application built with the MERN Stack (MongoDB, Express.js, React, Node.js), offering users a seamless shopping experience. It includes a dynamic shop interface, wishlist management, secure checkout (PayPal, credit card, bank transfer, and cash on delivery), and an admin panel for product, user, and order management.

πŸ‘₯ Team Roles

  • Mohammed El Ahmar β€” Full Stack Developer (Backend & Frontend)
  • Mohammed Mehdi Boudir β€” UI/UX & Styling
  • Yasser Amiri β€” Documentation & Reports

πŸš€ Features

  • πŸ” User Authentication & Authorization (JWT)

  • πŸ›’ Product Browsing & Detailed Pages

  • 🧾 Shopping Cart & Wishlist

  • πŸ’³ Multiple Payment Methods

    • PayPal
    • Credit Card
    • Bank Transfer
    • Cash on Delivery
  • πŸ“¦ Order Tracking

  • πŸ§‘β€πŸ’» Admin Panel

    • Manage Products, Users, and Orders
  • 🌐 Responsive Design

  • πŸ“¬ Contact Page


πŸ“Έ Screenshots

Include here some screenshots if possible of the shop, product detail, cart, checkout, and admin dashboard.


πŸ› οΈ Tech Stack

  • Frontend: React.js, Redux Toolkit, Tailwind CSS / styled-components
  • Backend: Node.js, Express.js, Mongoose
  • Database: MongoDB Atlas
  • Payment: PayPal REST API, Custom Credit Card / Bank Transfer Integration
  • Authentication: JWT & bcrypt

πŸ“¦ Installation & Setup

# 1. Clone the repo
$ git clone https://github.com/mohammedelahmar/Projet_PFE.git
$ cd Projet_PFE

# 2. Install backend dependencies
$ cd server
$ npm install

# 3. Set up environment variables in backend/.env
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_secret_key
PAYPAL_CLIENT_ID=your_paypal_client_id

# 4. Start the backend server
$ npm start

# 5. Install frontend dependencies
$ cd ../client
$ npm install

# 6. Start the frontend app
$ npm start

Make sure MongoDB is running locally or use MongoDB Atlas.


πŸ“ Project Structure

root
β”œβ”€β”€ server
β”‚   β”œβ”€β”€ controllers
β”‚   β”œβ”€β”€ models
β”‚   β”œβ”€β”€ routes
β”‚   β”œβ”€β”€ config
β”‚   └── ...
β”œβ”€β”€ client
β”‚   β”œβ”€β”€ components
β”‚   β”œβ”€β”€ pages
β”‚   β”œβ”€β”€ redux
β”‚   └── ...
β”œβ”€β”€ test
β”‚   β”œβ”€β”€ 1_critical_inventory_test.js
β”‚   β”œβ”€β”€ package.json
β”‚   └── .env.example

πŸ§ͺ Critical Inventory Selenium Test

The test/1_critical_inventory_test.js script simulates the most sensitive customer flow (login β†’ add to cart β†’ checkout β†’ credit card payment) and validates that MongoDB immediately decrements the product stock once the transaction succeeds.

  1. Provide test configuration
  • Duplicate test/.env.example into test/.env and fill in:
    • E2E_USER_EMAIL / E2E_USER_PASSWORD β†’ credentials of a real shopper account.
    • E2E_PRODUCT_ID β†’ MongoDB ObjectId of the product whose inventory you want to guard.
    • MONGO_URI (+ optional MONGO_DB_NAME if the URI does not include one).
  • Adjust shipping placeholders or headless mode if necessary.
  1. Install the test harness dependencies
cd test
npm install
  1. Start the platform (API on :5000, client on :3000) and ensure the MongoDB instance used in production/testing is reachable from the runner machine.
  2. Launch the regression
npm run critical-inventory

The script:

  • Logs in through the public UI (Selenium/Chrome, headless by default).
  • Clears the remote cart via the REST API to guarantee a deterministic basket.
  • Walks through the checkout wizard, completes a credit-card modal, and lands on the payment success page.
  • Polls MongoDB mathematically to ensure stock_quantity has decreased by the purchased quantity. The run fails fast with actionable logs if any prerequisite is missing (credentials, stock, DB connectivity, etc.).

ℹ️ Chrome/Chromium must be installed on the runner host. Selenium Manager is used automatically, so no manual driver download is needed.


πŸ’‘ Future Improvements

  • Add product reviews and ratings
  • Improve dashboard analytics
  • Add product filter by price, brand, and categories
  • Multi-language support

πŸ“„ License

This project is licensed under the MIT License.


πŸ“¬ Contact

For questions, feedback, or collaboration, feel free to reach us at:
πŸ“§ eleganceshop.sender@gmail.com


πŸ™Œ Acknowledgments

Thanks to everyone who contributed to open source projects that inspired this one.

Built with ❀️ by Mohammed El Ahmar, Mohammed Mehdi Boudir, and Yasser Amiri

About

Full-featured MERN e-commerce app with cart, checkout, payments, wishlist & admin panel.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •