QUILLYZ
SOCIAL NETWORK & TRAVEL WEB APPLICATION
FINAL GRADE PROJECT
GRADE 2023-2024
AUTHORS
MARCOS CONNOLLY LOPEZ
STEVEN MALLQUI AGUILAR
DIRECTOR
RAMÓN GONZÁLEZ DEL CAMPO RODRÍGUEZ BARBERO
GRADE IN COMPUTER SCIENCE
GRADE IN SOFTWARE ENGINEERING
FACULTAD DE INFORMÁTICA
UNIVERSIDAD COMPLUTENSE DE MADRID
SEPTEMBER 2024
QUILLYZ
RED SOCIAL & APLICACIÓN WEB DE VIAJES
TRABAJO FIN DE GRADO
CURSO 2023-2024
AUTORES
MARCOS CONNOLLY LOPEZ
STEVEN MALLQUI AGUILAR
DIRECTOR
RAMÓN GONZÁLEZ DEL CAMPO RODRÍGUEZ BARBERO
GRADO EN INGENIERÍA INFORMÁTICA
GRADO EN INGENIERÍA DEL SOFTWARE
FACULTAD DE INFORMÁTICA
UNIVERSIDAD COMPLUTENSE DE MADRID
SEPTIEMBRE 2024
QUILLYZ
SOCIAL NETWORK & TRAVEL WEB APPLICATION
FINAL GRADE PROJECT IN COMPUTER SCIENCE
FINAL GRADE PROJECT IN SOFTWARE ENGINEERING
AUTORS
MARCOS CONNOLLY LOPEZ
STEVEN MALLQUI AGUILAR
DIRECTOR
RAMÓN GONZÁLEZ DEL CAMPO RODRIGUEZ BARBERO
SEPTEMBER 2024
GRADE IN COMPUTER SCIENCE
GRADE IN SOFTWARE ENGINEERING
FACULTAD DE INFORMÁTICA
UNIVERSIDAD COMPLUTENSE DE MADRID
12 SEPTEMBER 2024
DEDICATED
To ou amilies, iends and hose who a e
no longe wi h us
4
THANK-YOU’S
A special hank you o ou amilies, who s ood by ou side, suppo ing us
om he e y beginning o ou academic jou ney and o hei in luence
mo i a ing us and gi ing us he oppo uni y, yea a e yea , o pu sue
wha we a e mos passiona e abou . You us has been in aluable in
helping us achie e ou goals, and o ha , his wo k is dedica ed o you.
We would also like o ex end ou g a i ude o ou ad iso Rámon
González, o guiding us and belie ing in he p ojec om he momen we
i s sha ed ou idea. This p ojec has been made possible h ough many
hou s o wo k, la e nigh s, and mos impo an ly, a g ea deal o passion.
5

ABSTRACT
Quillyz is an inno a i e web applica ion ha me ges a el planning wi h social
ne wo king. We ini ially no iced ha he cu en g oup a el applica ions made no
e o owa ds hei ip ecommenda ion. Whe e each indi idual use had o skim
h ough e e y ip o manually, checking hei de ails one by one.
A e seeing his, we decided o o e hem a di e en and simple way o ind ips, so
ha hey’ e able o ocus on enjoying he ip while making i easie o ind iends along
he way. Gi ing hem he abili y o join a ip ha hey’ll ully enjoy o he chance o
make hei own, ha is ocused on g ouping like minded people.
Addi ionally, we expanded i in o a social ne wo k, o help de elop communi ies and
gi e hem he abili y o sha e and commen hei expe iences and ollow each o he ’s
p og ess, helping hem keep in con ac and de elop a meaning ul long las ing
ela ionship, while pushing hem o keep a elling oge he and make new memo ies.
Wi h his, we hope o gi e hem a new and o iginal applica ion o a el.
Keywo ds: Social Ne wo k, T a el Planning, Web Applica ion, Clus e ing Algo i hms,
Gene ic Algo i hms, Recommenda ion Algo i hm, MERN, Pos s Sha ing, Da a Analysis.
6
RESUMEN
Quillyz es una inno ado a aplicación web que combina la plani icación de iajes con
una ed social. Inicialmen e no amos que las aplicaciones ac uales de iajes en g upo
no hacían ningún es ue zo en cuan o a la ecomendación de iajes. Cada usua io
enía que e isa manualmen e cada iaje y e i ica sus de alles uno po uno.
Después de obse a es o, decidimos o ece les una mane a di e en e de encon a
iajes de una o ma más sencilla, pa a que puedan en oca se en dis u a el iaje
mien as les acili amos encon a amigos po el camino. Les damos la opción an o de
uni se a un iaje que dis u a án como de c ea uno p opio, con un en oque en
ag upa pe sonas con in e eses a ines.
Además, al expandi la pla a o ma hacia una ed social, podemos ayuda a desa olla
comunidades y da les la capacidad de compa i y comen a sus expe iencias, segui
el p og eso de o os y man ene el con ac o. Es o les pe mi i á desa olla elaciones
signi ica i as y du ade as, mo i ándolos a segui iajando jun os y c eando nue os
ecue dos.
Con es o, espe amos o ece les una aplicación nue a y o iginal pa a iaja .
Palab as cla e: Red Social, Aplicación de Viajes, Aplicación Web, Algo i mos de
Clus e ing, Algo i mos Gene icos, Algo i mo de Recomendación, MERN, Pos s, Análisis
de In o mación.
7
CONTENT INDEX
Chap e 1 - In oduc ion 1
1.1 Mo i a ion 1
1.2 Objec i es 2
1.3 Wo k Plan 3
Chap e 2 - S a e o he a 5
Chap e 3 - So wa e De elopmen Technologies 7
3.1 Co e Technologies 7
3.2 De elopmen Tools 8
3.3 Rele an Dependencies and Lib a ies 9
Chap e 4 - Sys em Design, A chi ec u e, and Implemen a ion 11
4.1 Sys em A chi ec u e 11
4.2 Da abase Design 16
4.3 F on end Implemen a ion 19
4.4 Backend Implemen a ion 24
4.5 Fea u es Implemen ed 29
4.5.1 Use Module 29
Login 29
Regis e 29
P o ile 29
Change P o ile Pic u e 29
Upload pos 30
View Followe s 30
View Following 30
4.5.2 T ip Module 31
Recommended T ips 31
C ea e T ip 31
Join T ip 31
Upda e - Cancel T ip 31
8
Disjoin T ip 31
4.5.3 Social Ne wo k Module 32
Sea ch People 32
Cha 32
T ip Album 32
Chap e 5 - Recommenda ion Algo i hm 33
5.1 Ma chmaking Algo i hm 34
5.2 Algo i hm Design and G aphs 35
5.3 Omega : Algo i hm Con olle 36
5.4 E alua ion a ian s 36
5.5 Algo i hm Design and G aphs 37
Chap e 6 - Conclusions and Fu u e Wo k 38
6.1 Conclusions 38
6.2 Fu u e Wo k 39
6.3 Con inuous Imp o emen 41
Chap e 7 - Use Expe ience and Feedback 42
7.1 In e iews & Ques ionnai es 42
7.2 Analysis o Use Feedback 42
Chap e 8 - Pe sonal Con ibu ions 44
8.1 Con ibu ions by Ma cos: 44
8.2 Con ibu ions by S e en: 44
Bibliog aphy 45
Books 45
Online Resou ces 45
Technical Documen a ion 45
Web Sc eensho s Examples 47
Login 47
Regis e 48
P o ile 48
Change P o ile Pic u e 49
Upload pos 50
View Followe s 51
View Following 52
Recommended T ips 52
9
skilled in and passiona e abou . This lexibili y helped us o wo k e icien ly and main ain
a high le el o mo i a ion h oughou he p ojec .
Ou wo k plan was o ganized a ound h ee key a eas: modeling he applica ion's da a
en i ies, designing he a chi ec u e and ull-s ack de elopmen , and de eloping he
ecommenda ion algo i hm. This s uc u e enabled us o co e bo h he echnical and
use expe ience aspec s o he applica ion, ensu ing a well- ounded de elopmen
p ocess.
We s a ed by de ining he co e da a model ha would suppo he applica ion's
unc ionali y. This phase in ol ed iden i ying he essen ial da a s uc u es and
ela ionships needed o he applica ion o unc ion e ec i ely. Es ablishing a clea and
obus da a model om he beginning p o ided a solid ounda ion o he es o he
de elopmen p ocess. Be o e s a ing wi h he co e de elopmen asks, we i s
comple ed a p ojec se up phase. This in ol ed con igu ing he ools, en i onmen s,
and amewo ks needed o coding and es ing. We se up e sion con ol, es ablished
coding s anda ds, and selec ed he app op ia e lib a ies. This p epa a ion was essen ial
o minimizing echnical issues and ensu ing a smoo h, uni ied wo k low. Once he se up
was comple e, we began wo king on he applica ion's design and a chi ec u e
alongside he de elopmen o he ecommenda ion algo i hm. The design phase
in ol ed planning he applica ion's o e all s uc u e, including he da abase schema,
API endpoin s, and a cohesi e on -end layou , aiming o a modula and scalable
a chi ec u e ha could suppo bo h cu en ea u es and u u e enhancemen s. A he
same ime, we esea ched di e en algo i hms and chose he k-means clus e ing
algo i hm, aining and es ing i locally o ensu e i p o ided accu a e ip
ecommenda ions based on use p e e ences and pas beha io s. Th oughou his
p ocess, we di ided asks acco ding o ou s eng hs bu emained ac i ely in ol ed in
all aspec s o de elopmen . This collabo a i e app oach allowed us o in eg a e he
4

