AN-NAJAH NATIONAL UNIVERSITY 

FACULTY OF ENGINEERING AND INFORMATION TECHNOLOGY 

 Computer Engineering Departments 

Supervisor:  

Dr. Amjad Abu Hassan 

Craft Hub 
 

Prepared by: 

Lubna Bsharat 

                 Linda Abu Khalil   

 

A Graduation Project submitted to the Department of Electrical and 

Computer Engineering in partial fulfillment of the requirements for the 

degree of B.Sc. in Computer Engineering 

 

 
An Najah 

June, 2024 



I 
 

ACKNOWLEDGMENT 
 

We would like to extend our sincere appreciation to the individuals and entities whose support and 

guidance played a pivotal role in the realization of our project. Without their invaluable 

contributions, this project would not have been possible. 

First and foremost, we express our deepest gratitude to our project supervisor, Dr. Amjad Abu 

Hassan, for their unwavering support, mentorship, and insightful feedback throughout the 

development of this innovative smart system. Their expertise and encouragement have been 

instrumental in pushing us to excel and deliver a project of high quality. 

We also want to acknowledge the support and understanding of our friends and family. Their 

constant motivation, encouragement, and belief in our capabilities served as a driving force, 

especially during challenging times. Their patience and unwavering support were truly invaluable. 

Furthermore, we extend our thanks to the faculty members of the An Najah National University 

Computer Engineering Department. The conducive learning environment they provided and the 

valuable knowledge imparted have significantly contributed to the success of our project. 

To everyone who played a role in supporting, guiding, and believing in the potential of our smart 

system project, we express our heartfelt gratitude. Your contributions have left an indelible mark 

on this endeavor, and we look forward to continuing our journey of exploration and innovation. 

 

 

 

 

 

 

 

 

 

 

 

 



II 
 

DISCLAIMER STATEMENT 
 

This report was written by students at the Computer Engineering Department, Faculty of 

Engineering, An-Najah National University.  It has not been altered or corrected, other than 

editorial corrections, as a result of assessment and it may contain language as well as content 

errors. The views expressed in it together with any outcomes and recommendations are solely 

those of the student(s). An-Najah National University accepts no responsibility or liability for the 

consequences of this report being used for a purpose other than the purpose for which it was 

commissioned. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



III 
 

TABLE OF CONTENTS 
 

Acknowledgment ......................................................................................................................................... I 

Disclaimer statement................................................................................................................................... II 

Table of Contents ...................................................................................................................................... III 

List of Figures ........................................................................................................................................... IV 

Abstract.................................................................................................................................................... VII 

Chapter 1: Introduction ............................................................................................................................... 1 

1.1 General background .......................................................................................................................... 1 

1.2 Objectives.......................................................................................................................................... 1 

1.3 Significance or importance of your work .......................................................................................... 1 

Chapter 2: Theoretical Background and Previous Work ............................................................................. 2 

2.1 Theoretical Background .................................................................................................................... 2 

2.2 Previous Work ................................................................................................................................... 2 

Chapter 3: Methodology ............................................................................................................................. 3 

3.1 Technical choices .............................................................................................................................. 3 

3.2 Methods And techniques ................................................................................................................... 5 

3.2.1 Mobile pages .............................................................................................................................. 5 

3.2.2 Web pages ................................................................................................................................ 37 

Chapter 4: Discussion ............................................................................................................................... 51 

Chapter 5: Conclusion .............................................................................................................................. 52 

Chapter 6: Recommendation ..................................................................................................................... 53 

Chapter 7: References ............................................................................................................................... 54 

 

 

 



IV 
 

LIST OF FIGURES 

Figure 1: welcome pag ................................................................................................................................ 5 

Figure 2: USer Sign up Page ....................................................................................................................... 6 

Figure 3: Artist Sign up Page ...................................................................................................................... 6 

Figure 4: sign in Page ................................................................................................................................. 6 

Figure 5: Empty Fields Validation .............................................................................................................. 7 

Figure 6: Email pattern and password long validation ................................................................................ 7 

Figure 7: Passwords Match validation ........................................................................................................ 8 

Figure 8: empty fields validation at user sign up......................................................................................... 8 

Figure 9: Artist Sign up PAge Filled ........................................................................................................... 9 

Figure 10: Transition page at Artist Regestration ....................................................................................... 9 

Figure 11: Personal Information completion for artist .............................................................................. 10 

