English version

Készletböngésző

Egy speciális alkalmazás, raktárkészletek böngészésére és hasznos kimutatások, árajánlatok generálására.
Projektmappa felderítése »

Demo megtekintése · Hiba bejelentése · Új funkció kérése

Tartalomjegyzék

1. Projekt Összefoglaló
   • Alkalmazási területek
   • Az oldal felépítése
   • Megjelenített tartalom
   • Felhasználói jogosultságok
   • Ütemterv
   • Alkalmazott technológiák
2. Alkalmazás telepítése és konfigurálása
3. Deployment/Hosting
4. Közreműködés
5. Kapcsolat
6. Hasznos linkek

Projekt Összefoglaló

Ez az alkalmazás azzal céllal jött létre, hogy egy elektronikai eszközök és számítástechnikai kiegészítők gyártásával foglalkozó nemzetközi vállalat mindenkori aktuális készlet adatait, különböző célok szerint rendszerezze és felhasználóbarát módon megjelenítse. Az így nyert adatokból hasznos kimutatásokat generálhatunk, melyeket akár exportálhatunk is offline használatra.

Az alkalmazás által használt nyers készlet adatokat a vállalat óránként frissülő XML adatfolyama biztosítja, hozzávetőleg 3000 egyedi cikszámmal ellátott termékhez.

Alkalmazási területek

Értékesítés

Használat a fielden:
Egy hasznos eszköz, amely segít a gyár szortimentjének átlátható, interaktív prezentálásában üzleti tárgyalások során. A termékportfóliót gyorsan és egyszerűen megjeleníthetjük, szűrhetünk benne kategóriára, vagy kereshetünk a termékek között egyéb szempontok alapján. Átfogó információkat kaphatunk minden egyes termékről, beleértve az elérhető készleteket, aktuális árakat és termékfotókat.

Árajánlatok összeállítása:
Mivel hatékonyan böngészhetünk a termékek között és minden releváns adatot megtalálhatunk egy helyen, nagyban megkönnyíti számunkra a sokszor kihívást jelentő komplex árajánlatok összeállítását. Nincs más dolgunk, mint kiválasztani a kívánt termékeket, beállítani a szükséges paramétereket, majd elmenteni a végleges ajánlatot. Az elkészített árajánlatokat több féle formátumban is letölthetjük offline használatra.

Üzletfejlesztés

A bejövő adatok feldolgozásával az alkalmazás képes különböző hosszú távú statisztikai elemzések / kimutatások / diagramok megjelenítésére, amelyek segítenek az aktuális trendek és piaci igények nyomonkövetésében. Ezek alapján üzleti stratégiánk pontosabb és hatékonyabb lehet.
Segít olyan kardinális kérdésekben, mint a megfelelő árazáspolitika meghatározása és a jövőbeni termékfejlesztések (kínálatbővítés, termékkivezetés) megtervezése, ezzel csökkentve a rejtett kockázatokat és javítva a várható megtérülési rátát.

Az oldal felépítése

(az ütemterv-vel összhangban)

Megjelenített tartalom

Vendég látogatók számára elérhető oldalak

• Landing Page - az aktuális promóciós termékek jelennek meg
• Regisztrációs oldal - a látogató a regisztrációs form kitöltésével hozzáférést szerezhet az oldalhoz
• Bejelentkezési oldal - a regisztrált felhasználók itt jelentkezhetnek be az oldalra

Bejelentkezett felhasználók számára elérhető oldalak

• Profil oldal - a felhasználó frissítheti a korábban megadott regisztrációs adatait
• Készlet böngésző - böngészés a termékek között, szűrés, szabadszavas keresés, termékadatok/leírások/képek megjelenítése
• Árajánlatbekérő - a felhasználó listát készíthet a kiválasztott termékekből, amelyekre szeretne egyedi árajánlatot kérni
• Elküldött árajánlatkérések - a felhasználó által korábban beküldött árajánlatkérések terméklistája

Felhasználói jogosultságok

Vendég

• Nézelődhet az oldalon, megtekintheti az aktuális promóciókat
• Regisztrálhat az oldalon

Regisztrált felhasználó

• Hozzáfér a termékadatokhoz, használhatja a készlet böngészőt
• Árajánlatbekérő listát készíthet a számára releváns termékekből, de elküldeni még nem tudja
• Módosíthatja a saját felhasználói adatait

Regisztrált és az emailes verifikáción átesett felhasználó

• Elküldheti az ajánlatigényeit
• Megtekintheti a korábban beküldött árajánlatigényeit