ull-s ack a chi ec u e wi h he ecommenda ion algo i hm smoo hly, esul ing in a
well- ounded and use - iendly applica ion.
Chap e 2 - S a e o he a
The landscape o social ne wo k a el applica ions has e ol ed signi ican ly, wi h
se e al pla o ms o e ing a ange o ea u es ailo ed o di e en aspec s o a el and
social in e ac ion:
●T ipmake y: This pla o m ocuses on cus om ip planning, allowing use s o
c ea e and pe sonalize hei a el i ine a ies. Howe e , i s social ea u es a e
limi ed, emphasizing i ine a y managemen o e encou aging use in e ac ion.
●T a ello: T a ello combines a el planning wi h social ne wo king by allowing
use s o connec wi h o he a ele s, sha e expe iences, and ecei e local
ecommenda ions. I s social ea u es a e s onge compa ed o T ipmake y, bu
he pla o m is mainly cen e ed a ound use -gene a ed con en and local ips
a he han deep pe sonaliza ion.
●S elle : Known o i s emphasis on isual s o y elling, allowing use s o c ea e and
sha e a el s o ies h ough ich media. Al hough i o e s social ea u es like
ollowing and commen ing, i lacks ad anced pe sonaliza ion in i s
ecommenda ion sys em, ocusing ins ead on he isual and na a i e aspec s o
a el.
●WeRoad: WeRoad akes a di e en app oach by ocusing on g oup a el and
communi y building. I o ganizes ips o g oups and suppo s social in e ac ions
among a ele s. Al hough i is e ec i e in a anging g oup a el expe iences, i
lacks ad anced pe sonalized ecommenda ions.
These pla o ms demons a e he a ious ways social ne wo king can be in eg a ed wi h
a el unc ionali ies. Howe e , he e is a no iceable gap in combining obus
5
pe sonalized ecommenda ions wi h comp ehensi e social ea u es, which is a key a ea
o in e es in cu en esea ch and de elopmen .
Recommenda ion algo i hms a e essen ial o enhancing use expe ience on digi al
pla o ms by p o iding pe sonalized con en . Algo i hms like collabo a i e il e ing,
con en -based il e ing, hyb id models, and clus e ing me hods such as k-means a e
commonly used o g oup use s wi h simila p e e ences and p o ide mo e accu a e
sugges ions. Leading pla o ms like Ne lix, Amazon, Spo i y, YouTube, and Ai bnb
e ec i ely u ilize hese echniques o boos use sa is ac ion h ough mo e a ge ed
ecommenda ions.
In he wo ld o web de elopmen , he MERN s ack, which includes MongoDB, Exp ess.js,
Reac .js, and Node.js, has become a go- o choice o de eloping dynamic and obus
web applica ions. This s ack is behind majo pla o ms like Facebook, Ins ag am, and
Ai bnb. Social media pla o ms like Facebook use i o manage massi e amoun s o use
da a and deli e eal- ime in e ac ions. E-comme ce gian s like Amazon and eBay
u ilize he s ack o o e seamless shopping expe iences and p o ide pe sonalized
ecommenda ions based on use ac i i y.
The appeal o he MERN s ack lies in i s use o Ja aSc ip ac oss bo h clien and se e
sides, which s eamlines de elopmen and boos s p oduc i i y by minimizing he need
o swi ch be ween di e en p og amming languages. MongoDB’s lexible a chi ec u e
and Node.js’s non-blocking I/O make he s ack pa icula ly scalable, capable o
managing la ge da ase s and high a ic olumes e icien ly. The s ack’s e sa ili y is
e iden in i s wide adop ion ac oss a ious applica ions, om p ojec managemen
ools like T ello o s eaming se ices like Ne lix, highligh ing i s abili y o suppo a di e se
ange o obus web solu ions.
6
Chap e 3 - So wa e De elopmen Technologies
3.1 Co e Technologies
MongoDB: MongoDB is a NoSQL da abase ha we used o manage and s o e di e se
and complex da a s uc u es, such as use p o iles, a el i ine a ies, and in e ac ions. I s
schema-less design p o ided us wi h lexibili y in da a modeling, allowing o e icien
s o age and e ie al o in o ma ion. MongoDB’s abili y o handle la ge olumes o da a
was pe ec o he scalable and dynamic na u e o ou applica ion.
Exp ess.js: We used Exp ess.js, a web applica ion amewo k o Node.js, o build and
manage REST ul APIs wi hin ou applica ion. I made handling HTTP eques s, ou ing,
and in eg a ing middlewa e s aigh o wa d, ensu ing smoo h communica ion be ween
he clien -side and se e -side componen s.
Reac .js: Reac .js, a popula Ja aSc ip lib a y, was used o de elop he use in e ace
o ou applica ion. I allowed us o c ea e eusable UI componen s and e icien ly
ende dynamic con en . I s componen -based a chi ec u e made he UI mo e
dynamic and esponsi e, suppo ing single-page applica ion unc ionali y and
enhancing o e all usabili y.
Node.js: Node.js se ed as he Ja aSc ip un ime o execu ing se e -side code in ou
applica ion. We employed i s non-blocking, e en -d i en a chi ec u e o handle
mul iple use eques s simul aneously, which was i al o main aining pe o mance.
WebSocke s: We implemen ed WebSocke s o suppo eal- ime ea u es like li e cha
and no i ica ions. By p o iding a pe sis en connec ion be ween he clien and se e ,
WebSocke s made he app mo e in e ac i e and engaging by ins an ly upda ing use s
wi h new in o ma ion.
7
Py hon: We also used Py hon o de elop he ecommenda ion algo i hm wi hin ou
applica ion. Py hon's ex ensi e lib a ies and amewo ks o da a analysis and machine
lea ning made i ideal o implemen ing sophis ica ed ecommenda ion sys ems.
Flask: Flask is a ligh weigh Py hon web amewo k ha we used o connec ou
backend wi h he Py hon se ice unning he ecommenda ion algo i hm. I acili a ed
communica ion be ween ou Node.js backend and he Py hon-based
ecommenda ion engine, ensu ing ha da a and ecommenda ions we e e icien ly
passed be ween sys ems.
3.2 De elopmen Tools
Vi e: Vi e is a mode n build ool ha p o ides a as de elopmen en i onmen o web
applica ions. We used i in ou p ojec o imp o e he de elopmen wo k low by
p o iding ins an ho module eplacemen (HMR). This ea u e allowed us o see
changes in he code in eal- ime, di ec ly in he b owse , sa ing a lo o ime du ing
de elopmen and debugging.
Docke : Docke is a pla o m ha enables de elope s o c ea e, deploy, and un
applica ions in con aine s, which a e ligh weigh , s andalone, and execu able
packages o so wa e. By con aine izing ou applica ion, we a oided he usual "i wo ks
on my machine" p oblems. Docke simpli ied ou de elopmen p ocess and made i
mo e p edic able, gi ing us peace o mind ha he applica ion would beha e he
same way ac oss di e en en i onmen s.
Gi : Gi is a dis ibu ed e sion con ol sys em ha allows mul iple de elope s o wo k on
he same p ojec e icien ly. I helped us keep ack o changes, collabo a e mo e
e ec i ely, and main ain a comp ehensi e his o y o ou wo k. The abili y o manage
b anches and me ge changes was pa icula ly help ul in ensu ing ou code emained
s able and up- o-da e.
8
Gi Hub: Gi Hub is a cloud-based hos ing se ice o Gi eposi o ies. We used Gi Hub o
s o e ou codebase and acili a e collabo a ion. I p o ided e sion con ol, issue
acking, code e iew, and p ojec managemen ea u es, which helped us coo dina e
asks, e iew code changes, and main ain he o e all quali y o he p ojec .
NPM (Node Package Manage ): NPM is he de aul package manage o Node.js,
allowing de elope s o ins all and manage lib a ies and dependencies o hei p ojec s.
We used NPM o handle all he Ja aSc ip lib a ies and amewo ks equi ed o ou
applica ion. I simpli ied he p ocess o upda ing packages and main aining a clean
p ojec s uc u e, which is c ucial o long- e m main ainabili y.
Pos man: Pos man is a popula API es ing ool ha allows de elope s o design, es ,
and documen APIs. We used Pos man ex ensi ely du ing he de elopmen phase o
es he REST ul APIs c ea ed wi h Exp ess.js. This ool helped us simula e HTTP eques s,
alida e esponses, and debug issues wi h se e -side logic, ensu ing obus and eliable
API unc ionali y.
Visual S udio Code: Visual S udio Code (VS Code) is a ligh weigh ye powe ul sou ce
code edi o . I s speed, e sa ili y, and wide ange o ex ensions made i an ideal choice
o us. We app ecia ed i s buil -in suppo o debugging, lin ing, and e sion con ol,
which made de elopmen mo e e icien .
Tailwind CSS: Tailwind CSS is a u ili y- i s CSS amewo k ha p o ides low-le el u ili y
classes o building cus om designs. I was pa icula ly help ul in main aining a consis en
design ac oss he applica ion and keeping ou s yleshee s clean and manageable.
3.3 Rele an Dependencies and Lib a ies
Zod: Zod is a TypeSc ip - i s schema alida ion lib a y. We used i o alida e and ensu e
he in eg i y o clien -side da a s uc u es in ou applica ion.
9

