Zadanie Frontend developer GoodRequest

Cieľom zadania je vytvoriť jednoduchú aplikáciu v Next.js, ktorá slúži ako formulár pre nadáciu GoodBoy na podporu slovenských útulkov pre psy.

Aplikácia by mala umožňovať potenciálnym podporovateľom:

• zvoliť si formu pomoci- všeobecný príspevok pre nadáciu alebo príspevok pre konkrétny útulok
• vybrať si konkrétny útulok zo zoznamu zapojených útulkov (nepovinné pole v prípade všeobecného príspevku, v opačnom prípade povinné pole)
• zvoliť si výšku príspevku, pričom je možné nastaviť aj vlastnú hodnotu (povinné pole)
• vyplniť svoje osobné údaje:
  • meno- nepovinné pole (2-20 znakov)
  • priezvisko- povinné pole (2-30 znakov)
  • e-mail - validný formát e-mailovej adresy
  • telefón - slovenské alebo české číslo s predvoľbou +420 / +421 so zobrazením zvolenej krajiny vo forme vlajky štátu
  • potvrdiť súhlas so spracovaním osobných údajov (povinné pole)
  • odoslať zvalidovaný formulár, prípadne zrozumiteľne oznámiť používateľovi chybový stav
• pozrieť si kontaktné údaje organizácie v rámci stránky Kontakt
• zistiť celkovú vyzbieranú sumu a počet/zoznam darcov (tieto údaje sa pravidelne aktualizujú a sú dostupné cez endpoint opísaný nižšie)

Pre účely zadania sme vytvorili 3 jednoduché API endpointy - GET zoznamu útulkov zapojených do projektu, GET pre hodnotu vyzbieranej sumy a počet darcov a POST na odoslanie obsahu formuláru. Dokumentáciu k nim nájdete na nasledovnom odkaze: https://frontend-assignment-api.goodrequest.dev/apidoc/

Grafické podklady pre zadanie nájdete na nasledovnom odkaze (registrácia do toolu Figma je zdarma): https://www.figma.com/file/FyxU4Zzp54tOrmQBNTly7G/GoodRequest-Frontend-Assignment

Vizuálna kvalita spracovania aplikácie a štýlovanie je tiež predmetom hodnotenia. Plynulé a user friendly UI s peknými prechodmi a animáciami sú plusový bod. Môžete použiť Mantine, Antd alebo akúkoľvek inú UI knižnicu- výber nechávame na vás.

Kritériá na použité technológie:

• Použiť Next.js
• Použiť TypeScript
• Na server state management použiť TanStack Query
• Na client state management (výber je na vás. Odporúčame context+reducer, zustand alebo iný)
• Knižnica pre správu formuláru (Odporúčame react-hook-form, formik)
• Štruktúru projektu nechávame kompletne na vás, ale budeme ju hodnotiť. :)

• Nice to have (nepovinné kritériá):

  • Použiť lokalizačnú knižnicu na stringy (napr. i18next)
  • Použiť styled-components
  • Validácia formuláru pomocou Zod schémy
  • Myslieť na accessibility (https://www.goodrequest.com/sk/blog/pristupnost-webu-pre-vyvojarov)

• Ak vám ostane čas alebo chuť :):

  • Responzívne zobrazenie
  • SEO (implementovať og:image a rôzne titles a descriptions na jednotlivých stepoch formuláru)
  • umožniť pridať viacerých darcov- je na vás ako to bude vyzerať

Postup odovzdania zadania:

• Naklonujte si tento repozitár k sebe
• Umiestnite ho do verejného github / bitbucket repozitáru a svoju prácu priebežne commitujte
• Do repozitáru udeľte prístup kontu roman.haluska@goodrequest.com (v prípade súkromného repo na bitbucket) alebo pošlite link na verejné github repo na tento e-mail
• Ozvite sa veronika.stefanatna@goodrequest.com a roman.haluska@goodrequest.com keď je zadanie za vás pripravené na review

Commit messages a spôsob commitovania budú tiež predmetom hodnotenia

Ak by ste mali hocijaké otázky alebo ste sa niekde zasekli:

• Kedykoľvek napíšte otázky alebo nás požiadajte o pomoc na roman.haluska@goodrequest.com - radi vám poradíme ;)

Assignement for Frontend developer - GoodRequest

The goal of the task is to create a simple application in Next.js that serves as a form for the GoodBoy Foundation to support Slovak shelters for dogs.

The application should allow potential supporters to:

• choose the form of help- a general donation for the foundation or a donation for a specific shelter
• select a specific shelter from a list of participating shelters (optional field for a general donation, mandatory field if donating to a specific shelter)
• choose the amount of the donation, with the possibility to set a custom value (mandatory field)
• fill in their personal details:
  • name – optional field (2-20 characters)
  • surname – mandatory field (2-30 characters)
  • e-mail – valid format of the e-mail address
  • phone – Slovak or Czech number with the country code +420 / +421, showing the selected country flag
  • confirm consent for personal data processing (mandatory field)
  • submit the validated form, or clearly notify the user of any errors
• view the contact details of the organization on the Contact page
• see the total amount raised and the number/list of donors (these data are regularly updated and accessible through the API endpoint described below)

For the purpose of this assignment, we have created 3 simple API endpoints: a GET for the list of shelters participating in the project, a GET for the total amount raised and the number of donors, and a POST for submitting the form content. You can find the documentation for these endpoints at the following link: https://frontend-assignment-api.goodrequest.dev/apidoc/

Design assets for the assignment can be found at the following link (registration to Figma tool is free): https://www.figma.com/file/FyxU4Zzp54tOrmQBNTly7G/GoodRequest-Frontend-Assignment

The visual quality of the application and styling is also part of the evaluation. A smooth and user-friendly UI with nice transitions and animations will earn extra points. You may use Mantine, Antd, or any other UI library – the choice is up to you.

Criteria for technologies to use:

• Use Next.js
• Use TypeScript
• Use TanStack Query for server state management
• Use a client state management solution (The choice is yours. We recommend context + reducer, zustand or other )
• Use a library for form management (We recommend react-hook-form, formik)
• You are free to decide the project structure, but we will evaluate it. :)

• Nice to have (optional criteria):

  • Use a localization library for strings (e.g., i18next)
  • Use styled-components
  • Form validation using a Zod schema
  • Consider accessibility (https://www.goodrequest.com/en/blog/web-accessibility-for-developers)

• If you have some spare time :):

  • Responsive design
  • SEO (implement og:image and various titles and descriptions on different form steps)
  • Allow adding multiple donors – it's up to you how this will look

To submit an assignment:

• Clone this repository to you
• Place it in a public GitHub / Bitbucket repository and commit your work regularly
• Grant access to the account roman.haluska@goodrequest.com (for private repos on Bitbucket) or send the link to your public GitHub repo to this email
• Contact veronika.stefanatna@goodrequest.com and roman.haluska@goodrequest.com when your assignment is ready for review

Commit messages and the way of commmiting will also be evaluated.

If you have any questions or get stuck:

• Feel free to ask questions or request help at roman.haluska@goodrequest.com – we’ll be happy to help you. ;)