Figure 12:PAYMENT INFORMATION COMPLETION FOR ARTIST ................................................ 10 

Figure 13: User Regestration Page ............................................................................................................ 11 

Figure 14: user Intested in categories ........................................................................................................ 11 

Figure 15: User Personal Information completion .................................................................................... 11 

Figure 16: image selction option ............................................................................................................... 12 

Figure 17: Gallery access .......................................................................................................................... 12 

Figure 18: City Selector within the State .................................................................................................. 13 

Figure 19: Country Selector ...................................................................................................................... 13 

Figure 20: State Selector within the Country ............................................................................................ 13 

Figure 21: Date Selector ........................................................................................................................... 14 

Figure 22: Year and month Selector ......................................................................................................... 14 

Figure 23: Artist Home Page with Sort Option ......................................................................................... 15 

Figure 24: Item's detiles page.................................................................................................................... 16 

Figure 25: Report Comment Page ............................................................................................................. 17 

Figure 26: Add new Item PAge ................................................................................................................ 18 

Figure 27: no Orders Option ..................................................................................................................... 19 

Figure 28:Orders Page .............................................................................................................................. 19 

Figure 29: Order's Details Page ................................................................................................................ 20 

Figure 30: Chat Contacts .......................................................................................................................... 21 



V 
 

Figure 31: Emojis Option.......................................................................................................................... 21 

Figure 32: first Chat .................................................................................................................................. 21 

Figure 33: Message details ........................................................................................................................ 22 

Figure 34:Sending Images in CHat ........................................................................................................... 22 

Figure 35: Texting And sending Emojis ................................................................................................... 22 

Figure 36: Artist Account Page and personal information and project information options ...................... 23 

Figure 37: log out option........................................................................................................................... 25 

Figure 38: change password page ............................................................................................................. 25 

Figure 39: Bank Information PAge ........................................................................................................... 25 

Figure 40: user home page ........................................................................................................................ 26 

Figure 41: category items page ................................................................................................................. 27 

Figure 42: ITem details page .................................................................................................................... 28 

Figure 43: Artist Profile page.................................................................................................................... 29 

Figure 44: chat Room Page ....................................................................................................................... 29 

Figure 45: Favourites page ........................................................................................................................ 30 

Figure 46: shopping cart page ................................................................................................................... 31 

Figure 47: payment page with credit card ................................................................................................. 32 

Figure 48: payment page with PayPal ....................................................................................................... 32 

Figure 49: Search page ............................................................................................................................. 33 

Figure 50: Search page with result ............................................................................................................ 33 

Figure 51: User Account page .................................................................................................................. 34 

Figure 52: intrested in categories .............................................................................................................. 34 

Figure 53: Admin's Categories page ......................................................................................................... 35 

Figure 54: Add new category option at admin .......................................................................................... 35 

Figure 55: Admin's Reports Page .............................................................................................................. 36 

Figure 56: Web Welcome page ................................................................................................................. 37 

Figure 57:Web sign in page ...................................................................................................................... 37 

Figure 58: Web Artist sign up page .......................................................................................................... 38 

Figure 59:Web Artist Transition at Sign Up Page ..................................................................................... 38 

Figure 60: Artist Personal Info Completion at Sign Up Page .................................................................... 39 

Figure 61: Artist Bank Info Completion at Sign Up.................................................................................. 39 



VI 
 

Figure 62: User Personal Info Completion At Web .................................................................................. 40 

Figure 63: User Interested in Categories Selection At Web ...................................................................... 40 

Figure 64: User Web Home Page.............................................................................................................. 41 

Figure 65:User Web Favorites Page.......................................................................................................... 41 

Figure 66: User Web Account Page .......................................................................................................... 42 

Figure 67:Web Shopping CarT ................................................................................................................. 42 

Figure 68: Search Web Page ..................................................................................................................... 43 

Figure 69:Web Search Page with ResuLt.................................................................................................. 43 

Figure 70: Item’s Details Page at Web ...................................................................................................... 44 

Figure 71: Artist Profile from User View at Web ..................................................................................... 44 

Figure 72: Chats Home Screen at Web ..................................................................................................... 45 

Figure 73: Artist’s Web Home Page ......................................................................................................... 45 

Figure 74: Artist's Add New Item Page at Web ........................................................................................ 46 

Figure 75: Artist's Web Orders Page ......................................................................................................... 46 

