Pnz Outlet - Full Stack MERN E-Commerce Store

Author: Talha Javed
Portfolio: talhajaved.com

---

Project Overview

Pnz Outlet is a Full Stack MERN (MongoDB, Express.js, React.js, Node.js) E-Commerce Store. This project demonstrates a complete implementation of a web application, featuring both front-end and back-end components.

Click to visit website

https://pnzoutlet.talhajaved.com

Video

Features

• User Authentication: Secure user authentication using JWT (JSON Web Tokens).
• Product Listings: Display a wide range of products with details and prices.
• Shopping Cart: Allow users to add and manage items in their shopping cart.
• Checkout Process: Smooth checkout process with order summary and payment integration.
• User Profile: User-specific profiles to track orders and manage account details.

---

Installation

To run the project locally, follow these simple steps:

Frontend

cd frontend
npm install
npm start

Backend

cd backend
npm install
npm start

---

More Information

---

Backend

The backend of the Pny MERN Project is powered by the following technologies:

• Node.js: A JavaScript runtime for building server-side applications.
• Express.js: A web application framework for Node.js, simplifying the process of building robust APIs.
• MongoDB: A NoSQL database for storing and managing data.
• Mongoose: An elegant MongoDB object modeling tool for Node.js, providing a straightforward schema-based solution.
• JWT (JSON Web Tokens): Used for secure user authentication, allowing for the creation of encrypted tokens.
• Bcrypt: A library for hashing passwords, enhancing security for user authentication.
• Cors: Middleware enabling cross-origin resource sharing, essential for allowing requests from the frontend.
• Multer: Middleware for handling file uploads, facilitating the management of multimedia content.
• Morgan: HTTP request logger middleware, aiding in debugging and logging.

Frontend

The frontend of the Pny MERN Project is crafted using the following technologies:

• React: A JavaScript library for building user interfaces, providing a reactive and efficient way to create dynamic UIs.
• Redux: A predictable state container for managing application state, ensuring a consistent and efficient data flow.
• Axios: A promise-based HTTP client for making API requests, simplifying communication with the backend.
• React Router: A library for adding navigation and routing to React applications, enhancing the user experience.
• Google reCAPTCHA: Integrated to protect against spam and abuse, enhancing security in user interactions.
• FontAwesome: A popular icon toolkit, providing a wide range of customizable icons.
• Coinbase Commerce Node: Library for handling cryptocurrency payments, expanding payment options.
• Cors: Middleware enabling cross-origin resource sharing, essential for allowing requests to the backend.
• React Toastify: A library for displaying toast notifications, enhancing the user feedback experience.
• Web Vitals: An initiative to provide unified guidance for quality signals, ensuring optimal performance.

Contact

For any inquiries or feedback, feel free to contact the author:

• Name: Talha Javed
• Portfolio: talhajaved.com

---

Note: Make sure to have Node.js and npm installed on your machine before running the project. Refer to the specific README files in each folder for detailed instructions.

Happy coding!