Un proiect Svelte + Elder în care încerc să fac un site complet și funcțional de la zero.
Proiectul a început când un amic de-ai mei care are o companie care se ocupă atât cu dezinfecția, dezinsecția și deratizarea cât și cu curățenia m-a rugat să-l ajut cu un site separat pentru DDD (Dezinsecție, Dezinfecție, Deratizare). Simțea că site-ul vechi (făcut tot de mine acum foarte mult timp) nu-i deservea scopurile în mod eficient, fiindcă voia să se concentreze mai mult pe promovarea părții de DDD decât a părții de curățenie, și site-ul vechi era construit în jurul ideii de curățenie.
În paralel, aveam nevoie de un proiect pe care să-l construiesc de la zero pentru live-uri, care să continue natural tipul live-urilor pe care le-am făcut până acum, în care făceam live coding. Așa că am îmbinat cele două idei într-un proiect care urma să aibă 10 părți – 10 video-uri de câteva ore fiecare în care fac design de logo, de layout, codez front end (HTML, CSS și JS) și back end (Svelte cu ElderJS), dar intru și în marketing online (Google Tag Manager, Analytics și Ads). Video-urile cumulate însumează aproximativ 48h de muncă necesară pentru acest proiect, la care se mai adaugă aproximativ 3-4 ore de muncă în afara live-urilor.
Proiectul de față documentează, deci, toți pașii prin care am trecut să ajung la un site complet și funcțional, care e live la: DeDeDe.ro.
Rezultatul final arată așa:
Deși voiam să intru și în layout, în live-ul ăsta am desenat exclusiv logo-ul DeDeDe, de la zero, în Figma.
În live-ul ăsta am desenat layout-ul de homepage pentru DeDeDe, de la zero, în Figma.
În acest live am început munca de Front End cu HTML-ul de homepage pentru DeDeDe, de la zero, în Visual Studio Code.
După ce live-ul trecut am făcut HTML-ul, în acest live am continuat munca de Front End cu CSS-ul de homepage pentru DeDeDe.
În acest live am construit pagina de Contact derivată din cea de Homepage și am adăugat niște efecte speciale pentru DeDeDe.
Dacă până acum am făcut numai muncă statică, din acest video începe transformarea template-urilor în site dinamic, folosind Svelte și ElderJS.
Mă lovesc de niște probleme de cod în Svelte, încerc să fac bug fixing pe ele și construiesc Open Graph și Meta Tags pentru DeDeDe.
După debugging cu succes, ne ocupăm de ce feature-uri mai e nevoie să implementăm dinamic pentru site și îl pregătim de lansare.
În sfârșit, vedem site-ul live. Facem un ultim debugging și pregătim tracking-ul și viitoarele campanii de marketing online.
În acest ultim live, creăm efectiv campania de marketing pentru DeDeDe în Google Ads și o setăm astfel încât să aibă șanse maxime de reușită cu buget cât mai mic.
Acesta este un proiect bazat pe Elder.js. Template-ul e luat de pe https://github.com/elderjs/template și sursa Elder.js este aici: https://github.com/elderjs/elderjs
Un demo al template-ului este aici: https://elderjs.pages.dev/
npm install # sau doar yarnnpm start # sau npm run devDeschide localhost:3000 în browser pentru a vedea aplicația funcționând.
Când serverul e pornit, orice schimbare în, spre exemplu, folder-ul src pe care o salvezi ar trebui să se vadă după un refresh pe pagină.
Template-ul curent e deployat ca live demo aici: https://elderjs.pages.dev/
npm run buildDupă ce se termină build-ul, el va pune toate fișierele care trebuiesc deployate în folder-ul ./public.
.
├── _backup # folder exclus în .gitignore cu fișiere de care am nevoie just in case
├── _static # folder cu fișierele statice la care am lucrat inițial (HTML, CSS, resurse)
│ ├── images # folder cu imagini statice pentru design-ul site-ului
│ ├── readme-images # folder cu imagini statice folosite în readme.md
│ └── resources # folder cu CSS, font-uri, SVG-uri și JS-uri
├── .vscode # folder exclus în .gitignore cu date de conectare la SFTP din VSCode
├── assets # folder cu resurse statice copiate în root-ul site-ului deployat
│ ├── images # folder cu imagini statice pentru design-ul site-ului
│ └── resources # folder cu CSS, font-uri și JS-uri statice
├── node_modules # folder autogenerat exclus în .gitignore cu toate dependințele din NPM
├── public # folder autogenerat exclus în .gitignore cu fișierele compilate pentru deploy
├── src # folder cu sursele SVELTE ale proiectului
│ ├── components # folder cu componentele reutilizabile de tip Svelte din proiect
│ ├── layouts # folder cu layout-urile de tip Svelte folosite în proiect
│ └── routes # folder cu rutele (paginile) de tip Svelte + JS folosite în proiect
│ ├── confidentialitate
│ ├── contact
│ ├── cookies
│ ├── home
│ ├── informatii-utile
│ └── termeni-si-conditii
├── .editorconfig # fișier cu configurări de editor, în speță de VSCode
├── .env # fișier exclus în .gitignore cu useri și parole critice
├── .eslintignore # fișier cu configurări de ESLint (ce fișiere să ignore ESLint-ul)
├── .eslintrc.js # fișier cu configurări de ESLint
├── .gitignore # fișier cu configurări de GIT (ce fișiere să ignore GIT-ul?)
├── .prettierrc # fișier cu configurări de Prettier
├── elder.config.js # fișier cu configurări de ElderJS
├── LICENSE # fișier cu licența folosită de proiect
├── netlify.toml # fișier cu configurări de Netlify pentru deploy
├── package-lock.json # fișier autogenerat de lockfile pentru pachete
├── package.json # fișier cu definiția pachetelor și funcțiilor de Node
├── README.md # fișier cu detalii despre proiect
├── rollup.config.js # fișier cu configurări de Rollup
└── svelte.config.js # fișier cu configurări de Svelte