Figure 76: Artist's Web Order’s Details Page ........................................................................................... 47 

Figure 77: no orders available At Web ..................................................................................................... 47 

Figure 78: Item’s Details Page For Artist in Web ..................................................................................... 48 

Figure 79: Artist's Web Account Page ...................................................................................................... 48 

Figure 80: Admin’s Web Categories Page ................................................................................................ 49 

Figure 81: Add New Category Option for Admin in Web ........................................................................ 49 

Figure 82: Admin Reports Page in Web ................................................................................................... 50 

 

 

 

 

 



VII 
 

ABSTRACT 
 

In this modern era, with the rapid development of technology and the proliferation of online 

shopping, we have observed that individuals who are interested in entering the field of handmade 

crafts tend to create online pages to sell their creations. However, the majority of these pages fail 

to market their products because they do not reach the category that is concerned with these 

products. As a result, we have introduced our platform CraftHub to bridge the gap between these 

creators and their potential customers. 

CraftHub is an innovative application designed to connect and empower owners of handmade 

projects, providing a dedicated platform for them to showcase and sell their unique creations and 

provide an easy way for customers to find them. The application fosters a vibrant community of 

artisans offering a seamless and visually appealing space for users to discover, 

connect, and transact. 

The platform seamlessly integrates registration functionality for both artisans and users, enabling 

effortless engagement. This feature allows artisans to showcase their handmade creations while 

providing users with a personalized experience tailored to their preferences. Through registration, 

artisans gain access to a dedicated space to display their work, while users can easily explore a 

wide array of categories to find items that match their interests. Additionally, the platform offers 

features that streamline browsing, searching, and purchasing within desired categories, ensuring a 

smooth and enjoyable experience for all users. 

CraftHub stands out among the many online shopping apps by providing a distinct platform that 

showcases artists' ingenuity and improves the chances of selling their items. CraftHub is a unique 

online platform that specializes in selling handmade goods. It caters to artisans by giving them a 

platform to display their skills and offers clients a personalized shopping experience based on their 

preferences for handcrafted products. 

 

 

 

 

 

 

 

 



1 
 

CHAPTER 1: INTRODUCTION 
 

1.1 GENERAL BACKGROUND 

With the development and advancement of technology, craftsmen and handicrafts owners have 

resorted to displaying their work on social media pages for the purpose of selling, but the main 

obstacle they face is reaching the target group interested in purchasing these products. 

 

1.2 OBJECTIVES 

The main objective of this project is to design an application that connects craftsmen and people 

interested in these products instead of creating a general page on social media sites, which often 

fails to reach the target groups, by allowing these project owners to register on the site so that each 

of them has a special page to display their work and products, and users also create an account in 

the application, which allows them to browse the pages of craftsmen and access the desired 

products in the fastest and easiest way. 

 

1.3 SIGNIFICANCE OR IMPORTANCE OF YOUR WORK 

The importance of this work lies in its ability to connect project owners and customers in terms of 

facilitating communication between them and accessing the required products. Thus, we ensure 

saving the user time and effort in searching for the desired product and increasing the requests and 

financial income of the owners of these products. 

 

 

 



2 
 

CHAPTER 2: THEORETICAL BACKGROUND AND PREVIOUS 

WORK 
 

2.1 THEORETICAL BACKGROUND 

There is no doubt that most aspects of life today have become dependent on technology and its 

uses, and are no longer limited to entertainment, communication between people, and bridging 

distances, but have developed and extended to the fields of marketing, purchasing, and developing 

sources of income for individuals, which prompted us to develop an application that combines the 

features of social networking sites for browsing and following pages and e-commerce applications 

to create a suitable environment to access the desired product in the easiest way. 

2.2 PREVIOUS WORK  

For many years, there has been a great interest in developing marketing and trade methods, which 

prompted people to create applications to market their products via the Internet, in addition to 

another type of developers who were interested in creating social networking, entertainment and 

entertainment sites. Recently, the method of creating pages on social networking sites to display 

their work has spread among users. 

These sites have shown great success in increasing the amount of sales for product owners in 

addition to the great demand from users to buy via the Internet instead of traditional shopping. 

However, we noticed that many electronic marketing methods are boring and tend to display 

industrial products, so craftsmen who use this method to publish their products often fail to reach 

people interested in this type of business, which prompted us to think about designing an 

application that increases the opportunity to reach this type of product in an easy and smooth way. 

 

 

 

 



3 
 

