jobhunter

Kliensoldali webprogramozás 2. beadandó

A feladat leírása

A feladat egy álláskereső oldal létrehozása, ami segíti a felhasználókat a munkakeresésben. A weboldalra kétféle felhasználót tudunk regisztrálni: munkavállalót, vagy munkáltatót. Mindkét szerepkör más-más funkciókat ér el.

A feladatot React és Redux kombinációjával kell megoldanod. Redux esetében ajánlott a redux toolkit és akár az RTK Query használata. Mivel az alkalmazás több oldalból áll, a react-router használata javasolt. A feladatban adott a szerveroldali REST API, leírását lentebb olvashatjátok, ehhez kell igazodnia a kliensnek.

Ugyan segítségképp mellékeltünk egy webdesignt, nem elvárás a design lefejlesztése, csak útmutatásképp szolgálnak az illusztrációk.

Navigáció

Minden oldal tetején megjelenik egy navigációs sáv, ahol az alkalmazás neve és az elérhető funkciók vannak menüpontokban megjelenítve:

• Jobhunter (ez az alkalmazás neve, rákattintva főoldalra visz)
• Ha nincs bejelentkezve
  • Főoldal - Álláshirdetések listázása
  • Regisztráció
  • Bejelentkezés
• Bejelentkezve munkavállalóként
  • Főoldal - Álláshirdetések listázása
  • Profilom - Felhasználó adatai, profil szerkesztése
  • Kijelentkezés
• Bejelentkezve munkáltatóként
  • Főoldal - Álláshirdetések listázása
  • Profilom - Kilistázva a felhasználó által meghirdetett munkalehetőségek
  • Álláshirdetés hozzáadása - Űrlap
  • Kijelentkezés

Oldalak

Bejelentkezés nélkül

Bejelentkezés nélkül a vendég felhasználók az alábbi oldalakat tekinthetik meg:

• Főoldal: Álláslehetőségek kilistázódnak, van egy szűrő rész, amivel szűrni tudunk a következő mezők alapján:

  • fizetési sáv
  • foglalkoztatottság típusa (full-time, part-time, internship)
  • település
  • van-e home-office lehetőség

• Bejelentkezés oldala

  • E-mail és jelszó párossal autentikálhatja magát a felhasználó

• Regisztráció oldala

  • Kiválasztható a profil típusa (Munkáltató / Munkavállaló)

  • Munkavállaló típus esetén megadhatóak a korábbi munkatapasztalatok:

    • Több-soros szöveges beviteli mezőben, amiben soronként tördelve meg tudjuk adni a munkahelyeinket és a hozzá tartozó pozíciót, illetve a tól-ig évszámot.

    Halo Haven;Front-end fejlesztő;2021-2022
    Dunder Mifflin;Full-stack fejlesztő;2022-
    

Munkavállalóként regisztrált felhasználó

Oldal: Állások listázása

• A felhasználó böngészhet az összes álláshirdetés között
• A felhasználó az alábbi tulajdonságok alapján szűrhet az ajánlatok között:
  • fizetési sáv
  • foglalkoztatottság típusa (full-time, part-time, internship)
  • település
  • van-e home-office lehetőség

Oldal: Profil

• A felhasználó profilján listázásra kerülnek a profilhoz tartozó adatai
• A megadott korábbi tapasztalatok szerkeszthetőek

Oldal: Álláshirdetés adatlapja

• Egy álláshirdetést megnyitva a felhasználó megtekintheti az álláshirdetés adatlapját
• Az álláshirdetés adatlapján bejelentkezett munkavállalónak lehetősége van jelentkezni az adott állásra

Munkáltatóként regisztrált felhasználó

Oldal: Profil

• Listázásra kerülnek a munkáltató korábban hozzáadott álláshirdetései
• Az egyes listaelemekhez a következő akciók tartoznak:
  • Megtekintés - Az adott álláshirdetésre jelentkezett munkavállalók megtekintése
  • Szerkesztés
  • Törlés
• A felhasználónak lehetősége van új hirdetéseket közzétenni az itt szereplő “Hozzáadás” gomb segítségével

Oldal: Álláshirdetés adatlapja

• Egy álláshirdetés kapcsán a megtekintés akciót választva a felhasználó megtekintheti azon felhasználók listáját, akik jelentkeztek a hirdetésre. A felhasználók listázásra kerülnek, és megtekinthető az adatlapjuk.

Oldal: Álláshirdetés hozzáadása, Álláshirdetés szerkesztése

Álláshirdetés hozzáadása és szerkesztése során az alábbi tulajdonságok állíthatóak be:

