Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/viorelmocanu/ddd
Un proiect Svelte + Elder în care încerc să fac un site real, complet și funcțional de la zero. Găsești seria de live-uri pe YouTube în care am făcut live coding pentru site în care am construit de la zero totul, de la design la front end, back end și marketing, până la lansare, aici: https://www.youtube.com/playlist?list=PLfTqvIG4roBo_EnTnnreeOp-3
https://github.com/viorelmocanu/ddd
css elderjs html javascript live php romana romania romanian svelte sveltejs youtube
Last synced: about 9 hours ago
JSON representation
Un proiect Svelte + Elder în care încerc să fac un site real, complet și funcțional de la zero. Găsești seria de live-uri pe YouTube în care am făcut live coding pentru site în care am construit de la zero totul, de la design la front end, back end și marketing, până la lansare, aici: https://www.youtube.com/playlist?list=PLfTqvIG4roBo_EnTnnreeOp-3
- Host: GitHub
- URL: https://github.com/viorelmocanu/ddd
- Owner: ViorelMocanu
- License: mit
- Created: 2021-06-23T21:15:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-12T10:03:46.000Z (about 2 months ago)
- Last Synced: 2024-09-12T21:17:33.051Z (about 2 months ago)
- Topics: css, elderjs, html, javascript, live, php, romana, romania, romanian, svelte, sveltejs, youtube
- Language: PHP
- Homepage: https://dedede.ro/
- Size: 10.4 MB
- Stars: 2
- Watchers: 3
- Forks: 4
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# DDD: Dezinsecție Dezinfecție Deratizare
Un proiect Svelte + Elder în care încerc să fac un site complet și funcțional de la zero.
## Care e povestea acestui proiect?
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](https://www.youtube.com/playlist?list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c), î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](https://dedede.ro/).
Rezultatul final arată așa:
[](https://dedede.ro/)
### Pasul 1: Design de logo
[](https://www.youtube.com/watch?v=pvt1e4rft2Y&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=12)
Deși voiam să intru și în layout, în live-ul ăsta am desenat exclusiv logo-ul DeDeDe, de la zero, în Figma.
### Pasul 2: Design de layout
[](https://www.youtube.com/watch?v=g_KwnJZ7cSk&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=14)
În live-ul ăsta am desenat layout-ul de homepage pentru DeDeDe, de la zero, în Figma.
### Pasul 3: Mobile first responsive web design (HTML)
[](https://www.youtube.com/watch?v=L9iFeI1mgMo&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=15)
În acest live am început munca de Front End cu HTML-ul de homepage pentru DeDeDe, de la zero, în Visual Studio Code.
### Pasul 4: Mobile first responsive web design (CSS)
[](https://www.youtube.com/watch?v=8sY12JpTD6o&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=16)
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.
### Pasul 5: Pagina de contact, dark mode și animații în CSS și JS
[](https://www.youtube.com/watch?v=wRAQQJ5qlCI&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=17)
În acest live am construit pagina de Contact derivată din cea de Homepage și am adăugat niște efecte speciale pentru DeDeDe.
### Pasul 6: Back end în Svelte cu CMS și rute
[](https://www.youtube.com/watch?v=BTkF13qKxMs&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=18)
Dacă până acum am făcut numai muncă statică, din acest video începe transformarea template-urilor în site dinamic, folosind Svelte și ElderJS.
### Pasul 7: CMS în Svelte și bug fixing, open graph și meta tags
[](https://www.youtube.com/watch?v=WkABLfXWdis&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=19)
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.
### Pasul 8: Finalizarea muncii de back end în Svelte și ElderJS
[](https://www.youtube.com/watch?v=5XzHSbbZ9VY&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=20)
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.
### Pasul 9: Lansare și setup de marketing online
[](https://www.youtube.com/watch?v=NMJD4JIuvp8&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=21)
În sfârșit, vedem site-ul live. Facem un ultim debugging și pregătim tracking-ul și viitoarele campanii de marketing online.
### Pasul 10: Strângem clienți printr-o campanie de marketing pe Google Ads
[](https://www.youtube.com/watch?v=KN3Wjlld7y8&list=PLfTqvIG4roBqeTMQpBr3vupPv1vCBY1_c&index=22)
Î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.
## Bazat pe Elder.js Template Project
Acesta este un proiect bazat pe [Elder.js](https://elderguide.com/tech/elderjs/). 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/](https://elderjs.pages.dev/)
## Cum pornești proiectul
### 1. Instalează dependințele
```bash
npm install # sau doar yarn
```
### Pornește proiectul local
```bash
npm start # sau npm run dev
```
Deschide [localhost:3000](http://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/](https://elderjs.pages.dev/)
#### Construiește proiectul pentru deploy în producție
```bash
npm run build
```
După ce se termină build-ul, el va pune toate fișierele care trebuiesc deployate în folder-ul `./public`.
## Structura de foldere și fișiere root
```bash
.
├── _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
```