6 PACK PROGRAMMER
Youtube | Instagram | LinkedIn
E-COMMERCE APP
USING MERN STACK
Course Overview
In this course, you will learn about the MERN Stack. MERN Stack is a Technology Stack, which
means a combination of different technologies used together to build amazing apps. The main
purpose of this course is to teach you how to use MERN Stack so you can build your dream
project soon. I believe in project-based learning,
that's why we create an E-commerce app in this
course. You can read about the project features in
the below section.
WHO AM I
Hello everyone, I am Abhishek Singh a full-stack
developer who is passionate about programming
and loves to teach artistically.
PREREQUISITES
Before attending this course you must have basic
knowledge of each technology of MERN Stack i.e
MongoDB, ExpressJS, NodeJS, ReactJS, and Redux.
No need to have prior experience in React Native!
2
COURSE STRUCTURE
First, we will build the App UI using expo-cli in React Native. Then we will create the server
using ExpressJS, and NodeJS while connecting with the database i.e MongoDB atlas, then we
will build all the required APIs that we will use in the App. And finally, we will implement Redux in
the app while connecting with the deployed server.
3
PROJECT DESCRIPTION
● A mobile e-commerce application designed to provide an easy and convenient shopping
experience for users.
● Built using the popular cross-platform technology, React Native, to ensure compatibility
with both iOS and Android devices.
● Offers two user profiles: normal users and administrators, each with its own set of
features and capabilities.
4
Normal User Features:
● Browse through a wide selection of products, with the ability to filter and search based
on various criteria such as category, price, and product name.
● Choose between two payment options: cash on delivery or online payment via Stripe, a
well-known and secure payment platform.
● Conveniently place orders and monitor their status through the app.
Administrator Dashboard Features:
● A powerful and intuitive dashboard exclusively for administrators, allowing them to
manage the product catalog and monitor orders.
● Add new categories, create new products, edit existing products and product images,
and manage product availability.
● Monitor all orders and manage order processing, from receiving the order to delivering
the product.
● Visualize the number of in-stock and out-of-stock products using a pie chart, providing a
quick overview of their inventory and helping to make informed decisions.
Goal:
The main objective of the project is to create a seamless shopping experience for users, by
offering a personalized and convenient platform for managing their daily shopping needs. The
app will help users to save time and increase productivity, by allowing them to easily find,
purchase and track the products they need. Additionally, the administrator dashboard will
provide valuable insights and analytics, allowing the admin to make informed decisions and
optimize their business operations.
5
DEPENDENCIES USED
Frontend:
"@react-navigation/native": "^6.1.1",
"@react-navigation/native-stack": "^6.9.7",
"@reduxjs/toolkit": "^1.9.1",
"@stripe/stripe-react-native": "^0.23.0",
"axios": "^1.2.3",
"expo": "~47.0.9",
"expo-camera": "^13.1.0",
"expo-image-picker": "^14.0.2",
"expo-status-bar": "~1.4.2",
"mime": "^3.0.0",
"react": "18.1.0",
"react-native": "0.70.5",
"react-native-chart-kit": "^6.12.0",
"react-native-paper": "^5.1.0",
6
"react-native-snap-carousel": "^4.0.0-beta.6",
"react-native-svg": "^13.4.0",
"react-native-toast-message": "^2.1.5",
"react-redux": "^8.0.5"
Backend:
"bcrypt": "^5.1.0",
"cloudinary": "^1.32.0",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"datauri": "^4.1.0",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.7.2",
7
"multer": "^1.4.5-lts.1",
"nodemailer": "^6.8.0",
"stripe": "^10.17.0",
"validator": "^13.7.0"
CONFIG VARIABLES
PORT
What should be the port number
NODE_ENV
Specify the environment mode
MONGO_URI
MongoDB Uri string to connect with the database
JWT_SECRET
Any random string will work as the secret for creating a JWT token
CLOUDINARY_NAME
Cloud name provided by Cloudinary
CLOUDINARY_API_KEY
Cloudinary API Key provided by Cloudinary
8
CLOUDINARY_API_SECRET
Cloudinary API Secret provided by Cloudinary
SMTP_HOST
Mail Provider Host
SMTP_PORT
Mail Provider Port
SMTP_USER
Mail Provider Username
SMTP_PASS
Mail Provider Password
STRIPE_API_KEY
Stripe Publishable API Key provided by stripe
STRIPE_API_SECRET
Stripe API Secret provided by stripe
9
APIs
User:
● Login
● Signup
● getMyProfile
● Logout
● updateProfile
● changePassword
● updatePic
● forgetPassword
● resetPassword
Product:
● getAllProducts
● getAdminProducts
● getProductDetails
● updateProduct
● deleteProduct
● createProduct
● addProductImage
● deleteProductImage
● addCategory
● getAllCategories
● deleteCategory
Order:
● createOrder
10
● processPayment
● getMyOrders
● getAdminOrders
● getOrderDetails
● processOrder
Schemas
User:
● Name
● Email
● Password
● Address
● City
● Country
● PinCode
● Role
● Avatar
● Otp
● Otp_expire
Product:
● Name
● Description
● Price
● Stock
● Images
● Category
11
● CreatedAt
Category:
● Category
Order:
● ShippingInfo
● OrderItems
● User
● PaymentMethod
● PaidAt
● PaymentInfo
● ItemsPrice
● TaxPrice
● ShippingCharges
● TotalAmount
● OrderStatus
● DeliveredAt
● CreatedAt