• Cég neve - szöveges beviteli mező
• Pozíció neve - szöveges beviteli mező
• Leírás - Több-soros szöveges beviteli mező
• Fizetési sáv (-tól, -ig) - szám beviteli mezők (Az intervallum szélső értékeinek megadása két űrlapelem segítségével történik)
• Foglalkoztatás formája - legördülő mező. Lehetőségek:
  • Teljes állás (full-time)
  • Részmunkaidős (part-time)
  • Gyakornoki (internship)
• Település - szöveges beviteli mező
• Van-e home office lehetőség - checkbox

A kliens

Az alkalmazást a client mappában kell elkészíteni. A mappa egyelőre egy teljesen friss Vite telepítést tartalmaz, a szükséges további függőségeket Nektek kell hozzáadni. A nem szükséges dolgokat viszont nyugodtan ki is törölheted!

cd client
npm install
npm run dev

REST API

A szerver forráskódja a rest-api mappában található. Telepíteni és indítani kell lokálisan:

cd rest-api
npm install
npm run migrate (csak első indításnál szükséges)
npm run dev (fejlesztői kiszolgáló futtatása)

Négy szolgáltatás van kivezetve:

• users
• experiences
• jobs
• applicants

A végpontok leírását és kipróbálását úgy tehetitek meg legegyszerűbben, ha az alábbi Postman gyűjteményt importáljátok a Postman REST API kliensbe. Ez egy webes alkalmazás, a Postman Agentet lokálisan telepíteni kell, majd a megnyíló alkalmazásban egy új Workspace-t kell létrehozni, és fent megnyomni az "Import" gombot, és egyesével linkként beilleszteni őket:

Minden szolgáltatás elérhető ezt a linket beillesztve

Ha el van indítva a rest-api, kipróbálhatók a végpontok. A felküldendő tartalmak a Body részben vannak előkészítve.

users

register

A végpont segítségével egy felhasználót regisztrálhatunk. A role mező beállításával határozható meg a regisztráció típusa. (company: munkáltató, jobseeker: munkavállaló)

authenticate

A végpont segítségével egy felhasználó autentikációs adatait elküldve egy accessToken-t kapunk vissza, amely segítségével elérhetjük azokat a végpontokat, amelyek csak bejelentkezés után érhetőek el.

user info

A végpont segítségével hitelesítés után lekérhetőek egy felhasználó adatai. A végpont használatához a felhasználó egyedi azonosítóját szükséges megadni.

experiences

Munkavállalóként bejelentkezve:

get user experiences

A végpont segítségével a bejelentkezett felhasználó korábbi tapasztalai kérhetőek le.

add (multiple) experience

A végpont segítségével hozzáadható egy vagy több korábbi munkatapasztalat. Ehhez a megadott formátumú objektumnak, illetve objektumok listájának elküldése szükséges.

modify experience

A végpont segítségével korábban felvett munkatapasztalatokat módosíthatunk az adott tapasztalat egyedi azonosítójának használatával.

delete experience (delete all experiences)

Törlés kérés segítségével a végponton keresztül törölhetünk egy vagy több hozzáadott munkatapasztalatot.

jobs

 all jobs

A végpont segítségével lekérhető az összes álláshirdetés (bejelentkezés nélkül is).

Az álláshirdetések szűrése query paramétereken keresztül történik.

(például: ?userId=1&salaryFrom[$gt]=350000&company[$like]=%miff%)

Munkáltatóként bejelentkezve:

create job

A végpontra elküldhetünk egy álláshirdetést, hogy hozzáadjunk egy újat.

modify job

A végpont segítségével módosíthatunk egy álláshirdetést. A módosításhoz az álláshirdetés egyedi azonosítóját megadva kell elküldenünk az új adatokat.

delete job (delete all jobs)

A végponton keresztül törölhetünk egy álláshirdetést, vagy kitörölhetjük az összeset.

applicants

apply for a job

Munkáltatóként bejelentkezve a végpont segítségével jelentkezhetünk egy álláshirdetésre. A kérés törzsében határozható meg az állás, amelyre a bejelentkezett felhasználóval jelentkezhetünk.

remove application from a job

Munkáltatóként bejelentkezve a végpont segítségével visszavonhatjuk az állásjelentkezésünket.

applicants for a job / jobs for an applicant

Munkáltatóként lekérhetjük az álláshirdetésünkre jelentkezett felhasználókat, munkavállalóként pedig lekérhető a bejelentkezett felhasználó összes állásjelentkezése.

Adatbázis

A mentett adatok egy lokális SQLite táblában jelennek meg: rest-api.sqlite. Ezt pl. a DB Browser for SQLite programmal tudunk megnézni, módosítani.

További információk

