Quillyz: social network and travel web application

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