Web pro prodejce aut v JavaScriptu, VueJS a Strapi

Naším úkolem bylo vytvoření responzivních webových stránek pro prodejce sportovních a luxusních vozů. Tyto internetové stránky měli mít redakční systém. Hlavním požadavkem bylo vytvořit unikátní, moderní a přitom jednoduchý design. Tvorba webových stránek nám zabrala 3 měsíce a vývoj probíhal od dubna 2019 do června 2019.

Hlavní úkol - redesign stávajících webových stránek

Předchozí webové stránky byly pouze dočasným řešením. Obsahovaly základní, defaultní grafickou šablonu. Design nebyl přizpůsobený na míru potřebám klienta. HTML a CSS kódování grafické šablony bylo na velmi špatné úrovni. Administrace internetových stránek nebyla postačující. Požadavky na nové stránky:

1. navrhnout nový moderní a unikátní design pro internetové stránky,
2. nakódovat HTML a CSS nových webových stránek,
3. přidat redakční systém a administraci www stránek,
4. zlepšit SEO,
5. a optimalizovat rychlost načítání webu.

Popis procesu vývoje webu

1. Nejprve jsme udělali průzkum, zjistili jsme potřeby a stanovili hlavní cíle pro nové webové stránky.
2. Následně jsme provedli design proces, prototypování a wireframe nebo-li drátěné schema internetových stránek.
3. Po odsouhlasení klientem následovalo kódování a implementace stránek.
4. Poté jsme web otestovali. Testovali jsme jak podporu v různých typech prohlížečů, tak i rychlost načítání.
5. Nakonec jsme nastavili doménu, hosting a celý web spustili. 

Výsledek - redesign webu s redakčním systémem a administrací

Klient má nyní nový, krásný a moderní web s přehledem aut, značek a podstatných informacích o jeho společnosti. Web má nově redakční systém, kde může klient administrovat všechny potřebné informace a obsah webu. Nový web má nově popis služeb, seznam značek a automobilů k prodeji, kontaktní formulář a to celé v novém, krásném designu na míru. Jako výsledek jsme klientovi doručili:

• nový, krásný a moderní web design na míru,
• nakódování HTML šablony pro všechny stránky a podstránky,
• optimalizaci rychlosti načítání webu,
• vylepšené a optimalizované SEO,
• a redakční systém a možnost administrace webu, hlavně přidávání a editace vozů a značek automobilů.

Použité technologie pro tvorbu webu - JavaScript, Vue.js a Strapi.io

Pro tento web jsme vybrali JavaScript framework Vue.js za pomocí knihovny Nuxt.js a se Strapi.io jako redakční systém pro administraci. 

Vue.js je open-source JavaScript framework pro vývoj a tvorbu uživatelských rozhraní a tzv. single-page aplikací (SPA).
https://vuejs.org

Strapi.io je open source redakční systém, tzv. headless CMS, specializovaný pro frontend vývojáře. Dovoluje uživateli správu obsahu internetových stránek a následnou distribuci tohoto obsahu kamkoli dále.
https://strapi.io

Nuxt.js je knihovna nad Vue.js, která umožňuje snadnější vývoj frontend webů a aplikací.
https://nuxtjs.org

Některé další zajímavé knihovny, které jsme na webu použili:

• Vue-video-player - Vue.js komponenta pro video.js přehrávač,
• Vue-i18n - umožnuje překlad a vícejazyčnost webu,
• Vee-validate - slouží pro validování formulářů na webu.

Náš tým, který na vývoji pracoval

Rascasone tým pro vývoj frontendu webu ve Vue.js a Strapi.io:

• projektová manažerka Štěpánka,
• senior JavaScript, Vue.js a Strapi.io vývojář Dominik,
• Vue.js frontend vývojář Šimon,
• a tester a QA inženýr Jakub.

Nový web popsaný ve větším detailu

1. Úvodní stránka webu
2. JavaScript slider na míru
3. Speciální animace a efekt s červenou tečkou
4. Kontaktní formulář s validací
5. Responzivní design a optimalizace pro mobily
6. Speciální design menu
7. Redakční systém a administrace webu
8. Vícejazyčná podpora
9. Optimalizace rychlosti načítání a SEO
10. Napojení na backend serveru přes REST API

1. Úvodní stránka webu

Hlavním požadavkem bylo mít senzační a unikátní úvodní stránku webu.

2. JavaScript slider na míru

JavaScript slider na míru se speciální animací a efektem s červenou tečkou má čtyři polohy a automatický mění obsah. Případně po najetí tlačítkem myši se také obrázek mění.

3. Speciální animace a efekt s červenou tečkou

Efekt s červenou tečkou je designový prvek, který je přítomen na celém webu. Dodává webu exkluzivitu a designový nadstandard přesně jak klient požadoval.

4. Kontaktní formulář s validací

Kontaktní formulář je jednoduchý, ale použili jsme několik lehkých designových vylepšení. Formulář má také validace vstupů jako je email a jméno. Pokud validace neprochází není možné formulář odeslat.

5. Responzivní design a optimalizace pro mobily

Responzivní design a optimalizace pro mobily je základ každého nového webu v roce 2019, tudíž i tyto webové stránky jsou plně responzivní pro různé typy zařízení a různé velikosti obrazovek.

6. Design menu navigace

Pro navigaci a menu jsme použili speciální design, který je uživatel vidí přes celou obrazovku.

7. Redakční systém a administrace webu

Administrace dat a redakční systém je postaven na open source frameworku Strapi. Strapi nám umožnil namodelovat veškerá data a obsah, tak jak jsme potřebovali, snadno a rychle.

8. Vícejazyčná podpora

Vícejazyčná podpora na webových stránkách byla jedním z hlavním požadavků klienta. Plánuje také přidat i jazyk s potřebou RTL nebo-li right-to-left zobrazení.

9. Optimalizace rychlosti načítání webu a SEO

Rychlost načítání je v roce 2019 důležitým faktorem pro SEO a pro přívětivost webu. Uživatelé nechtějí čekat na dlouhé načítání obsahu. Na obrázku je vidět, že výkonová optimalizace a optimalizace rychlosti se nám povedla na 100%.

10. Napojení na backend serveru přes REST API

Frontend webu je implementován pomocí Nuxt.js a připojen k databázi MongoDB přes REST API.

Potřebujete vytvořit podobný web nebo webové stránky?

Pokud ano, tak nás kontaktujte a my Vám rádi pomůžeme, ať už s úvodní analýzou nebo dokončením celého webu.