Axios: Axios is a p omise-based HTTP clien o making se e eques s. I simpli ied ou
handling o API eques s and esponses, making da a e ching and in eg a ion
s aigh o wa d.
JWT (JSON Web Tokens): JWT is a compac , URL-sa e oken o ma o secu ely
ansmi ing in o ma ion be ween pa ies. We used i o use au hen ica ion and session
managemen , allowing secu e access con ol ac oss ou applica ion.
JS-Cookies: JS-Cookies is a lib a y o managing cookies in he b owse . I helped us
s o e use -speci ic da a, like au hen ica ion okens and p e e ences, ensu ing a
consis en use expe ience.
Mul e : Mul e handles ile uploads in mul ipa / o m-da a. We used i o manage image
uploads om use s.
Zus and: Zus and is a small, as , and scalable s a e managemen solu ion o Reac .
We used i o manage global s a e e icien ly, hanks o i s simple API and pe o mance
bene i s.
pymongo: PyMongo is a Py hon d i e o MongoDB. I acili a ed in e ac ion wi h
MongoDB in ou Py hon-based ecommenda ion algo i hm, allowing o e icien da a
e ie al and manipula ion.
numpy: NumPy is essen ial o scien i ic compu ing in Py hon. We used i o nume ical
ope a ions and da a p ocessing in ou ecommenda ion algo i hm, le e aging i s
a ay-handling and ma hema ical unc ions.
Sklea n: An essen ial lib a y used in one o ou algo i hms, ha con ains clus e ing
unc ions and da a examples used o es ing pu poses.
10
Chap e 4 - Sys em Design, A chi ec u e, and
Implemen a ion
4.1 Sys em A chi ec u e
When designing ou applica ion, we wan ed o make su e ha ou de elopmen and
es ing en i onmen s we e consis en and eliable. To achie e his, we decided o
docke ize ou applica ion. Docke made i easie o us o bundle all he necessa y
so wa e componen s, dependencies, and con igu a ions in o po able con aine s. This
app oach no only allowed us o wo k smoo hly ac oss di e en ope a ing sys ems, like
macOS and Linux in ou case, bu also simpli ied ou deploymen p ocess, making i
mo e manageable and p edic able.
11
Why We Chose o Docke ize Ou Applica ion:
●Consis ency Ac oss En i onmen s: One o he bigges bene i s o using Docke
was ha i ga e us a consis en de elopmen en i onmen . Wi h Docke
con aine s, we we e able o c ea e an en i onmen ha wo ks he same way
e e ywhe e, whe he i ’s on ou local machines o on a p oduc ion se e .
●Isola ion and Secu i y: Each componen o ou applica ion uns in i s con aine ,
isola ed om he o he s. This isola ion p o ides a laye o secu i y, as p ocesses
a e con ained wi hin hei en i onmen and canno in e e e wi h each o he . I
also allows us o upda e o modi y a speci ic componen wi hou a ec ing he
es o he sys em.
●De elopmen Flexibili y: Ano he big ad an age o Docke was he lexibili y i
ga e us in using di e en echnologies. Fo example, we used Node.js o mos o
ou applica ion logic and Py hon (wi h Flask) o ou ecommenda ion algo i hm.
Docke made i easy o un hese di e en componen s oge he and ensu ed
hey could communica e e ec i ely.
To manage all hese con aine s, we used Docke Compose, which helped us de ine
and un ou mul i-con aine applica ion. In ou docke -compose.yml ile, we se up he
ollowing se ices:
●MongoDB: We used MongoDB as ou NoSQL da abase o manage and s o e
di e se da a s uc u es. The MongoDB se ice is se up wi h a speci ic image
(mongodb/mongodb-communi y-se e :6.0-ubi8), and we mapped he de aul
MongoDB po 27017 o ensu e p ope communica ion. The da a is s o ed
pe sis en ly using Docke olumes, so he da a is no los when he con aine is
s opped o emo ed.
●Py hon Se ice: This se ice uns he Py hon en i onmen necessa y o ou
ecommenda ion algo i hm. The Py hon con aine uses he py hon:3.10-alpine
image. We con igu ed he Py hon se ice o ins all equi ed dependencies (Flask,
12
geopy, pymongo, numpy, sklea n, yping) and execu e he ecommenda ion
algo i hm wi h Flask p o iding a simple web se e o handle eques s om ou
Node.js backend. The Py hon se ice communica es wi h MongoDB o e ch and
p ocess da a o gene a ing ecommenda ions.
●Main Applica ion (Node.js): The main se ice o ou applica ion, de eloped in
Node.js, handles he co e logic and se es he on end buil wi h Reac . We
used he node:alpine image o a minimal Node.js en i onmen . The applica ion
is designed o in e ac wi h bo h he MongoDB da abase and he Py hon se ice,
acili a ing da a exchange and displaying ecommenda ions o he use . We
exposed po s 44380 and 3001 o handle HTTP and WebSocke connec ions,
espec i ely.
All hese se ices a e connec ed h ough a Docke ne wo k (quillyz_ne wo k), which
allows hem o communica e wi h each o he smoo hly. We managed en i onmen
a iables using an .en ile o s o e sensi i e in o ma ion, such as da abase c eden ials
and con igu a ion se ings. This app oach kep sensi i e da a secu e and allowed us o
change con igu a ions wi hou di ec ly modi ying he sou ce code.
We also used Docke olumes o da a pe sis ence and bind moun s o he Py hon and
Node.js se ices, linking ou local ile sys em o he con aine s. This se up allowed us o
see eal- ime code upda es du ing de elopmen .
By using Docke and Docke Compose, we c ea ed a lexible, scalable, and eliable
a chi ec u e ha mee s ou cu en needs and can easily adap o u u e changes.
Docke helped us ocus mo e on building and e ining he ea u es o ou applica ion
wi hou wo ying abou en i onmen -speci ic issues o dependency con lic s.
13
o manually pass p ops a e e y le el. This app oach simpli ies s a e managemen and
imp o es code e iciency.
Da a Fe ching and API In eg a ion
Fo communica ion be ween he on end and backend, we used Axios, a
p omise-based HTTP clien . Axios simpli ies he p ocess o making HTTP eques s and
handling esponses. I allowed us o pe o m many ope a ions, such as e ie ing use
da a, submi ing o ms, and in e ac ing wi h o he API endpoin s.
WebSocke In eg a ion
To enable eal- ime ea u es such as cha unc ionali y, we in eg a ed WebSocke s in o
ou on end. WebSocke s p o ide a pe sis en connec ion be ween he clien and
se e , allowing o wo-way communica ion. Unlike adi ional HTTP eques s, which a e
s a eless and in ol e a new connec ion o each eques , WebSocke s main ain an
open connec ion, enabling he se e o push upda es o he clien ins an ly.
Da a Valida ion
Clien -side alida ion was implemen ed using schemas o ensu e da a in eg i y and
enhance he use expe ience. Schemas de ine he s uc u e and cons ain s o da a
inpu s, allowing us o alida e use inpu be o e i is submi ed o he se e . This
p e- alida ion helps ca ch e o s and en o ce co ec da a o ma s, p o iding
immedia e eedback o use s and educing he likelihood o in alid da a eaching ou
backend.
20

