Halusin tulla paremmaksi React-kehittäjäksi, joten tein harjoitustyönä erään yrityksen esitestin koodareiksi hakeville. Tämä oli mielestäni hyvä tapa testata ja kehittää taitojani, vaikka en alun perinkään aikonut hakea heille töihin. Sain projektin aikana neuvoja kokeneemmalta React-koodarilta, mutta onnistuin silti yli omien odotusteni. 🙂
Osallistujalista
3/2019
Rooli: React developer
Koodi GitHubissa
Jotain muuta ja paljon uutta
Tämä oli ensimmäinen React-projektini, joten halusin noudattaa yrityksen antamia määrityksiä parhaani mukaan. Määritelmä sisälsi visuaalisen suunnitelman sovelluksen ulkoasusta sekä listan toimintoja, joita sovelluksesta tuli löytyä.
Aloitin projektin suunnittelemalla sovelluksen rakenteen ja työjärjestyksen mahdollisimman hyvin – huolella suunniteltu on puoliksi tehty! Sen jälkeen koodasin sovelluksen rungon ja ulkoasun, koska tiesin niiden olevan minulle kaikista helpoimpia tehtäviä. Viimeiseksi toteutin toiminnallisuudet. Niissä olikin paljon uutta opittavaa, mutta onneksi sain neuvoja ja tietoa parhaista käytännöistä muuan ystävältäni, joka on kokenut React-koodari.
Onnistuin sisällyttämään sovellukseen kaikki toivotut ominaisuudet ja ulkoasustakin tuli varsin kuvan mukainen. 🙂 Tästä on siis hyvä jatkaa kehitystyötä. Sovelluksen toiseen versioon tulee toivottavasti paljon sellaista, joka tästä ensimmäisestä raakaversiosta jäi pois: hover-efektit, lajittelu toisin päin, hienostuneempi lomakkeen validointi ynnä muuta jännittävää.
Sovelluksen keskeisiä sisältöjä ja toiminnallisuuksia
- Lista sisältää 20 satunnaista osallistujaa.
- Nimet, sähköpostiosoitteet ja puhelinnumerot on haettu eräästä APIsta.
- ID-numerot on generoitu erästä kirjastoa käyttämällä.
- Käyttäjä voi lisätä uuden osallistujan lomakkeen avulla.
- Vain ne käyttäjät lisätään, joilla on kelvollinen nimi, sähköpostiosoite ja puhelinnumero.
- Käyttäjä voi muokata haluamaansa riviä napsauttamalla kynä-kuvaketta.
- Käyttäjä voi poistaa haluamansa rivin napsauttamalla roskakori-kuvaketta.
- Käyttäjä voi järjestää listan napsauttamalla haluamansa sarakkeen otsikkoa.