(Ugrás a tetejére)

Ütemterv

• Aktuális promociók, leárazott termékek megjelenítése - főoldal
• Felhasználó regisztráció
  • Emailes verifikáció (automatikus megerősítő link küldés)
• Felhasználó bejelentkezés
• Admin bejelentkezés, egyedi jogosultságok
• Készletböngésző
  • Termékek betöltése és megjelenítése specifikációkkal és fotókkal
  • Termékek szűrése és megjelenítése
  • Keresés termékre, cikkszám/név alapján
• Árajánlat-bekérő lista összeállítása
  • a kiválasztott termékekből lista készítése és elküldése
  • összeállított lista exportálása excel formátumban
  • összeállított lista exportálása pdf/word formátumban
  • emailben elküldi a listát
• Egyedi árajánlatkészítő - Admin oldal
  • a kiválasztott termékek listájának összeállítása - dátummal, névvel, mennyiséggel, árral, specifikációkkal, fotóval, elérhető készletekkel
  • összeállított lista exportálása excel formátumban
• Statisztikák - Admin oldal
  • megjeleníti az eladási árak változásait egy adott időszakra vonatkozóan
  • változások vizuális ábrázolása charton/diagramon
• Automatikus ütemezett adatbázis frissítés
  • Ütemezett vállalati adatbázis kapcsolat xml/csv datafeed-en keresztül
  • EU Vámtarifa API kapcsolat - termékadatok begyüjtése (termékkategória, vámtarifaszám/EKAER validáció)
  • EU EPREL API kapcsolat - termékspecifikációk begyüjtése (EPREL termékadatlapok, QR-kód)
  • Adatbázis frissítése (árak, készletek, termékszortiment)
• Kapcsolatfelvételi form - felhasználói email küldés az admin részére

(Ugrás a tetejére)

Alkalmazott technológiák

Backend:

• MongoDB
• Express
• Node
• JSON Web Token
• Nodemailer
• Docker
• Cyclic - backend hosting

Frontend:

• React
• Semantic UI React
• Styled-components
• Docker
• Firebase - frontend hosting

Teszt:

• Jest
• Mailtrap

API dokumentáció:

• Swagger/OpenAPI

Alkalmazás telepítése és konfigurálása

1. .env file-ok létrehozása a .env.example alapján a backend és frontend mappában
2. docker compose build parancs futtatása az applikáció gyökérkönyvtárában, majd
3. docker compose up paranccsal indítható el az applikáció
4. a backend gyökér-könyvtárban az - npm run loadData - parancs futtatásával feltölthetjük az adatbázisunkat a termékekkel. (online adatbázisnál 2-3 perc a teljes feltöltési idő)
5. a backend gyökér-könyvtárban az - npm run loadArticles - parancs futtatásával feltölthetjük az adatbázisunkat a promóciós cikkekkel.
6. Inventory Browser app: http://localhost:3000/
7. Open API dokumentáció: http://localhost:4000/api-docs

Deployment

A hostolt Applikáció demó az alábbi nyilvános linken is megtekinthető:
https://inventory-browser.web.app/

Bejelentkezés

• Email: test@test.com
• Password: 12345678

Vagy akár saját új felhasználót is regisztrálhatunk a /register alatt

A backend-et Cyclic-re, a frontend-et Firebase-re deployoltam.

Közreműködés

Örömmel fogadok minden közreműködést! Amennyiben van olyan fejlesztési javaslata amit szívesen megosztana velem, kérem, egyszerűen nyisson egy új issue-t, írja meg javaslatát és lássa el a patchrequest tag-gel, vagy kövesse az alábbiakat:

1. Fork-olja a projektet
2. Hozza létre a saját fejlesztési branch-ét (git checkout -b feature/AmazingFeature)
3. Commit-olja a változtatást (git commit -m 'Add some AmazingFeature')
4. Push-olja (git push origin feature/AmazingFeature)
5. Végül nyisson egy Pull Request-et

Kapcsolat

Gergely Almasi

Project Link: https://github.com/Skill4fun/Inventory-Browser

Köszönet az alábbi tartalmakért, melyek segítségemre voltak a fejlesztés során:

Complete guide for Styled components in React
Common mistakes with React Testing Library
Swagger Editor
Build component driven UI
A useful tool for React testing
The most visual and interactive way to learn Git branching
12 React UI Layout Grid Components & Libraries
Build any component and share it with your team!
A custom hook for managing forms with ease
Markdown Guide

(Ugrás a tetejére)