He e’s how he on end ope a ion lows wo k o he h ee examples:
Login Reques
When a use a emp s o log in, hey i s en e hei c eden ials in o he login o m. The
p ocess s a s wi h Zod pe o ming clien -side alida ion on he inpu ields. I he inpu s
pass alida ion, he signUp me hod om he Au hCon ex is called. This me hod hen
igge s an HTTP eques using Axios o he backend’s login endpoin . Upon a success ul
esponse, he use ’s in o ma ion is s o ed in he Au hCon ex , which manages he use 's
au hen ica ion s a e and can be accessed h oughou he applica ion.
21
Send Message
When sending a message, he use ypes in he MessageInpu componen and submi s
i . The sendMessage me hod om MessageCon ex akes he message da a and calls
he backend API using Axios wi h sendMessageReques . Upon a success ul esponse,
he new message is e u ned and added o he con e sa ion s a e managed by
useCon e sa ion and Zus and. To display he upda ed messages in eal- ime,
useLis enMessage hook is used. This hook lis ens o new messages ia WebSocke s
h ough Socke Con ex , upda es he con e sa ion s a e, and ensu es he la es
messages a e isible in he UI.
22
Recommended T ips
Fo ecommending ips, when he home page loads, he RecommendedT ips
componen igge s a useE ec hook ha calls ge RecommendedT ips om
T ipCon ex . This unc ion makes an Axios call o ecommendedT ipsReques o e ch he
ecommended ips. Once he ips a e success ully e ie ed, hey a e ende ed in he
use in e ace, p o iding he use wi h sugges ed a el op ions based on he backend
da a.
23
4.4 Backend Implemen a ion
The backend o ou applica ion is designed wi h a clea , o ganized s uc u e o keep
hings manageable and e icien . I all s a s wi h se e .js, which ac s as he main en y
poin o ou API. This ile se s up he se e and con igu es essen ial middlewa e o
handle HTTP eques s, manage sessions, and ensu e secu i y.
Se e Ini ializa ion and Middlewa e Con igu a ion
In se e .js, he i s s ep is o impo socke .js. This ile is c ucial because i se s up ou
Exp ess app wi h Socke .IO, which allows us o handle eal- ime communica ion, like
cha messages, alongside s anda d HTTP eques s. A e se ing up he Exp ess app, we
con igu e se e al middlewa es:
24
JSON Pa se : This handles any incoming da a in JSON o ma , making i easy o wo k
wi h.
CORS (C oss-O igin Resou ce Sha ing): This is impo an o secu i y and allows us o
speci y which domains can in e ac wi h ou API.
Cookie Pa se : This middlewa e helps us manage cookies, which a e essen ial o
main aining use sessions.
Once e e y hing is con igu ed, he se e s a s lis ening o incoming eques s and
es ablishes a connec ion o ou MongoDB ins ance, which uns in a Docke con aine .
This se up ensu es ha ou backend is eady o handle all so s o eques s e icien ly
and secu ely.
Rou ing and Con olle s
Ou backend uses a laye ed s uc u e o o ganize he API logic. Rou ing is handled by
sepa a e ou e iles ha de ine endpoin s o di e en pa s o he applica ion, such as
au hen ica ion, use managemen , messaging, and ips. Each ou e is associa ed wi h
a con olle unc ion ha handles he speci ic business logic o ha ou e.
The con olle s se e as he middle laye , ecei ing eques s om he ou es, p ocessing
hem, and p epa ing a esponse. I a eques needs special handling, like uploading a
ile o checking i a use is logged in, he con olle will use cus om middlewa e unc ions
like mul e o au hRequi ed.
Se ices and Reposi o ies
Con olle s delega e he co e business logic o se ices, which a e esponsible o
p ocessing da a and implemen ing he ules o he applica ion. When i comes o
in e ac ing wi h he da abase, se ices call eposi o ies, which a e esponsible o he
ac ual da a ope a ions.
25