Elvárás az igényes megjelenés. Ehhez használhatsz saját CSS-t is, de komponens függvénykönyvárakat is, mint pl. DaisyUI, shadcn/ui, Material UI vagy Bootstrap.

Feltöltendő

Az egész projektet tömörítsd be, kliensestül, szerverestül, és azt töltsd föl. Beadás (tömörítés) előtt a node_modules mappákat(!) mindenképpen töröld!

Az elkészült program beadása a Canvasen történik, és két dolgot kell ide feltöltenetek. Erre azért van szükség, hogy megkönnyítsétek a gyakorlatvezetőitek dolgát, és a linket megtekintve ki tudják próbálni a projekteteket. Ne feledjétek, hogy a határidő fix, ezzel késni nem tudtok!

1. StackBlitz - https://stackblitz.com/ Hozzatok létre egy új projektet itt, vagy kössétek össze a GitHub repotokkal, és készítsetek egy megosztható linket a projektből, úgy, hogy csak a linkkel lehessen elérni azt. Ne publikáljátok, hiszen akkor megvan az esély arra, hogy más rátalál a projektetekre, és ilyenkor kódegyezés esetén ezt nem fogjuk tudni kinyomozni.
2. Fájlok feltöltése tömörített mappaként. Beadás előtt a node_modules mappa törlendő! Beadás előtt próbáljátok ki, hogy az alábbi utasításokkal működik:

Pontozás

• Ennek a README.md fájlnak a kitöltése. (kötelező)
• React használata (kötelező)
• Redux használata (kötelező)
• Navigáció: Navigáció megfelelően változik a be- és kijelentkezésnek megfelelően (1pt)
• Navigáció: Az oldal kezeli, hogy munkáltatóként vagy munkavállalóként jelentkezünk be, más más navigációt jelenít meg (1pt)
• Főoldal: A Főoldal megjelenik a keresővel (1pt)
• Főoldal: Az oldalon kilistázza a meghirdetett állásokat (1pt)
• Főoldal: Az oldalon lehet szűrni az állásokra (2pt)
• Főoldal: Az állásokra kattintva átvisz minket az alkalmazás az álláshirdetés részletező oldalára, ahol az ahhoz tartozó adatok jelennek meg (2pt)
• Regisztráció: A regisztráció működik (1pt)
• Regisztráció: A felhasználó munkavállalóként és munkáltatóként is regisztrálhat, különböző mezők jelennek meg a leendő fiók típusától függően (3pt)
• Regisztráció: Munkavállaló regisztráció esetén a felhasználó meg tudja adni a tapasztalatait (2pt)
• Bejelentkezés: Bejelentkezés működik (1pt)
• Munkavállaló - Profilom: Látszódnak a munkavállaló adatai (név, email cím), és az oldalon kilistázza az előző munkahelyeket (1pt)
• Munkavállaló - Profilom: A korábban hozzáadott munkatapasztalatok szerkeszthetőek (1pt)
• Munkavállaló - Álláshirdetések oldala: A gomb megjelenik, amivel az állásra tudunk jelentkezni. Sikeres kérés esetén a felhasználó számára megjelenik egy üzenet a sikeres jelentkezésről (1 pont)
• Munkáltató - Navigáció: Kizárólag bejelentkezett munkáltató esetén jelenik meg az álláshirdetés hozzáadása opció (1pt)
• Munkáltató - Profilom: Listázásra kerülnek a hozzáadott álláshirdetések, az egyes listaelemek mellett a szerkesztés, törlés és megtekintés opciók, megjelenik a “Hozzáadás” gomb (2pt)
• Munkáltató - Profilom: A megtekintés gomb hatására a felhasználó számára listázásra kerülnek az adott hirdetésre jelentkezett munkavállalók (1pt)
• Munkáltató - Profilom: Álláshirdetés törlése működik (1pt)
• Munkáltató - Álláshirdetés hozzáadása: Álláshirdetés hozzáadása működik (2pt)
• Munkáltató - Profilom: Álláshirdetés szerkesztése működik (2pt)
• Profilom: Kijelentkezés gomb működik(1pt)
• Igényes megjelenés (2pt)

Összesen: 30 pont (Minimum: 12 pont)

• Plusz feladat: az álláshirdetések listája infinite-scrollinggal jelenik meg (+2pt)
• Plusz feladat: az álláshirdetések létrehozásánál a munkáltató egy range-sliderrel tudja megadni a fizetés minimum és maximum értékét (+2pt)
• Plusz feladat: Modalban jelenik meg az oldal valamely része (vagy az álláshirdetés leírása, vagy a az álláshirdetésre jelentkező emberek listája, akár a profiljai) (+1pt)