A legújabb projektem, a Cyber E-commerce webáruház kezdőoldala. Ez az alkalmazás egy e-kereskedelmi platform prototípusa, amelyet vue.js keretrendszerben, Vue 3 és Vite segítségével fejlesztettem, hogy bemutassam a fejlesztési és design készségeimet.

Fontos megjegyezni, hogy jelen állapotban a főoldal van elkészítve teljes funkcionlitással.

A Cyber E-commerce – vue.js alapú webáruház főbb funkciói

• Felhasználóbarát UI/UX: A dizájn alapját egy Figma közösségi fájl adta, köszönet érte a készítőnek!
• Reszponzív Felépítés: Az oldal tökéletesen alkalmazkodik mobil, tablet és asztali eszközökhöz.
• Modern Technológiák: A projekt Vue 3-alapú, Vite és Tailwind CSS támogatással, hogy gyors, rugalmas és hatékony legyen.

Miért Készült Ez a Projekt?

Ez a projekt célja egy webshop storefront megalkotása volt, amely nemcsak felhasználóbarát, hanem technológiailag is releváns. Bemutatja, hogyan lehet API-kat, állapotkezelést és modern webes eszközöket hatékonyan integrálni. A termékek adataihoz Fake REST API-t használtam.

Pagespeed optimalizálás

A projekt során igyekeztem a legtöbb sebesség optimalizálási szabály alkalmazni, ezek többet közöt, hogy a hajtás alatti képeket lazy=”loading” attribútummal láttam el. A Cumulative Layout Shift minimalizálása érdekében skeleton loading elemeket alkalmaztam a termékkártyáknál. A képeket tömörítettem, és a legmodernebb, a Google által ajánlott .webp formátumban töltöttem fel.

Itt érhető el a honlap Pagepseed indexe, itt pedig a Gtmetrix által mért sebesség.

Funkciók bemutatása

Termékek filterezése

Lehetőség van a termékek filterezésésre, az első network kérést cache-eltem így hálózati sebességet spórolok.

Kosár felugró ablak

Kosárba rakáskor felugró ablak jelenik meg, ekkor eldönthetjük, hogy folytatjuk a vásárlást, vagy tovább megyünk a kosár oldalra.

Lenyíló kosár

A kosárba rakott termékeket lehetőség van lenyíló kosár modulban megtekinteni.

Egyedi lenyíló menü

A kategória menüben egyedi lenyíló menü is képes megjelenni, ahova 2db termékkártyát helyeztem el.

Kívánságlistára funkció

Lehetőség van a termékeket kívánság listára helyezni, amit a fejlécben is jelzek vizuálisan egy kis piros köröcskével.

Próbáld Ki Te Magad!

• Élő Demó: Cyber – ecommerce
• GitHub Repository: Tekintsd meg a kódot

Konklúzió

Ez a projekttel igyekszem prezentálni az e-kereskedelmi platformok iránti érdeklődésemet, és bemutatni a modern technológiák használatában szerzett tapasztalataimat. Várom a visszajelzéseket, és remélem, hogy inspiráló lehet más fejlesztők számára is!

Tetszett a bejegyzés? Szívesen dolgoznál velem?

Ajánlatkérés