RouteMap
RouteMap on karttasovellus jonka tärkein ominaisuus on reittien suunnittelu ja tallentaminen.
Kehitin tämän Reactia harjoitellakseni sekä omaan käyttööni pyöräilyharrastustani tukemaan. Tällä voin suunnitella reitit tietokoneella valmiiksi, ja ajaessa näen reitin ja sijainnin kännykästä.
Teknologiat: Frontti React+Leaflet, bäkkäri NodeJS+Express+MySQL.
Sovelluksen karttapohjana käytetään Leafletin javascript-kirjastoa, joka piirtää kartan OpenStreetMapin datasta.
Sovellus toimii selaimen kautta tietokoneilla ja mobiililaitteilla, sekä on mahdollista asentaa Windowsille ja mobiililaitteille Progressive Web App (PWA) -sovelluksena.
Kokeile sovellusta »BetAccounting
BetAccounting on simppeli CRUD-appi (Create, Read, Update, Delete), joka sisältää yleiset sovelluksien perustoiminnot: kirjautuminen, datan lukeminen tietokannasta, lisäys, muokkaus ja poisto.
Frontti React, bäkkäri NodeJS+Express+MySQL.
ReactSpot
ReactSpotin admin-näkymä ja html-editori
ReactSpot on kevyt web-sivustojen julkaisujärjestelmä, jonka kehitin omaksi ilokseni ja oppiakseni Reactia enemmän.
Reactilla toteutetussa Admin-käyttöliittymässä voi luoda sivuja ja komponentteja. Komponentit sisältävät html-koodia jota voidaan muokata sovelluksen sisäisellä koodieditorilla.
Yhteiskäyttöisiä komponentteja voi lisätä sivuille, jolloin niiden sisältämä html-koodi generoidaan kyseiselle sivulle.
ReactSpotissa javascript- ja css-tiedostot ovat koko sivuston yhteisiä. Lisäksi yksittäisille sivuille on mahdollista sisällyttää omaa css:ää.
Teknologiat: Frontti React, bäkkäri NodeJS+Express+MySQL.
Reactin Router-koodi
Url-osoitteiden ohjaamiseen on käytetty Reactin Routeria. Alla esimerkki kuinka osoitteet toimivat jos domain on aripaloniitty.fi:
Aripaloniitty.fi/admin
Reactilla tehty hallintanäkymä, edellyttää kirjautumista.
Aripaloniitty.fi
Julkinen etusivu, html generoitu palvelimen tarjoamasta datasta.
Aripaloniitty.fi/tuotteet
Julkinen tuotesivu, html generoitu palvelimen tarjoamasta datasta.
