Full Stack Web Development in Vue€¦ · • Vue.js • Webpack • Express • Node.js Full Stack...

IcontributedtochoosingmostofthetechnologystackasIfeltthatthroughmypastexperiencesatthevariouscompaniesIhaveworkedforandthroughmelookingintothefutureofwhatweallwillbeusingatthevariousjobsthatweareallapplyingfor.Althoughsomeofthetechnologiesjustmadesensetousetogetherotherlargerpieces,suchasVue.jsandJWT,waschosenduetotheirdocumentationandeaseofuseforthosedevelopingonthisproject.

ThebackendworkthatIaccomplishedduringtheintertermwasauthentication,authorization,controllers,middleware,androutesforallcurrentlyexistingfunctionsinthisapplication.TheauthenticationandauthorizationforthisapplicationwascomplicatedasIwantedtotestmyabilitiestocreateasecurewayofauthenticatingthattherequestandresponseofeveryinteractionbetweenthebackendandfrontendwouldbeverified.InordertoaccomplishthisIusedJSONwebtoken(JWT)tochecktheuniquesignatureofrequestandresponsedoneonthefrontendandonthebackend.

ThefrontendwasdevelopedusingVue.jsandIlearnedalotaboutsinglepageapplicationsthroughoutthisproject.AswellIwastestedonmydesignerskillswithcreatingUImockupsforthecustomerofthevariouspagesthatwentintotheapplicationandthendevelopedthoseimagesintoactualcode.

• Vue.js• Webpack• Express• Node.js

Full Stack Web Development in Vue.jsBy: Cole J Calamos

TheNKCFamilyFoundation(NKCFF)requestedformetodevelopanapplicationtoreplacetheircurrentmanagementsoftware.Afteracouplemonthsofsolidifyingwhatexactlytheywantedtobedone,duringthistimeofJ-Termandwhatisexpectedfrommetocontinueonaftertheterm,Iwasabletoformateamandcreateaprojectproposaltobegindevelopment.

• Accesscertaincompanyinformationfromanywhere

• StoreDocuments,ContactInformation,Organizationinformation,andGrantInformation

• Abilitytochangewhatformsaredisplayedontheirnon-securedpage

• Redesigntheirpublicnon-securewebsite

Introduction Front-End

Conclusion

Future Work

Technology Stack

Objectives

Back-End

Database

DeploymentDeploymentwasdoneusingAmazonWebServices,duetothegreatsupportthatamazonprovidesandthelowcoststhatwillplayaroleinthefutureforNKCFF.IdecidedtouseanAWSS3bucketasitisverylowcostandhasthecapabilitiesofhostingastaticwebpagethatiscreatedthroughwebpack.IalsochoseanRDS(Relationdatabaseserver)asitmadethemostsenseforhostingapostgresdatabase.FinallyIdecidedonusinganelasticbeanstalkforthebackenddeploymentasitallowsforeasyscalabilityduetotheamountofrequestsitmayormaynotreceiveonthevariousAPIroutes,allwhilerunningthenodeserver.

Thedatabaseconsistedofthirteendifferenttablesthatallwereconnectedtoeachotherthroughsomesortofconnectingtable.Iwasresponsibleforcreatingthedatabaseandthetableswiththeuniqueindexesoneachoftheuniquecolumnsofthetable.Aswell,Icreateinsertstatementstocreatedummydatathatwasusedtotestoutourapplicationwhiledeveloping.FinallyIcreatedadatabasefunctiontogenerateaUUIDforthesession’sandIcreatedatriggertoautoupdatetheupdated_atcolumnoftherowthatisbeingupdated,withthecurrenttimestamp.

• AccountingFeatures• Guidestarintegration• Breakcomponentsfurtherintoabstract

functions• Abilitytocommentondocuments• Abilitytoviewdocumentsonline,before

downloading

InconclusionmyteamandIwereabletodeliveraminimalviableproductthatreachedalloftheobjectivesthatwereinscope.IlearnedalotmoreaboutfullstackdevelopmentthroughoutthisprocessandwasabletobetterunderstandhowtointertwinedifferentpartsofthestackalltogethertoworkinharmonyandtoproduceaproductthatIamwillingtoputmynameon.

Acknowledgements Specialthanksto:• Dr.JonathanGeislerforproctoringand

providinghelpfulinsightintothisproject.• KatieBifossforbeingverywillingtomeetwith

usandprovideanswersandclarificationstoallandanyrequirements.

• NKCFamilyFoundationforprovidinguswiththisopportunitytoworkonareal-worldapplication.

• Babel• Postgres• AWS• JWT

Figure3:AuthenticationDiagram

Themostchallengingpartaboutdevelopingfrommockupsisgettingallofthestrangeshapestoproperlyformandkeepitsratiothroughoutthedifferentscreensizes.HoweverthroughtheuseofSVGswewereabletoaccomplishthiswithouttoomuchhassle.

OncemostoftheviewsweredoneIwentaheadandcreatedthemodelsthatwouldinteractwithmyAPIservicetorequestinformationproperlyfromthebackendserver.Thesemodels

andserviceswouldverifyeveryrequestcominginandwouldformatthedatathatwascominginandgoingoutofthedifferentviews.

Figure2:CreateDocumentPage

Figure1:OurMissionPage