CHAPTER 3: METHODOLOGY 
 

3.1 TECHNICAL CHOICES 

Front-end: We chose to use Flutter for developing the front-end of our application and website as 

you can build native, desktop-quality apps quickly without breaking a sweat. Hot reload in flutter 

made iteration and debugging super easy which really saved us a lot of time. Its ample assortment 

of fully customizable widgets and pre-built material components to make an immersive user 

experience consistent across all platforms. 

Back-end: We went with Django as our backend for the application and website because of its 

versatile feature set, easy to develop build rapidly (Rapid development framework), made up AG 

Authentication System Fermenting. Django's "batteries-included" mindset also helped us by 

providing an ORM, admin interface and authentication system out of the box so we could get off 

the ground running with built in components instead of spending time developing my own that 

might not be as feature rich or secure. They had successfully used it for high-traffic applications 

such as Instagram and showed no signs of scalability issues; reassuring us that if we ever needed 

to scale out our application, this foundation would be a good one. In addition, its vibrant 

community and rich documentation make it a suitable choice for creating safeguarded web-product 

with high scalability. 

Database: For our application and website, we chose PostgreSQL as the database mostly due to 

its very feature list and rock-solid data integrity with almost unlimited scaling capabilities. 

PostgreSQL is renowned for its adherence to ACID compliance which helps it maintain data 

integrity and hence, best suited for complicated transactions/ critical data. It was flexible for 

querying and data manipulation due to its support of advanced SQL features like window functions 

and common table expressions. In addition, the vibrant PostgreSQL community and fast updates 

eased concerns about active support for sure fixes. In summary — both the performance, 

extensibility and large community behind PostgreSQL made it the right choice for serving as a 

backend data storage in our project. 

Model controller: In our application we used the MVVM (Model-View-View Model) architecture 

to make a separation of concerns and increase maintainability. MVVM splits up the application 

into three big components: Model (data and business logic), View (user interface),View 

model(mediator between Model and View). By separating the display layer from the business 

logic, this architecture simplifies code management and testability The View Model is designed to 

deal with all UI and user interactions the same way regardless of whether your application runs in 

Android or Jetpack Compose. This framework lets developers work together with even greater 

ease and ensures the agile development method that an app owner wants to change current feature 

of update them in a regular manner. 



4 
 

State management: We also use Bloc for state management in our application to keep data and 

business logic flows clear and structured. Single source of truth Bloc separates Presentation from 

Business logic Cubit is much more "simple" or incredibly simplistic version of Bloc and yet it 

makes the handling state changes with minimal boilerplate code simple. In either case, the patterns 

are built to accommodate Dart's strengths in reactive programming so that updates can be done 

efficiently on UI based changes and events. Not only did this architecture improve the scalability 

and maintainability of our code, but it also allowed us to develop a responsive & easy-to-use user 

experience for all parts of our application. 

Chat system backend: We chose Firebase because of its real-time database support and easy 

integrations with mobile web platforms. Firebase is a real-time database, so it provides 

synchronization of data across clients in no time and hence we will have instant messaging 

experience plus updates within the chat system.  Going further, there is also the sturdy cloud 

storage offerings Firebase brings that meant Media and file transfers were seamlessly managed in 

our chat app. In general, Firebase is the best option to develop a chat system regarding its quick 

and real-time support which comes with many services that could be used. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



5 
 

3.2 METHODS AND TECHNIQUES 

3.2.1 MOBILE PAGES 
 

Welcome Page: In this page the new user has two options to sign up, which is Sign up as an Artist 

or Sign up as a normal User. The other option is the Sign in Page for already existed users. 

 

FIGURE 1: WELCOME PAG



6 
 

Authentication: For authentication we have three different pages: the Artist Sign up page, which 

guides the artist through a seamless process to register his information and his project information, 

the User Sign up page that takes the user through straightforward procedure to fill out his details, 

and the sign in page to takes each user to his home page. 

 

 

 

 

FIGURE 2: USER SIGN UP PAGE FIGURE 3: ARTIST SIGN UP PAGE FIGURE 4: SIGN IN PAGE 



7 
 

Validation: Before submitting the sign up and sign in requests to the backend, we first checks that 

the entered data are valid, so if the data found to be not valid the user gets a chance to correct them, 

for example we always check if all the fields are not empty, and the email address are following 

the pattern, the password are at least 8 characters long, and the confirm password is matches the 