The eposi o y laye in e ac s wi h he MongoDB da abase using Mongoose, an Objec
Da a Modeling (ODM) lib a y o MongoDB and Node.js. Mongoose allows us o de ine
schemas o ou da a models, ensu ing da a consis ency and p o iding an API o CRUD
ope a ions.
In eg a ion wi h Py hon Se ice
One in e es ing pa o ou backend is how i in eg a es wi h a sepa a e Py hon se ice.
This Py hon se ice uns ou ecommenda ion algo i hms, which a e used o sugges ips
o use s. We se up his in eg a ion using Flask, a ligh weigh web amewo k o Py hon,
o c ea e a simple API ha ou main Node.js backend can alk o.
Login
26
When a use ies o log in, he on end sends hei de ails o he /login endpoin . The
se e i s checks he use 's c eden ials by sea ching o hei email in he da abase. This
is done h ough a se ies o unc ion calls ha s a in he con olle , mo e o he se ice
laye , and inally each he eposi o y, which di ec ly in e ac s wi h ou MongoDB
da abase. I he use is ound, he passwo d is e i ied using bc yp . I he passwo d
ma ches, we gene a e an access oken o he use session using ou JWT u ili y and
send his oken back o he clien along wi h he use da a. This ensu es ha subsequen
eques s a e au hen ica ed and au ho ized p ope ly.
Send Message
27
When he on end sends a message, i hi s he /send/:id endpoin . The backend i s
checks i he e’s an exis ing con e sa ion be ween he wo use s. I he e isn’ , i c ea es
a new con e sa ion eco d. I a con e sa ion al eady exis s, he message is simply
added o i . Once he message is sa ed, we use Socke .IO o push he new message o
he ecipien in eal- ime, which is c ucial o a smoo h cha expe ience. This eal- ime
unc ionali y elies on WebSocke s o main ain an open connec ion be ween he clien
and he se e , allowing upda es o be sen ins an ly. I ’s a g ea example o how ou
backend uses mode n web echnologies o enhance use in e ac i i y and
engagemen .
Recommended T ips
Fe ching ecommended ips akes ad an age o a di e en aspec o ou sys em.
When a use accesses he homepage, a eques is sen o he / ecommended
endpoin . Be o e any hing else happens, we make su e he eques is coming om an
au hen ica ed use by checking hei oken. Once hey’ e clea ed, we e ch
pe sonalized ip ecommenda ions by calling he Py hon se ice. This se ice uns ou
28
ecommenda ion algo i hm and sends back a lis o ips. The backend hen elays his
da a o he on end, p o iding use s wi h ele an sugges ions ailo ed jus o hem.
4.5 Fea u es Implemen ed
4.5.1 Use Module
Login
On he Quillyz landing page, he e is a login o m whe e you need o ill in you
email and passwo d o gain access. Any e o s, such as inco ec c eden ials,
emp y ields, and mo e, a e p ope ly handled and use s a e no i ied acco dingly.
View Images
Regis e
To sign up, he e is a "Regis e " bu on loca ed a he bo om o he login o m on
he landing page. Clicking his will ake you o he egis a ion page, whe e you'll
need o comple e all he equi ed ields in bo h he pe sonal in o ma ion and
p e e ences sec ions be o e hi ing he "Regis e " bu on. View Images
P o ile
On he igh -hand side o he na iga ion ba , you'll see you p o ile pic u e.
Clicking on i will allow you o access you p o ile page, whe e you can manage
you accoun . View Images
Change P o ile Pic u e
To change he p o ile pic u e, go o you p o ile page and click on he icon
abo e you cu en pic u e. This will allow you o upload a new image o upda e
you p o ile pic u e. View Images
29
5.3 Omega : Algo i hm Con olle
The Omega Algo i hm is dedica ed o p ope ly manage, lea n and e ol e o ailo
each ecommenda ion o a speci ied indi idual. This mas e algo i hm is inspi ed by
gene ic p og amming, based on Da win's heo y o e olu ion. Adap ing he weigh and
in luence o each algo i hm based on use beha iou and eedback. The necessa y
componen s used in a gene ic algo i hms mus include:
●Geno ype: Rep esen s a code used o calcula e he sha es o each algo i hm
om Alpha o Epsilon. This i em is composed om a numbe o genes.
●Gene: Is he indi idual alue o an algo i hm's in luence on he o e all
ecommenda ion.
●Mu a ion: In oduces andom a ia ion o he gene alues, ensu ing he sys em
emains adap able and inno a i e.
●Fi ness unc ion: E alua es how well he cu en se o ecommenda ions mee s
he desi ed ou come. In ou case his job will be ul illed by he use , analysing
hei ac i i y and hei in e es du ing he session. This is quan i ied by he amoun
o ips he use has opened wi h he objec i e o looking up mo e de ails.
5.4 E alua ion a ian s
Ensu ing he e ec i eness o ou ecommenda ion algo i hms is c ucial. Which is why we
ha e wo e alua ion selec ions used o op imise he algo i hm:
1. S a ic E alua ion: This is based on his o ical da a, analysing how well he
algo i hms pe o m in ecommending ips ha use s ha e p e iously enjoyed.
2. Session E alua ion: Du ing ac i e use sessions, he algo i hms a e con inuously
e alua ed and adjus ed based on use in e ac ions. This eal- ime eedback loop
allows he sys em o lea n and e ol e, imp o ing he ele ance o
ecommenda ions o e ime.
36

