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.
- Mohammed El Ahmar β Full Stack Developer (Backend & Frontend)
- Mohammed Mehdi Boudir β UI/UX & Styling
- Yasser Amiri β Documentation & Reports
-
π 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
Include here some screenshots if possible of the shop, product detail, cart, checkout, and admin dashboard.
- 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
# 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 startMake sure MongoDB is running locally or use MongoDB Atlas.
root
βββ server
β βββ controllers
β βββ models
β βββ routes
β βββ config
β βββ ...
βββ client
β βββ components
β βββ pages
β βββ redux
β βββ ...
βββ test
β βββ 1_critical_inventory_test.js
β βββ package.json
β βββ .env.example
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.
- Provide test configuration
- Duplicate
test/.env.exampleintotest/.envand 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(+ optionalMONGO_DB_NAMEif the URI does not include one).
- Adjust shipping placeholders or headless mode if necessary.
- Install the test harness dependencies
cd test
npm install- Start the platform (API on
:5000, client on:3000) and ensure the MongoDB instance used in production/testing is reachable from the runner machine. - Launch the regression
npm run critical-inventoryThe 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_quantityhas 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.
- Add product reviews and ratings
- Improve dashboard analytics
- Add product filter by price, brand, and categories
- Multi-language support
This project is licensed under the MIT License.
For questions, feedback, or collaboration, feel free to reach us at:
π§ eleganceshop.sender@gmail.com
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