FULL STACK -MUISTIINPANOSOVELLUKSEN KEHITTÄMINEN REACTIA JA EXPRESSIÄ KÄYTTÄEN

Abstract

Opinnäytetyön aiheena on muistiinpanojen hallintaan tarkoitettu Full Stack -verkkosovellus, joka on toteutettu React- ja Express-teknologioilla. Opinnäytetyön tavoitteena on kuvata, millä teknologioilla ja miten muistiinpanosovellus on kehitetty ja julkaistu kaikkien käytettäväksi pilviympäristössä. Työssä käsitellään sovelluksen kehittämiseen käytettyjä teknologioita, toteutuksen arkkitehtuuria sekä hostausratkaisuja, joilla käyttöliittymä, palvelin ja tietokanta saatiin toimimaan saumattomasti yhteen. Lisäksi työssä korostetaan selkeän rakenteen, ympäristömuuttujien hallinnan ja komponenttipohjaisen kehitystavan merkitystä web-sovellusten toteutuksessa. Modernit web-teknologiat ovat mahdollistaneet sovelluksen helpon kehittämisen, testaamisen ja julkaisemisen pilvipalveluihin. Sovelluksen käyttöliittymä on rakennettu Reactilla ja TypeScriptillä, ja siinä hyödynnetään Material-UI-kirjastoa käyttöliittymän tyylityksessä. Palvelin on toteutettu Express.js-kehyksellä TypeScriptin avulla. Tietokanta on rakennettu PostgreSQL-pohjaiseksi Supabase-palveluun. Sovellus sisältää keskeisiä toimintoja, kuten käyttäjän rekisteröinnin ja kirjautumisen, muistiinpanojen hallinnan, roskakoriominaisuuden, kalenterinäkymän ja tilastojen visualisoinnin. Työn toteutusosiossa esitellään sovelluksen rakenne, keskeiset käyttöliittymäkomponentit sekä palvelinpuolen ratkaisut. Lisäksi käsitellään tiedostorakennetta, API-päätepisteitä, käyttäjäautentikointia, tietokantayhteyksien hallintaa ja pilvipalveluihin liittyvää hostausta. Osiossa esitellään myös sovelluksen toiminnallisuuksia, kuten sivujen keskeiset ominaisuudet ja niiden toteutus. Lopuksi käydään läpi, miten käyttöliittymä, palvelin ja tietokanta julkaistiin pilvipalveluissa ja miten nämä osat muodostavat toimivan kokonaisuuden.

The objective of the thesis was to develop a full stack web application for note management using React and Express technologies. The aim was to describe the technologies used and how the application was developed and deployed in a cloud environment for public access. The thesis discussed the technologies applied, the software architecture, and the hosting solutions that enabled the user interface, backend, and database to function seamlessly as a whole. Furthermore, the importance of clear structure, environment variable management, and a component-based development model was emphasized.

Modern web technologies enable easy development, testing, and deployment of applications to cloud services. The user interface of the application is built with React and TypeScript, and it uses the Material-UI library for styling. The server is implemented with the Express.js framework using TypeScript. The database is built in PostgreSQL format on the Supabase platform. The application includes key features such as user registration and login, note management, a trash bin function, a calendar view, and statistical visualization.

The implementation section of the thesis presents the structure of the application, key user interface components, and server-side solutions. In addition, it covers the file structure, API endpoints, user authentication, database connection management, and cloud-related hosting. The section also presents the functionalities of the application, such as the main features of each page and their implementation. Finally, it explains how the user interface, server, and database were deployed to cloud services and how these parts form a functional whole.