password field in sign up pages. 

 

           

FIGURE 5: EMPTY FIELDS VALIDATION FIGURE 6: EMAIL PATTERN AND PASSWORD LONG 

VALIDATION 



8 
 

 

 

 

FIGURE 7: PASSWORDS MATCH VALIDATION FIGURE 8: EMPTY FIELDS VALIDATION AT USER SIGN 

UP 



9 
 

 Artist Sign up Process: The Artist registration process goes through three phases, the first phase 

is for the basic information we need to know about that Artist, like Name, Email, Location, Project 

Name and Password, then the second phase for the more specific information about the Artist and 

it’s project like the Artist Birthday, Gender, Profile Photo and Project Category. The last phase is 

to add the Artist Bank Account Information, so when the Artist Items get sold the funds will go 

directly to his Bank Account. 

 

FIGURE 9: ARTIST SIGN UP PAGE FILLED 
FIGURE 10: TRANSITION PAGE AT ARTIST 

REGESTRATION 



10 
 

 

 

 

 

 

 

FIGURE 11: PERSONAL INFORMATION COMPLETION 

FOR ARTIST 

FIGURE 12:PAYMENT INFORMATION COMPLETION 

FOR ARTIST 



11 
 

User Sign up Process: The User registration process also goes through several phases, the first 

phase is for the basic information we need to know about that User, like Name, Email, Location, 

and Password, then the second phase for the more specific information about the User like his 

Birthday, Gender and Profile Photo. The last phase is to enables the user to select the Categories 

he interested in, so that will help us to suggest Items from these categories the User might like. 

 

 

 

 

 

 

FIGURE 13: USER REGESTRATION PAGE FIGURE 15: USER PERSONAL INFORMATION 

COMPLETION 
FIGURE 14: USER INTESTED IN CATEGORIES 



12 
 

Special Widgets in the Sign-up Process: While handling the Sign-up process for both Artists and 

Users, we used special widgets for special data formats that were requested. The Date Selector 

widget is used to select the user’s birthday, while the Location Selector is used to identify the 

Users and Artist locations. The Image Selector allows the user to select an image from the device 

files to set as the Profile Photo, and the Currency Selector so the Artist can easily choose his bank 

account currency. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Once the user taps at add photo icon, the app can reach the phone documents and the user can 

chose his profile photo. 
 

FIGURE 16: IMAGE SELCTION OPTION FIGURE 17: GALLERY ACCESS 



13 
 

 

 

Using this Widget the user can choose his country's name, followed by his state within that 

country, and lastly his city of residence. 
 

 

 

 

 

FIGURE 19: COUNTRY SELECTOR FIGURE 20: STATE SELECTOR WITHIN THE 

COUNTRY 
FIGURE 18: CITY SELECTOR WITHIN THE 

STATE 



14 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Using this Widget the user can choose his birthday precisely, specifying the year, month, and day. 

 
 

 

 

 

FIGURE 21: DATE SELECTOR FIGURE 22: YEAR AND MONTH SELECTOR 



15 
 

Artist Home Page: Once the Artist signs in, he will navigate to the Artist home page. This page 

contains the Artist Account information, his name, his profile picture, his project name, number of 

followers, and the category that project belongs to. Also, it contains the Crafts the Artist made and 

uploaded them to the platform. For each Item the Artist will get its name, price, photo, the number 

of likes and comments on that Item, and how many times it has been ordered. 

FIGURE 23: ARTIST HOME PAGE WITH SORT OPTION 



16 
 

Artist’s Item Details Page: The Artist can reach the item details page by tapping in the item he 

wants that appears in the Artist home page. In This page the Artist can retrieve more information 

about his item, also can easily update the item details and then save the changes, moreover he can 

delete that Item. one more important thing about this page, the Artist can gets the users comments 

in that item. 

 

FIGURE 24: ITEM'S DETILES PAGE



17 
 

Comment Report Page: If the Artist finds a bad comment, he has the option to submit a report to 

the administrator for examination. If it is determined that the comment violates the rules, it will be 

deleted by the administrator. 

 

 

FIGURE 25: REPORT COMMENT PAGE 



18 
 

Add a New Item to the Artist’s Items: In this Page the Artist can selects his new items details, 

like the item picture, name, price and description. Once submitted, the new item will be included 

in the artist's list of objects. 

 

FIGURE 26: ADD NEW ITEM PAGE 

 



19 
 

