Upload
others
View
18
Download
0
Embed Size (px)
Citation preview
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