5.5 Algo i hm Design and G aphs
The o e all p ocess o a gene ic algo i hm is di ided in o se e al s ages:
I. Selec ion: The ini ial selec ion will con ain a single geno ype based on he s a ic
e alua ion o he use ’s p e e ence his o y. The ollowing ecommenda ions will
also include he p e ious selec ion ac i i y, and will also depend on he i ness
e alua ion.
II. Fi ness calcula ion : The i ness e alua ion as p e iously men ioned, is dic a ed by
he use 's ac ions, which ips he inds in e es ing a e de ined by he opening o
said ip. The i ness will ecei e he ini ial s a ic e alua ion wi h he wo p e ious
session e alua ions, om hese. The geno ypes wi h he mos ac i i y will be
chosen.
III. Rep oduc ion : A e choosing bo h op imum e alua ions, hei alues will be
andomly joined. The di e ence in i ness will also a ec he amoun o da a ha
will be con ained in he p ogeni o .
IV. Mu a ion : To ensu e ha he use is able o ecei e a a ia ion o op ions om
whe e o choose, a small mu a ion has a chance o ake e ec and change
one o he genes o he geno ype, his p omo es new op ions ha will hope ully
imp o e use expe ience.
The ollowing image shows a usage example o a use na iga ing du ing a single
session. In which 40 di e en ecommenda ions ha e been loaded. Sha ing a i s and
equal amoun o ips, o adap ing and showing hose calcula ed by he use s in e es .
37
Chap e 6 - Conclusions and Fu u e Wo k
6.1 Conclusions
We de eloped Quillyz wi h he ision o p o iding an inno a i e pla o m ha combines
ip planning wi h social ne wo king ea u es, allowing use s o disco e new
des ina ions, mee like-minded a elle s, and sha e hei expe iences. Th oughou he
de elopmen p ocess, we ocused on:
1. Comp ehensi e T ip Planning and Disco e y: Quillyz in eg a es a obus ip
planning ea u e ha le e ages a ecommenda ion algo i hm o sugges a el
des ina ions ailo ed o use p e e ences and in e es s. This pe sonaliza ion will
hope ully enhance ou use sa is ac ion by p esen ing a el op ions ha align
closely wi h each indi idual as e.
2. Social Ne wo king In eg a ion: By inco po a ing social ne wo king elemen s
simila o pla o ms like Ins ag am, Quillyz allows use s o sha e hei a el pho os,
pos upda es, and engage wi h o he use s. This ea u e no only en iches he
use expe ience bu also os e s a communi y o a elle s who can inspi e each
o he h ough sha ed expe iences.
3. Use Ma ching Based on In e es s: Quillyz’s ma ching algo i hm enables use s o
connec wi h o he s who ha e simila hobbies and as es. This unc ionali y
enhances social in e ac ion and ne wo king, p o iding use s wi h oppo uni ies o
make meaning ul connec ions wi h ellow a elle s.
4. Use -Cen ic Design and Con inuous Imp o emen : A signi ican ocus was spen
on use expe ience, as e idenced by ou eedback collec ion and i e a i e
design. We hope ha Quillyz emains in ui i e, use - iendly, and aligned wi h he
needs o i s a ge audience.
5. Scalable and Secu e Sys em A chi ec u e: The applica ion's backend and
on end sys ems we e designed o be scalable, suppo ing u u e g ow h in use
38
ea u es and complexi y. Secu i y measu es a e ye o be implemen ed, bu we
will wo k in he u u e o p o ec use da a and ensu e a sa e en i onmen o
sha ing pe sonal in o ma ion and a el expe iences.
O e all, we hope ha Quillyz has success ully es ablished i sel as a e sa ile pla o m o
bo h ip planning and social in e ac ion, di e en ia ing i sel om o he a el apps
h ough i s unique mix o pe sonalised ecommenda ions and social ne wo king
capabili ies.
6.2 Fu u e Wo k
While Quillyz has achie ed i s ini ial objec i e, he e a e nume ous oppo uni ies o
g ow h and o u he imp o e he pla o m's unc ionali y, use expe ience and social
each. WE ha e plans o con inue de eloping he nex a eas:
1. Recommenda ion Algo i hms:
○Machine Lea ning In eg a ion: Fu u e e sions o Quillyz can inco po a e
mo e ad anced machine lea ning models o enhance he accu acy and
ime spen . By analysing use beha iou pa e ns using eedback, he
ecommenda ion sys em can con inuously imp o e and adap o
changing use p e e ences.
2. Expansion o Social Fea u es:
○Li e S eaming and S o ies: Adding li e s eaming and s o y ea u es will
enable use s o sha e eal- ime a el expe iences wi h hei ollowe s,
c ea ing a mo e dynamic and engaging pla o m.
○G oup T ip Planning: Implemen ing ea u es ha allow use s o plan ips
oge he , coo dina e i ine a ies, and sha e expenses can enhance he
collabo a i e aspec o Quillyz, making i easie o g oups o iends o
amily membe s o o ganise hei a els.
39
3. In eg a ion wi h T a el Se ices:
Pa ne ing wi h ai lines, ho els, and local ou ope a o s o o e booking op ions
di ec ly wi hin he Quillyz pla o m will p o ide a seamless a el planning
expe ience. Use s could book ligh s, accommoda ions, and ac i i ies wi hou
lea ing he app, making Quillyz a one-s op a el solu ion.
4. Enhanced Use Ma ching and Communi y Fea u es:
○In e es -Based Communi ies: C ea ing communi y spaces wi hin Quillyz
based on speci ic in e es s, such as ad en u e a el, cul u al expe iences,
o ood ou ism, can help use s connec wi h o he s who sha e hei
passions.
○Ad anced Ma ching: Based on ma ching up hose who show simila
ac i i y in he same ca ego ies o o ums, so ha hey may mee on g oup
cha s o on ips oge he .
5. Localiza ion and Global Expansion:
As his applica ion g ows, expanding i s each o include mo e languages, local
a el con en , and cul u ally ele an ea u es could be essen ial. This will help
Quillyz ca e o a b oade audience, making i a global pla o m o a elle s
om di e en egions.
6. Da a Analy ics and Insigh s:
DE eloping ools ha p o ide use s wi h insigh s in o hei a el pa e ns,
p e e ences, and social in e ac ions can add alue o hei expe ience. These
analy ics can help use s unde s and hei a el beha iou and plan u u e ips
mo e e ec i ely.
40
7. Imp o ed E iciency:
Imp o emen s o bo h he compu a ional powe o he se e and connec ion
speed will be impo an o ensu e ou use ’s expe ience. Wi h he addi ional
algo i hms and unc ions we wish o include, his upg ade would be essen ial.
8. Imp o ed Secu i y and P i acy Measu es:
As we con inue o g ow and collec mo e use da a, ongoing imp o emen s o
secu i y p o ocols will be essen ial. Implemen ing end- o-end enc yp ion,
wo- ac o au hen ica ion, and egula secu i y audi s will ensu e ha use da a
emains p o ec ed.
Addi ional s eps o ensu e use au hen ica ion and ensu e sa e y wi hin he use s
who join he ip shall also be implemen ed. F om ID e i ica ion o a alida ion
and con i ma ion ne used in e i ying and a ing each use .
6.3 Con inuous Imp o emen
The jou ney o Quillyz will no end wi h i s ini ial launch. Con inuous imp o emen , based
on use eedback and eme ging echnological ends, will be c ucial o main aining i s
ele ance and compe i i eness in he a el and social ne wo king indus y. Regula
upda es, use engagemen ini ia i es, and a commi men o inno a ion will be he
necessa y s eps o ensu e Quillyz's long- e m success.
By ocusing he e, Quillyz can con inue o e ol e, o e ing new ea u es ha mee he
changing needs o ou use s wo ldwide. The pla o m's commi men o deli e ing a
g ea use expe ience will emain a he co e o i s de elopmen s a egy, ensu ing ha
Quillyz emains a belo ed ool o planning ips, mee ing new people, and sha ing
a el expe iences.
41