Orders Page: In this Page the Artist can reaches the basic information about all the orders he got, 

like the order id, total price, the ordered date and his states. 

 

 

 

 

 

 

 

 

FIGURE 28:ORDERS PAGE FIGURE 27: NO ORDERS OPTION 



20 
 

Order’s Details Page: In this Page the Artist can reaches more specific information about the 

order he gets, it will display the customer contact information, name, phone number, and a list of 

the items, the user has ordered. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

FIGURE 29: ORDER'S DETAILS PAGE 



21 
 

Customer Messaging: If the artist wants to connect the customer, he will be able to do this through 

the chat system the application supports, he just has to tap at the message button appears at the 

bottom of the order details page, to the customer to his contacts, then he can always find him in 

the Chat Home Page, it will enables the artist to send text messages, emojis,  images form the 

gallery and to capture an image then send it. Moreover, the artist can delete the message, or display 

its details.  

Chat Home Page: This page can be reached by the message button at the app bar, it will display 

all the chatrooms the artist has made, with the ability to reach a specific chat room page to continue 

chatting. 

  

FIGURE 32: FIRST CHAT FIGURE 31: EMOJIS OPTION FIGURE 30: CHAT CONTACTS 



22 
 

FIGURE 33: MESSAGE DETAILS FIGURE 35: TEXTING AND SENDING EMOJIS FIGURE 34:SENDING IMAGES IN CHAT 



23 
 

Artist Account Page: In the account Page the user can reach all his information, with the ability 

to review and update it. The Artist information is organized in four sections: The personal 

information section, here the Artist can find information about him, like the name, location, email 

address. The project information section, which contains the project info, like project name and 

the category the projects belongs to. 

 

 

 

 

 

FIGURE 36: ARTIST ACCOUNT PAGE AND PERSONAL INFORMATION AND PROJECT INFORMATION OPTIONS 



24 
 

 

 



25 
 

The Bank information section, which contains the artist bank account information, with the ability 

to update the information. The last section is enabling the artist to change his password after 

confirming his current password. In this page the artist can find to sign out. 

 

FIGURE 39: BANK INFORMATION PAGE FIGURE 38: CHANGE PASSWORD PAGE FIGURE 37: LOG OUT OPTION 



26 
 

User Home Page: In the Users home page, the user can finds all the categories the application 

supports, and the ability to go through each category items, also the user will find the items the 

users he follows post. 

 

FIGURE 40: USER HOME PAGE 

 

 

 

 



27 
 

Category Items page: for each category in the application the user can access the list of items 

belonging to this category from all the artists in the platform. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

FIGURE 41: CATEGORY ITEMS PAGE 



28 
 

Item’s details page: for each item in the app the user can reach that item details page to get more 

info about that item, he also can interact with it by like and comment and get the other users’ 

interactions. Moreover, he can add the item to favorites or add to the cart. 

 

 

 

 

 

 

 

 

 

 
 

 

 

 

 

 

 

 

 

FIGURE 42: ITEM DETAILS PAGE 



29 
 

Item’s Artist profile page: if the user likes an item and wants to see more items from that creator, 

he can access the profile page for the item’s artist from the item details page. In the Artist profile 

page, the user can either follow the artist, message him to ask about something using the chat 

system, or he can just review the artist’s items. 

  

FIGURE 44: CHAT ROOM PAGE 
FIGURE 43: ARTIST PROFILE PAGE 



30 
 

Favorites Page: on this page the user can access all the items he already has added to his favorites, 

from this page the user also can reach each item’s details page, to complete the purchase process. 

 

FIGURE 45: FAVOURITES PAGE 

 



31 
 

Cart Page: on this page the user can reach all the items he added to cart, for each item he can 

increase or decrease the quantity or even delete the item from the cart. The total price of all the 

items will always be displayed at the end of the page. After the user finishes his cart design, he 

can now move to the payment process. 

 

FIGURE 46: SHOPPING CART PAGE 

 



32 
 

Payment page: on this page the user can choose the payment method he wants between PayPal 

and Credit Card, for each option this user must enter his information to complete the purchase 

process. 

 

FIGURE 47: PAYMENT PAGE WITH CREDIT CARD FIGURE 48: PAYMENT PAGE WITH PAYPAL 



33 
 

Search Page: on this page the user can search for different entities like artists, projects, or items, 

he just must select the entity he wants, and write the name of the thing he is looking for to find it. 

 

. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

FIGURE 50: SEARCH PAGE WITH RESULT FIGURE 49: SEARCH PAGE 



34 
 

User’s Account Page: The User Account page is not that much different from the Artist Account 

page; the difference occurs because of the different information required for both users. Here we 

display the user information with the ability to update them in three sections: The personal 

information section, the Interested in categories and the change password section. Moreover, the 

user has the option to log out from his account in this page. 

FIGURE 52: INTRESTED IN CATEGORIES FIGURE 51: USER ACCOUNT PAGE 



35 
 

Admins Categories page: the administrator has privileged access to the system's categories, he 

can review the current categories in the system, add a new one, also he can review the Artists 

categories suggestions. When an artist registers in the system and cannot find their project 

category, they can submit a suggestion, the admin will then review these suggestions, and decide 

which to accept or delete. 

FIGURE 54: ADD NEW CATEGORY OPTION AT ADMIN FIGURE 53: ADMIN'S CATEGORIES PAGE 



36 
 

Admins Reports page: the users and the artist can submit reports about bad comments in an item, 

this comment will be reviewed by the admin and if it violates the rules, it will be deleted. 

 

FIGURE 55: ADMIN'S REPORTS PAGE



37 
 

 

3.2.2 WEB PAGES 
All the functionalities supported by the application are supported in the web page with a better 

design that suites the web page. 

Welcome Page: with the two sign-up options and the sign in option. 

 

FIGURE 56: WEB WELCOME PAGE 

Sign In Page: with the authentication and validation, the user must enter his correct sign in 

credential to sign in. 

 

FIGURE 57:WEB SIGN IN PAGE



38 
 

Artist Sign Up Page 

 

FIGURE 58: WEB ARTIST SIGN UP PAGE 

Artist Transition at Sign Up Page 

 

FIGURE 59:WEB ARTIST TRANSITION AT SIGN UP PAGE 

 



39 
 

Artist Personal Info Completion at Sign Up Page 

 

FIGURE 60: ARTIST PERSONAL INFO COMPLETION AT SIGN UP PAGE 

Artist Bank Info Completion at Sign Up 

 

FIGURE 61: ARTIST BANK INFO COMPLETION AT SIGN UP 

 

 

 

 



40 
 

User Personal Info Completion at Sign Up 

User Interested in Categories Selection 

 

FIGURE 63: USER INTERESTED IN CATEGORIES SELECTION AT WEB 

 

 

FIGURE 62: USER PERSONAL INFO COMPLETION AT WEB 



41 
 

User Web Home Page 

 

FIGURE 64: USER WEB HOME PAGE 

User Web Favorites Page 

 

FIGURE 65:USER WEB FAVORITES PAGE



42 
 

User Web Account Page 

 

FIGURE 66: USER WEB ACCOUNT PAGE 

Shopping Cart at Web  

 

FIGURE 67:WEB SHOPPING CART 

 



43 
 

Web Search Page  

 

FIGURE 68: SEARCH WEB PAGE 

Web Search Page with Result  

 

FIGURE 69:WEB SEARCH PAGE WITH RESULT 

 

 

 

 



44 
 

Item’s Details Page at Web 

 

FIGURE 70: ITEM’S DETAILS PAGE AT WEB 

Artist Profile from User View at Web 

 

FIGURE 71: ARTIST PROFILE FROM USER VIEW AT WEB 

 

 

 

 



45 
 

Chats Home Screen at Web 

 

FIGURE 72: CHATS HOME SCREEN AT WEB 

Artist’s Web Home Page 

 

FIGURE 73: ARTIST’S WEB HOME PAGE 

 

 

 

 



46 
 

Artist's Add New Item Page at Web 

 

FIGURE 74: ARTIST'S ADD NEW ITEM PAGE AT WEB 

Artist's Web Orders Page 

 

FIGURE 75: ARTIST'S WEB ORDERS PAGE 

 

 

 

 



47 
 

Artist's Web Order’s Details Page 

 

FIGURE 76: ARTIST'S WEB ORDER’S DETAILS PAGE 

Artist's Web Orders Page with no orders available 

 

FIGURE 77: NO ORDERS AVAILABLE AT WEB 

 

 

 

 



48 
 

Item’s Details Page for Artist in Web 

 

FIGURE 78: ITEM’S DETAILS PAGE FOR ARTIST IN WEB 

Artist's Web Account Page 

 

