Web-sovellukseni
Synerra – Gaming Community Platform (opiskelijaprojekti)
Synerra on peliseuranhakuun ja yhteisölliseen vuorovaikutukseen keskittyvä web-sovellus, joka toteutettiin osana JAMKin Ticorporate-opintojaksoa. Sovelluksen kohderyhmänä ovat ensisijaisesti PC-pelaajat, jotka etsivät peliseuraa ja haluavat esitellä itseään pelaajaprofiilin kautta.
Projekti toteutettiin viiden hengen tiimissä, jossa työskentely noudatti kevyttä ketterää mallia. Lopputulos on toimiva prototyyppi, joka demonstroi keskeiset ideat, rakenteet ja tekniset ratkaisut – ei valmis kaupallinen tuote.
Tekninen toteutus
Sovelluksen frontend rakennettiin Angularilla (v17) ja TypeScriptillä. Projektissa hyödynnettiin Angularin moderneja rakenteita, kuten standalone-komponentteja ja reaktiivista tilanhallintaa RxJS:n avulla. Käyttöliittymä toteutettiin responsiiviseksi, ja painopiste oli selkeässä rakenteessa ja käytettävyydessä.
- AWS Cognitoa käytettiin käyttäjien autentikointiin
- AWS Lambdaa yksinkertaisten backend-toiminnallisuuksien toteuttamiseen
- DynamoDB:tä kokeiltiin NoSQL-tietokantana
- S3:a hyödynnettiin staattisten resurssien tallennukseen
Reaaliaikaisuuteen tutustuttiin rajatusti (esim. chatin tai ilmoitusten konseptitasolla), mutta kaikkia suunniteltuja toiminnallisuuksia ei toteutettu täyteen tuotantovalmiuteen aikarajojen vuoksi.
Keskeiset toiminnallisuudet
- Käyttäjän kirjautuminen ja rekisteröityminen (AWS Cognito)
- Pelaajaprofiilin luonti ja tarkastelu
- Peliseuranhaku yksinkertaisilla suodattimilla (esim. peli, pelityyli)
- Perusrakenteet yhteisölliselle viestinnälle
- Responsiivinen käyttöliittymä desktop- ja mobiilikäyttöön
Mitä opin projektissa
- Ymmärrystä Angular-sovelluksen rakenteesta ja komponenttipohjaisesta ajattelusta
- TypeScriptin käyttöä laajemmassa kokonaisuudessa
- Kokemusta AWS-palveluiden hyödyntämisestä osana web-sovellusta
- Käsitystä serverless-arkkitehtuurin mahdollisuuksista ja rajoitteista
- Tiimityöskentelyä, Git-versionhallintaa ja vastuun jakamista
- Kykyä arvioida omaa tekemistä realistisesti suhteessa aikaan ja vaatimuksiin
Projekti vahvisti ymmärrystäni siitä, miten ideasta rakennetaan toimiva web-sovelluksen perusrunko ja mitä haasteita liittyy monimutkaisemman full-stack-järjestelmän toteuttamiseen tiimissä.
Lataa Portfolio
Philosophical Quotes - Web UI -kurssin lopputyö
Aivan ensimmäinen verkkosivuprojektini, jossa harjoittelin HTML:n ja CSS:n perusteita. Ideana oli koota yhteen paikkaan inspiroivia mietteitä eri filosofeilta. Vaikka kohtasin alkuun turhautumista erityisesti CSS:n kanssa, opin vähitellen hahmottamaan sen logiikkaa – ja lopulta huomasin, kuinka paljon voi tehdä jo yksinkertaisilla keinoilla.
Mitä tein: Rakensin yksinkertaisen ja esteettisesti miellyttävän verkkosivun filosofisten lainauksien esittämiseen.
Miksi tein: Halusin oppia verkkosivujen perustekniikat ja samalla tehdä sisällöltään merkityksellisen projektin.
Mitä opin: Opin HTML:n rakenteen, CSS:n tyylittelymahdollisuudet ja sivun asettelun perusperiaatteet.
WorkLog Pro - Työaikakirjausapplikaatio
Ensimmäinen Svelte@vite -projektini, jossa käyttäjä voi kirjata ja seurata työmaalla tehtyjä työtehtäviä. Halusin luoda visuaalisesti erottuvan ja modernin käyttöliittymän, sillä monet olemassa olevat työaikakirjaussovellukset tuntuivat kankeilta ja vanhanaikaisilta.
Toteutin sovellukseen myös SQL-integraation Supabasen avulla, joka tallentaa käyttäjän tekemät työaikakirjaukset tietokantaan. Projektia voisi laajentaa lisäämällä esimerkiksi säätieto-API:n sekä työnantajan näkymän. Työnantaja voisi hallita kirjauksia yksilöllisesti ja tarkastella työntekijöiden merkintöjä reaaliaikaisesti.
Mitä tein: Kehitin työmaakirjausjärjestelmän Sveltellä ja liitin sen Supabase-tietokantaan.
Miksi tein: Halusin harjoitella täyden käyttöliittymä- ja tietokantaintegraation rakentamista modernilla työkalupinolla.
Mitä opin: Opin hallitsemaan lomakelähetystä, tietojen tallennusta ja noutamista Supabasesta sekä suunnittelemaan käyttöliittymän, jossa yhdistyvät selkeys ja animaatiot.
Avaa applikaatio
🎬 Movie Database – Elokuvakirjasto ja arvostelut
Tämä sovellus tarjoaa kattavan näkymän elokuviin sekä niiden arvosteluihin. Projektin tavoitteena oli syventää ymmärrystäni Fetch API:n käytöstä ja dynaamisesta datan käsittelystä selaimessa.
Sovellus perustuu erääseen uDemy-kurssiin, mutta muokkasin ja viimeistelin sen oman näkemykseni mukaan. Teknologioina käytin HTML:ää, CSS:ää ja JavaScriptiä.
Julkinen jakaminen ei ole mahdollista API-rajoitusten vuoksi, mutta projekti on katsottavissa pyynnöstä.
Under Construction - LevelUp2
Työn alla oleva kuntosaliharjoitusten kirjaus ja sovellus. Tähän voi kirjata mm. maksimitulokset, toistot, painot ja sarjat, joita voi vertailla kavereitten kanssa. Tarkoituksenani on luoda helppokäyttöinen ja käyttäjäystävällinen kuntosalipäiväkirjasovellus.
Perinteiseen vihkoon tulosten ylöskirjaaminen tuotti itselle ja kaverilleni ongelmia, niin lähdin rakentamaan uutta konseptia samalla voiden oppia lisää tietokantaintegraatioista ja autentikoinnista. Tähän visionani on luoda myös analytiikkaosio, jossa voi seurata kehitystä sekä kalorilaskuri.
Käytettävä framework on joko SvelteKit tai React.
🌱 Tulossa
🧠 Tekoälyprojektit – Tulossa pian
Suunnitteilla on sarja tekoälyyn perustuvia web-projekteja, joissa yhdistyvät käytettävyys, data-analytiikka ja luovuus. Tavoitteena on rakentaa sovelluksia, jotka hyödyntävät koneoppimista, luonnollisen kielen käsittelyä (NLP) ja generatiivista tekoälyä.
Ensimmäinen projektini tulee olemaan yksinkertainen tekoälyavustaja, joka auttaa arkipäivän tehtävissä, kuten muistutuksissa, muistiinpanojen koostamisessa tai vaikkapa ravintosuositusten antamisessa käyttäjän tavoitteiden perusteella.
Käytettävät teknologiat tulevat olemaan JavaScript / Python, OpenAI API ja mahdollisesti Supabase tai jokin muu vastaava käyttäjätietojen tallentamiseen ja personointiin.
🌱 Tulossa