Photo Proof: En photo-proofing applikation skapad med MongoDB, Express, React och Node(MERN)
2022 (Swedish)Independent thesis Basic level (university diploma), 10 credits / 15 HE credits
Student thesis
Abstract [en]
This report is based on practical work that lasted for 10 weeks. The work involved building a "photo-proofing" application for a small web agency in Stockholm. The work was done remotely. This web agency was in need of this type of application as they worked a lot with photographers and wanted such an application under their own auspices. There were requirements for functions such as being able to log in as a customer or photographer, to be able to create albums as a photographer, upload photos and share these. To be able to choose between displaying water-marked or original and being able to allow downloading images without water-marking. For customers, it was important to be able to log in, take part in shared albums, be able to like specific photos and then have the opportunity to download the photos that were liked when the photographer allowed it, for example when this customer sent a payment. The work began with a general planning and discussion with the company's CEO about what the requirements were for the application to be useful to them. These points were taken into account and thus began the development of the project. Backend was created first, before frontend because frontend was so dependent on backend. The project was created with relevant catalogs for front and backend and then NPM packages were installed to support the development and functionality for both parts of the project. For backend, Express and MongoDB were used together with other NPM packages to create connections and functions between express server, mongoDB NoSQL database and various API-calls that wanted to retrieve or store data. Frontend was then developed with React. A useFetch hook was created that made the function of retrieving data very reusable. Views and components of views could be rendered differently depending on which user had logged in and what role it had. This type of data could be retrieved by GET calls and then forwarded with props to components, or stored in localStorage or in a created authContext that provided global availability within react for data, for information about “logged in” for example. The result was successful and the important necessary functions were included. I am very happy with this project, even though not everything is coded perfectly, there is definitely room for improvement, but the project became more extensive than I expected and took a huge amount of time for a React novice like myself. I think the project has been very educational and even though I still have a lot to learn of React, I know a lot more now than when I started. In the next project, I will plan more initially with wireframes and function descriptions to get more of a plan to stick to and at an earlier stage understand the scope.
Abstract [sv]
Denna rapport grundar sig i ett praktiskt arbete som pågick under 10 veckor. Arbetet innebar att bygga en “photo-proofing”-applikation åt en liten webbyrå i stockholm. Arbetet skedde per distans. Denna webbyrå var i behov av denna typ av applikation då de jobbade mycket med fotografer och ville ha en sådan applikation under egen regi. Det fanns krav på funktion som att kunna logga in som kund eller fotograf, att som fotograf kunna skapa album, ladda upp bilder och dela dessa. Att kunna välja mellan att visa vatten-markerat eller original samt att kunna tillåta nedladdning av bilder utan vatten-markering. För kunder var det viktigt att kunna logga in, ta del av delade album, kunna gilla specifika bilder och därefter ha möjligheten att ladda ned bilderna som gillats när fotograf tillät, exempelvis när denna kund skickat en betalning. Arbetet började med en generell planering och diskussion med företagets VD om vad det fanns för krav för att applikationen skulle vara användbar för dom. Dessa punkter togs hänsyn till och därmed började projektets utveckling. Backend skapades först, innan frontend i och med att frontend var så beroende av backend. Projektet skapades med relevanta kataloger för front- och backend och därefter installerades NPM-paket för att stödja utvecklingen och funktionalitet för båda delarna av projektet. För backend användes Express och MongoDB tillsammans med dessa NPM paket för att skapa kopplingar och funktioner mellan express-server, mongoDB NoSQL-databas och olika anrop utifrån som ville hämta eller lagra data. Frontend utvecklades sedan med React. Det skapades en useFetch-hook som gjorde funktion för att hämta data väldigt återanvändningsbar. Vyer och komponenter till vyer kunde renderas olika beroende på vad för användare som hade loggat in och vilken roll den hade. Denna typ av data kunde hämtas genom GET-anrop och sedan skickas vidare med props till komponenter, eller lagras i localStorage eller i en skapad authContext som gav global tillgänglighet inom react för data, för information om inloggad exempelvis. Resultatet blev lyckat och de viktiga nödvändiga funktionerna fanns med. Jag är mycket nöjd över detta projekt även om allt inte är kodat helt perfekt, det finns definitivt utrymme för förbättring, men projektet blev mer omfattande än vad jag räknat med och tog enormt mycket tid för en React-novis som jag själv. Jag anser att projektet varit mycket lärorikt och även om jag har mycket kvar att lära mig av React så kan jag mycket mer nu än när jag började. I nästa projekt kommer jag planera mer initialt med wireframes och funktionsbeskrivningar för få mer av en plan att hålla mig till samt i tidigare skede förstå omfattningen.
Place, publisher, year, edition, pages
2022. , p. 38
Keywords [sv]
JavaScript, React, Express, MongoDB, Node, Photo-proofing, Vattenmärke
National Category
Computer Engineering
Identifiers
URN: urn:nbn:se:miun:diva-45152Local ID: DT-V22-G2-027OAI: oai:DiVA.org:miun-45152DiVA, id: diva2:1666586
Subject / course
Computer Engineering DT1
Educational program
Web Development TWEUG 120 higher education credits
Supervisors
Examiners
2022-06-092022-06-092022-06-09Bibliographically approved