Chap e 7 - Use Expe ience and Feedback
Use expe ience is a c i ical componen o Quillyz's design, as we wish o sa is y all so s
o di e en use s, wi h di e en as es, and ye we wish o hem o s ay engaged in ou
applica ion. The ollowing sec ion de ails he s a egies and me hods we used o collec
use eedback, and analyse ha eedback o make in o med imp o emen s o he
applica ion.
7.1 In e iews & Ques ionnai es
Fo he in e iews, a ho ough analysis was i s conduc ed on he applica ion and he
di e en use s who migh use i . These o mula ed ques ions helped us classi y he use s
and hei iews abou he applica ion. I was decided ha he ideal du a ion o he
in e iew would be a ound 15-25 ques ions o 10-20 minu es. Howe e , he ac ual
du a ion o he in e iews ended up a ying on each o he 5 in e iews.
An addi ional ques ionnai e was also sha ed h ough online o ums o u he analyse
in e es ed pa icipan s ha may sha e some mo e in o ma ion. These ques ionnai es
hold i een ques ions, om which hese i e ques ions we e he mos in o ma i e
(Addi ionally, he en i e ques ionnai e can be ound he e).
7.2 Analysis o Use Feedback
Once use eedback was collec ed, we analysed i sys ema ically o ob ain meaning ul
insigh s. F om which we lea n :
1. Ta ge use s: Mos use s in e es ed in a elling a e be ween he ages o 16 and
25. Addi ionally mos o hose o e he age o 20 a e he ones ha a el
equen ly.
42
2. Social p e e ences: Su ey shows ha mos people enjoy mee ing o he s and
would be willing o a el and lea n abou new cul u es.
3. T ip selec ion de ails:
Mos use s selec hei ips depending on hese ollowing ac o s:
○P ice: The cos spen on he o e all ip om s a o inish.
○Loca ion: Whe e he ip akes place. Including use s who wan o a oid o
wish o see speci ic loca ions.
○Ac i i y: The ac i i y he use wishes o pa ake in du ing he ip.
○T anspo a ion: The cos and i he anspo a ion is included in he
announced ip cos .
○Accommoda ion: The cos , and I accommoda ion is included in he
announced ip cos .
○O he a iables include he ip’s season, ip du a ion, he age g oup o
he pa icipan s and mo e.
4. In e es owa ds ou applica ion: We’ e ecei ed posi i e e iews abou ou
applica ion idea, ha show in e es in his so o applica ion.
5. Design p e e ences: An addi ional op ional commen sec ion was included o
ou ques ionnai e ha included many ideas and unc ionali ies ha use s wan ed
p esen on ou applica ion. Some o hese ha e been al eady added, o will be
included in he u u e o u he imp o e ou use expe ience.
43
Chap e 8 - Pe sonal Con ibu ions
8.1 Con ibu ions by Ma cos:
Da a Modeling and Design and Implemen a ion o he Recommenda ion Algo i hm
Chap e s W i en:
Chap e 5 - Recommenda ion Algo i hm
Chap e 6 - Conclusions and Fu u e Wo k
Chap e 7 - Use Expe ience and FeedBack
8.2 Con ibu ions by S e en:
Da a Modeling and Sys em Design, A chi ec u e and Implemen a ion o he Full-S ack
Applica ion
Chap e s W i en:
Chap e 1 - In oduc ion
Chap e 2 - S a e o he a
Chap e 3 - So wa e De elopmen Technologies
Chap e 4 - Sys em Design, A chi ec u e, and Implemen a ion
44
Bibliog aphy
Books
○“In oduc ion o A i icial In elligence” by Philip C.Jackson, J . 3º Edi ion.
○“The Mas e Algo i hm” by Ped o Domingos. Penguin Science/Tech.
○“Gene ic Algo i hms + Da a S uc u es = E olu ion P og ams” by Zbigniew
Michalewicz. Sp inge Ve lag
○Clean A chi ec u e by Robe C. Ma in
○Re ac o ing by Ma in Fowle
Online Resou ces
○Tu o ials poin clus e ing u o ial :
h ps://www. u o ialspoin .com/a i icial_in elligence_wi h_py hon/a i icial
_in elligence_wi h_py hon_unsupe ised_lea ning_clus e ing.h m
○Au hen ica ion MERN APP:
h ps://www.you ube.com/wa ch? =NmkY4JgS21A
○Docke izing MERN APP:
h ps:// ed agno.hashnode.de /docke izing-a-me n-s ack-web-applica io
n
Technical Documen a ion
○UML Diag ams:
h ps://www. isual-pa adigm.com/guide/uml-uni ied-modeling-language
/uml-class-diag am- u o ial/
○Tailwind CSS: h ps:// ailwindcss.com/
○Reac .js : h ps://es. eac .de / e sions
○MongoDB : h ps://www.mongodb.com/docs/
45
View Following
Back
Recommended T ips
back
52