FIGURE 79: ARTIST'S WEB ACCOUNT PAGE 

 

 

 

 



49 
 

Admin’s Web Categories Page 

 

FIGURE 80: ADMIN’S WEB CATEGORIES PAGE 

Add New Category Option for Admin in Web 

 

FIGURE 81: ADD NEW CATEGORY OPTION FOR ADMIN IN WEB 

 

 

 

 



50 
 

Admin Reports Page in Web 

 

FIGURE 82: ADMIN REPORTS PAGE IN WEB 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



51 
 

CHAPTER 4: DISCUSSION 
 

The need to address an empty niche in the online market of handmade crafts has led CraftHub, a 

new platform that connects traditional crafts professionals and enthusiasts directly with each other. 

Modern online shopping era made it even harder for craftspeople to sell their items, because they 

can hardly promote the handmade over general platforms. 

 CraftHub works differently it undertakes the initiative of giving all Artisans a place to list their 

unique Hand-made products and get started on selling from there. Engage with Artisans: The 

platform integrates registration functionality across both creators and users which increases the 

level of engagement to create a personalized experience. CraftHub is scalable, secure and has a 

user-friendly experience due to the use of frontend technologies as Flutter, backend with Django 

server-side framework real-time sync by Firebase combined PostgreSQL roles for Database 

management. Where these technologies will lead to more streamlined development as well as a 

powerful backend and real-time capabilities are essential for any modern e-commerce platform. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



52 
 

CHAPTER 5: CONCLUSION  
 

But, for the stream of artisans looking forward an established online book or promote their 

handmade craft products - a new solution comes in place as CraftHub which revolutionize into our 

handicraft world. CraftHub not only helps artisans overcome their sales and marketing challenges 

but uses emergent tech, combined with a user-centric design to connect them directly to the end-

users (consumers in this case) while creating an ecosystem where users feel involved through 

technology at its core. The effectiveness of the platform can be gauged by its efficiency to simplify 

browsing, searching and buying processes resulting in elevated user satisfaction followed by an 

increased engagement. This makes CraftHub unique in the e-commerce space with one of its 

primary value propositions is that users are served curated experiences based on what hand-made 

products they like. 

As the project ends, CraftHub remains on alert to keep supporting artisans and overall improve 

handmade crafts industry with its out of the box features along with top grade technological front. 

 

 

 

 

 

 

 

 

 

 

 



53 
 

CHAPTER 6: RECOMMENDATION 
 

In the future, we can also improve Craft Hub incrementally by rigorously user-testing more 

features and iterating on our new UI using feedback from users. Features relating to advanced 

search filters, personalized recommendations and social sharing among others could make user 

engagement & retention a lot better. Additionally, they could consider other payment gateways to 

integrate or add language support for it to cater more towards an international market. In order to 

grow with the platform, keep it scalable and highly performing you will need regular updates on 

Django back-end technologies like Firebase. 

To achieve the envisioned end-state of a mature, social e-commerce marketplace that offers not 

only socially driven purchasing decisions but also personalized content and commerce experiences 

from around the globe, partnerships with artisan communities will be key to driving Craft Hub’s 

growth strategies.



54 
 

CHAPTER 7: REFERENCES 

 

[1]Flutter. (n.d.). Get started: Install Flutter. Retrieved June 27, 2024, from 

https://docs.flutter.dev/get-started 

[2] Django. (n.d.). Django documentation: Getting started. Retrieved June 27, 2024, from 

https://www.djangoproject.com/start/ 

[3] Freddo, M. (n.d.). Mastering MVVM: A comprehensive guide to the Model-View-

ViewModel architecture. Retrieved June 27, 2024, from https://dev.to/mochafreddo/mastering-

mvvm-a-comprehensive-guide-to-the-model-view-viewmodel-architecture-221g 

[4] PostgreSQL. (n.d.). PostgreSQL: The world's most advanced open source database. Retrieved 

June 27, 2024, from https://www.postgresql.org/ 

[5] BLoC Library. (n.d.). Getting started with BLoC. Retrieved June 27, 2024, from 

https://bloclibrary.dev/getting-started/ 

[6] Felix Angelov. (n.d.). Flutter BLoC package. Retrieved June 27, 2024, from 

https://pub.dev/packages/flutter_bloc 

[7] Firebase. (n.d.). Firebase Documentation. Retrieved June 27, 2024, from 

https://firebase.google.com/docs/