E-Commerce
Team-12
The Start
We started a meeting where we agreed on everything we would do, agreed on the general structure, and the front-end team entered another meeting and agreed on the colors that we would adhere to in all our projects.
This is the beginning. The beginning of cooperation, understanding and diligence.
The Journey
Color Palette Used
This Color palette from Adobe Color Palettes
E-Commerce
Our Responsive Website
Project Structure
01
App Module
01
04
02
03
Nav Component
Spinner Component
Footer Component
Banner Component
05
06
07
About-Us Component (Page)
Home Component (Page)
Contact-Us Component (Page)
08
Account Component (Page)
02
Authentication Module
11
12
Login Component
Register Component
03
User-Cart Module
31
32
Cart Component
Checkout Component
04
Shop Module
41
42
Products Component
Product-Details Component
Overall Structure
View
Important Requirements/Features
Feature 4
Admin Page
Add/delete Product
Feature 1
Feature 2
Feature 3
04
01
03
02
Profile Page
Edit Password
Cart Page
Add/delete/edit
Product
Products Page
Search and Filter
E-Commerce
Let’s look at My Home Page
Our Products
You can select your products in your cart
with specific number of items,
and can you modify your products
in your cart.
E-Commerce in different Devices
Login
Page
Register
Page
Profile
Page
Cart Page
You can remove item, increase/decrease
Items from specific product and check
Total salary.
Admin Page
You can view or delete
any product easily.
Admin Page
You can add product also
as an administrator.
Used Technologies in Front-End Project
BOOTSTRAP
ANGULAR
PRIMENG
IOS Application
Our Responsive IOS App
iPhone SE
iPhone 12 Pro Max
iPhone 12
iPhone 8 Plus
iPhone 13 Pro Max
iOS
Let’s look at the Sign up and Sign in Pages
The Home Page, and the Product Details Page
In the Home Page you can select any of
the products that are on display for you.
Once you click on the product of your
choice the Product Details page will
appear and you will be able to select the
color, size, and quantity of the product
that you want.
The price is then displayed accordingly,
and you may add to cart.
Cart
Page
Profile
Page
Used
Technologies
MVC Architecture
Pattern
The architecture pattern that is used in the project is the MVC Architecture Pattern which is the most common application architecture pattern.
MVC utilizes 3 Main Components: View, Controller, and Model.
Core Data Entities
User Entity
Product Entity
Android Application
E-Commerce
Let’s look at My Home Page
Our Products
You can search on any products
And filter products by category
Login
Page
Register
Page
Cart Page
You can remove item, increase/decrease
Items from specific product and view
Total salary.
Code Summary
-To make everything well-organized, we used MVVM architectural design pattern.
-We created 4 activities:
-Splash Activity
-Login Activity
-Register Activity
-Home Activity
Code Summary
Attached to the Home Activity is the Navigation Host Fragment that navigates to four different fragments:
There's also a product details fragment to display product details.
we used Retrofit as a REST client for communicating with back-end APIs, Live data and we also Glide to cache the images displayed in the Recycler View.
we tried to follow clean code guidelines and solid principles as much as possible to create a robust and clean design.
Used Technologies in Android Project
Retrofit
Android Kotlin
MVVM
Backend Development
Features & APIs
• An API to Enable user to register.
• An API to login to the website
1) Spring-boot security using JWT (JSON Web Token).
• An API to Enable user to update his profile.
• APIs to Enable the admin to:-
1) add product.
2) Delete product.
3) Get products (all products , by category , by size).
Design Architecture
A Backend Rest-API designed using MVC Architecture.
Two Modules:
1) User module.
2) Product module.
Design Architecture
Swagger
Documentation
Postman Test
Used Technologies in Back-End Project
Spring Boot
JAVA
Heroku
Postman
Thank You