C ea e T ip
back
53
Upda e - Cancel T ip
back
Join T ip
54
back
Disjoin T ip
back
55
Sea ch People
back
Cha
56
back
57

T ip Album
58
back
59
Algo i hm Examples
Alpha example
Images gene a ed using pyplo
back
60
Gamma example
Images gene a ed using pyplo
Back
61
When planning a
ip, do you p e e o:
P eplanned
Use s gene ally p e e a mix o planning
and lexibili y, indica ing ha Quillyz
should o e cus omizable i ine a ies ha
lea e oom o spon aneous ac i i ies.
Spon aneously
Wha ype o ips do
you p e e ?
“Open answe s”
Ad en u e ips a e he mos popula
ype o a el among use s, as well as
beach, ci y, cul u al ips and many
mo e.
How do you ypically
ind a el
companions?
I ask People I al eady know
Mos use s p e e a elling wi h people
hey al eady know, ye a high numbe
o indi iduals show in e es in using
applica ions.
I use apps and social pla o ms
I go solo
How impo an is i
o you o ha e
ecommenda ions
ailo ed o you
p e e ences?
1 - 10
Pe sonalised ecommenda ions a e
c ucial o mos use s, indica ing ha
Quillyz should ocus on ailo ing ip
sugges ions based on use p o iles,
in e es s, and p e ious ac i i ies.
Would you be
in e es ed in sha ing
you a el
expe iences on a
social pla o m?
Yes
While many use s enjoy sha ing hei
expe iences, hey may p e e mo e
p i a e o con olled sha ing se ings,
meaning Quillyz should o e bo h public
and p i a e sha ing op ions.
Maybe
No
How o en do you
a el?
E e y week
Mos use s a el mul iple imes a yea ,
which indica es equen oppo uni ies
o use Quillyz o bo h planning ips and
s aying connec ed wi h a el
companions.
E e y mon h
E e y Yea
Wha would make
you mo e likely o
use Quillyz?
Planning ea u es
Use s a e mos a ac ed o pe sonalised
ip sugges ions. Quillyz should con inue
o e ine i s ecommenda ion algo i hm
o p o ide highly ele an and
appealing op ions.
Social Ne wo k
T ip Recommende
Which aspec o a
a el app is mos
impo an o you?
Easy o use in e ace
The ease o use is a op p io i y o mos
use s, meaning Quillyz should ocus on
p o iding a smoo h, in ui i e in e ace
68

ha makes a el planning simple and
enjoyable.
Cus omizable ip planning
Abili y o connec wi h o he s
back
69