Täs­sä pro­jek­tis­sa ha­lusin laa­jen­taa en­sim­mäis­tä React-pro­jek­tia­ni. Edel­li­nen työ­ni si­säl­si vain osal­lis­tu­ja­lis­tan ja sii­hen liit­ty­viä toi­min­to­ja, mut­ta täs­tä so­vel­luk­ses­ta pää­tin teh­dä isom­man ko­ko­nai­suu­den – enem­män sel­lai­sen, joka voi­si oi­keas­ti­kin olla tuo­tan­nos­sa. Sik­si kek­sin so­vel­luk­sel­le taus­tan ja ai­heen: Ku­vit­teel­li­nen koi­ra­ker­ho on ai­keis­sa jär­jes­tää kil­pai­lut, ja niis­tä tie­do­te­taan ja nii­hin il­moit­tau­du­taan tä­män so­vel­luk­sen kaut­ta. Ai­heen var­jol­la pys­tyin luon­te­vas­ti käyt­tä­mään so­vel­luk­ses­sa joi­ta­kin Reac­tin omi­nai­suuk­sia, jot­ka oli­vat mi­nul­le en­nes­tään vie­rai­ta, sekä kir­jas­to­ja, joi­hin ha­lusin pe­reh­tyä. Sain myös li­sät­tyä toi­min­nal­li­suuk­sia, jot­ka so­pi­vat hy­vin so­vel­luk­sen aiheeseen.

En­sim­mäi­ses­sä React-pro­jek­tis­sa­ni mi­nua jäi häi­rit­se­mään eri­tyi­ses­ti muu­ta­ma asia: ul­koa­su oli tosi an­kea ja al­keel­li­nen (vaik­ka­kin oh­jeen mu­kai­nen), vir­he­vies­tit näy­tet­tiin pon­nah­dusik­ku­nois­sa ja mo­nia ai­van yk­sin­ker­tai­sia­kin käy­tet­tä­vyyt­tä pa­ran­ta­via asioi­ta puut­tui, ku­ten esi­mer­kik­si ho­ver-efek­tit. Täs­sä toi­ses­sa työs­sä ha­lusin käyt­tö­liit­ty­mäs­tä ja käy­tet­tä­vyy­des­tä pal­jon pa­rem­mat. Suun­nit­te­lin ul­koa­sun ra­ken­tei­neen, vä­ri­pa­let­tei­neen ja kir­ja­sin­tyyp­pei­neen so­vel­luk­sen tee­maan so­pi­vik­si ja lop­pu­tu­lok­ses­ta tu­li­kin mie­les­tä­ni oi­kein kiva. 🙂

Jos ha­luai­sin jat­ko­ke­hit­tää tätä so­vel­lus­ta, li­säi­sin tä­hän ai­na­kin kir­jau­tu­mi­sen ja eri käyt­tä­jä­roo­le­ja, tie­to­kan­nan sekä pari “si­vua” li­sää, joil­la oli­si ku­va­gal­le­ria ki­sois­ta ja tu­los­lis­tat. Voi­sin myös teh­dä “si­vu­jen” ra­ken­teis­ta hie­man mo­ni­mut­kai­sem­mat ja näyt­tä­väm­mät, ja li­sä­tä si­vuil­le ku­vi­tus­ku­via. Mah­dol­li­ses­ti kak­kos­ver­sio il­mes­tyy­kin tu­le­vai­suu­des­sa, kos­ka opis­ke­len täl­lä het­kel­lä full stackia.

So­vel­luk­sen kes­kei­siä si­säl­tö­jä ja toiminnallisuuksia

• So­vel­lus si­säl­tää kak­si “si­vua”: etusi­vun ja ilmoittautumissivun.
• Pie­nem­mil­lä näy­töil­lä pää­va­lik­ko muut­tuu hampurilaisvalikoksi.
• So­vel­lus skaa­lau­tuu kai­ken­ko­koi­sil­le näytöille.

Etusi­vu

• Si­vun ylä­osas­sa on suu­ri he­ro­ku­va, jon­ka pääl­lä on teksti.
• Käyt­tä­jä voi mää­rit­tää oi­kean kil­pai­lu­luo­kan syöt­tä­mäl­lä ar­von numerokenttään.

Il­moit­tau­tu­mis­si­vu

• Käyt­tä­jä voi li­sä­tä uu­den osal­lis­tu­jan lo­mak­keen avulla. 
  • Vain ne käyt­tä­jät li­sä­tään, joil­la on kel­vol­li­nen nimi, säh­kö­pos­tio­soi­te ja puhelinnumero.
• Si­vul­la näy­te­tään kak­si osal­lis­tu­ja­lis­taa, jois­ta kum­pi­kin si­säl­tää vii­si sa­tun­nais­ta osallistujaa. 
  • Ni­met ja säh­kö­pos­tio­soit­teet on haet­tu kah­des­ta eri APIsta.
  • ID-nu­me­rot on ge­ne­roi­tu eräs­tä kir­jas­toa käyttämällä.
• Käyt­tä­jä voi muo­ka­ta ha­lua­maan­sa ri­viä nap­saut­ta­mal­la kynä-kuvaketta.
• Käyt­tä­jä voi pois­taa ha­lua­man­sa ri­vin nap­saut­ta­mal­la roskakori-kuvaketta.
• Käyt­tä­jä voi jär­jes­tää lis­tan nap­saut­ta­mal­la ha­lua­man­sa sa­rak­keen otsikkoa.