Technogyn 🌐

Revolutionizing E-commerce

Welcome to Technogyn, an innovative e-commerce platform designed to provide a seamless and secure online shopping experience for technology products. This project is part of the ALX WebStack Portfolio Project program and highlights modern web development practices using the MERN stack.

---

Table of Contents 📋

1. Overview
2. Features
3. Technologies Used
4. Installation and Setup
5. Project Structure
6. Usage
7. Author
8. Resources
9. Demo Video
10. Copyright

---

Overview 🛒

Technogyn is an e-commerce platform focused on technology products. Its main goals are:

• Providing users with an intuitive browsing experience.
• Allowing personalized product recommendations.
• Offering a secure and fast shopping process.

This project was built as part of the ALX WebStack Portfolio Project and is designed to demonstrate my skills in full-stack development using modern technologies.

---

Features ✨

• Most Popular and New Products Sections: Easily explore trending and recently added items.
• User-Specific Product Cards: Save and manage your favorite items.
• Admin Panel: Add, edit, and manage products seamlessly.
• Optimized Performance: Fast loading speeds with caching.
• Future Goals: Mobile responsiveness and AI-based recommendations.

---

Technologies Used 🛠️

Frontend:

• React.js: For building dynamic and interactive user interfaces.

Backend:

• Node.js: Backend runtime for scalable APIs.
• Express.js: Framework for backend routing and middleware.

Database:

• MongoDB: A NoSQL database for flexible and efficient data storage.

Other Tools:

• JWT: Secure user authentication.

---

Installation and Setup ⚙️

Follow these steps to install and run the project:

1. Clone the Repository

git clone https://github.com/Alogyn/Technogyn_E-commerce_Website.git
cd Technogyn_E-commerce_Website

2. Install Dependencies

For the Frontend:

cd frontend
npm install

For the Backend:

cd backend
npm install

For the Admin Panel:

cd admin
npm install

3. Run the Application

Start the Frontend:

npm start

Start the Backend:

npm run dev

Start the Admin Panel:

npm start

4. Access the Application

• Frontend: http://localhost:3000
• Backend: http://localhost:4000
• Admin Panel: http://localhost:3001

---

Project Structure 🗂️

technogyn/
├── frontend/         # React frontend
├── backend/          # Node.js backend
├── admin/            # Admin dashboard
├── LICENSE/          # License for project components
└── README.md         # Project documentation

---

Usage 💻

• Users: Browse products, add items to personalized cards, and view popular or new items.
• Admins: Manage product inventory and update listings easily using the admin panel.

---

Author ✍️

Mohamed Derfoufi

• Email: mohamed.derfoufi.tech@gmail.com
• Linkdin: Mohamed Derfoufi

---

Resources 📚

• MERN Stack Documentation
• React.js Documentation
• Node.js Documentation
• MongoDB Documentation

---

Demo Video 🎬

Watch the demo video of Technogyn on YouTube:

---

Copyright ©️

Technogyn © 2025 Mohamed Derfoufi. All rights reserved.
This project is licensed under the MIT License. See the LICENSE/ directory for more information.