Skip to content

An elegant e-commerce website offering a seamless shopping experience with responsive design, showcasing modern UI/UX practices

License

Notifications You must be signed in to change notification settings

Moamal-2000/e-commerce

Repository files navigation

E-Commerce Website Preview

E-Commerce Website

Designed by: mdrimel15, Design on Figma

1. Installation

1. Clone the repository:

git clone [email protected]:Moamal-2000/e-commerce.git

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

2. Copyright

You are welcome to use and modify the codebase for personal and educational purposes. However, please respect the original designer's work and do not use this project for commercial purposes without appropriate permissions.

© 2024 Moamal Alaa Kareem | All rights reserved.

3. Technologies Used

4. Features

  1. User Authentication and Account Management: Secure user registration and login functionalities.

  2. Local Storage for Changes: All user actions and changes are stored locally to ensure seamless browsing and continuity.

  3. Shopping Cart and Checkout Process: Easily add items to your cart and proceed through a streamlined checkout process.

  4. Order Tracking and History: Track the status of your orders and view past order history.

  5. Product Details Page with Zoom-In Feature: View detailed product information with the ability to zoom in on product images.

  6. Search Functionality: Search for products by name, or category, or browse all available products.

  7. Save to Favorites/Wishlist/Cart: Save products to your preferred list for future reference or purchase.

  8. Fully Responsive Design: Enjoy a responsive and user-friendly experience across all devices, including desktops, tablets, and mobile phones.

5. Style helper

1. Colors

Color Name Hex Code
Black #000000 #000000
Charcoal #252525 #252525
Dark Slate Gray #2d2d2d #2d2d2d
Granite #363738 #363738
Coffee #504242 #504242
Battleship Gray #4c5355 #4c5355
Dolphin Gray #7d8184 #7d8184
Silver #999999 #999999
Slate Gray #848d97 #848d97
Baby Blue #a0bce0 #a0bce0
Pale Silver #cbcbcb #cbcbcb
Platinum #ededed #ededed
White Smoke #f5f5f5 #f5f5f5
White #fafafa #fafafa
Gainsboro #f6f7f8 #f6f7f8
Ice Blue #edeef1 #edeef1
Anti-Flash White #fdfdfd #fdfdfd
White #ffffff #ffffff
Dark Crimson #a22f2f #a22f2f
Tomato #b40404 #b40404
Fire Engine Red #db4444 #db4444
Red #ff0000 #ff0000
Salmon Pink #e07575 #e07575
Dark Green #078639 #078639
Dodger Blue #4493f8 #4493f8
Light Blue #4ac2e8 #4ac2e8
Sunny Yellow #fffb19 #fffb19

2. Fonts

Font Weights
Inter Light, Medium, Regular, Bold, SemiBold
Poppins Light, Medium, Regular, Bold, SemiBold
Rubik Black Light, Medium, Regular, Bold, SemiBold, ExtraBold