Am construit un admin dashboard in Bootstrap 5 si Vanilla JS

Salutare devs!

Ieri am publicat prima versiune unui proiect open source la care lucram de mai mult de o luna impreuna cu un prieten care a fost designerul. Este vorba de un dashboard scris in Bootstrap 5 folosind doar Vanilla Javascript (marea majoritatea a dashboard-urilor folosesc jQuery).

Este licentiat sub MIT License asa ca termenii de folosire sunt foarte relaxate. Puteti sa-l folositi pentru proiecte personale sau clienti :slight_smile:

Demo: https://demo.themesberg.com/volt/index.html
Download: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
Github repo: https://github.com/themesberg/volt-bootstrap-5-dashboard

Ce features ati dori sa aiba? Noi planificam sa oferim RTL support si sa facem sidebar-ul expandable/minifiable (adica sa fie doar cu icon sau icon + text) pentru urmatorul update.

Cheers :beers:

9 Likes

M-am uitat putin peste dashboard, complet facut cu picioarele in opinia mea.

  • structura HTML complet gresit facuta pentru un dashboard;
  • padding-uri & margin-uri date aiurea sau deloc;
  • ai erori in consola cand apesi pe anumite butoane etc.;
  • sidebar-ul are un super scrollbar. Iconitele daca au alt width le centrezi la jumatate ca sa nu se vada naspa;
    image
  • footer-ul nu se aliniaza cu restul componentelor din pagina din cauza structurii proaste;
  • paginile de signup / signup / forget / reset password / lock / 404 / 500 - daca fac resize la inaltimea browser-ului nu mai vad formularele si nimic; scrollbar pauza.

Ieri am publicat prima versiune unui proiect open source la care lucram de mai mult de o luna impreuna cu un prieten care a fost designerul.

Mai mult de o luna pentru asta ? :troll:

1 Like

Apreciez QA testing-ul pe care l-ai facut. Ai putea sa lucrezi la atitudine totusi.

10 Likes

N-am facut QA pe tema ta, stiam sigur ce nu o sa mearga pentru ca nu ai invatat framework-ul nici acum.
Problema este ca tu ai stat sa implementezi librarii in tema ta, in loc sa lucrezi la structura paginii.

1 Like

Structura HTML se poate remedia, dar atitudinea ta negativa fata de orice facem noi nu cred ca se va remedia.

Proiectul va primi oricum un update (am avut semnalari si din mai multe parti). E bine totusi ca developerii in general apreciaza dashboard-ul.

Edit: din cate inteleg atitudinea negativa nu este una personala, ci e una generala din
partea ta. Dar e bine, cateodata e bine sa vezi si exemple negative in societate sa iti dai seama cum anume sa nu te comporti.

Noi in continuare vom dezvolta temele open source si cele de plata (ca trebe si noi sa mancam ceva) in functie de feedback-ul comunitatii (unde esti si tu prezent si vom remedia problemele semnalate de tine).

Sanatosi sa fim :blush:

2 Likes

Om care face dashbord-uri aici

Pt mine structura este ok. Ai putea sa duci pagina de setari intr-o sectiune mai dedicata.


Sau mai jos.

In aplicatia pe care lucrez, avem pe veritcala toate dashboard-urile si pe o bara orizontala sus, alte functionalitati ale aplicatie.

Culorile imi plac, este bine ca ai o agregare. La mine, pt ca am multe serii de timp pe un grafic, am si posibilitatea de a le ascunde. Ar fi util daca se pot adauga mai multe serii de timp pe un grafic.

De erori si altele nu ma intereseaza pt ca ma gandesc ca-i un proiect dummy cu date fictive.

Bafta in continuare!

BTW:
Apreciez ca implementezi feedback-ul de pe forum. :blush:

2 Likes

Care-i raționamentul să pui begin::Sidebar chiar înainte de class="sidebar"? Ești plătit la numărul de caractere?

Care-i raționamentul în a pune end::Sidebar când poti pune: <!-- /.sidebar --> (sau /#sidebar, dacă ai ID).

Și pe bune, begin::body? :facepalm:

2 Likes

Exact asa.

Cand se incarca orice pagina, apare un fulger de loading, sau ceva. Este pus un timeout intentionat, sau atat de mult dureaza sa se incarce continutul static?

E timeout intentionat. E doar o chestie de artificii ce se poate scoate daca se vrea.

Din moment ce are 2 template-uri la vanzare pe site-ul oficial booststrap, cred ca stie destul de bine acest framework, hai totusi sa nu mai fim hateri(se intra destul de greu acolo btw), restul este cancan :wink: !

Aceste greseli, cu siguranta se vor rezolva, nimic nu este perfect in lumea asta, insa de la niste greseli minore la treaba cu “e facut cu picioarele” este cale lunga, m-am uitat si peste portofoliul tau si eu as putea sa zic ca ai un design de incepator, insa nu fac asta deoarece poti sa inveti multe inca esti tanar :wink:

5 Likes

Design-urile sunt inspiratii, nu creatii proprii. Nu vad nimic deosebit. La fel si landing-ul de prezentare al temei/lor, l-am mai vazut si la altii (https://demo.themesberg.com/volt/). Daca scoti ilustratiile free pe care le-ai folosit, nu mai ramane nimic din design. :+1:

Voi de la inceput ati facut magarii: reviews count fals :-1:, purchases count fals :-1:, etc. Iti faci reclama prin minciuni ? Poate asa ati fost voi crescuti prin zona aia.

Cat despre Quality Assurance, efectiv zero barat. Nu ati testat absolut nimic, va bazati pe comunitate si pe cei care cumpara tema sa va puna bug-urile / problemele pe tava, indiferent de rapiditatea cu care le rezolvati. Voi nu aveti in cap decat profitul rapid :-1:, tocmai din cauza asta le lansati fara un QA facut ca la carte.

Daca pe prima pagina ai probleme si nu le-ai vazut, eu nu mai am nimic de spus. Chiar nici nu o sa mai comentez absolut nimic despre temele voastre incepand de acum. Efectiv amatorism din partea echipei Themesberg (https://themesberg.com/).

Parerea mea personala ramane: framework-ul nu este invatat complet, viziune zero cand vine vorba de a crea o structura pentru un anumit tip de layout: dashboard in speta (poate crea probleme grave cand incerci sa implementezi ceva nou in template).

Congratulations! Nice Work, GLWS :troll:.

1 Like

Design-urile sunt inspiratii, nu creatii proprii. Nu vad nimic deosebit. La fel si landing-ul de prezentare al temei/lor, l-am mai vazut si la altii (https://demo.themesberg.com/volt/). Daca scoti ilustratiile free pe care le-ai folosit, nu mai ramane nimic din design. :+1:

Opinie personala de design.

Voi de la inceput ati facut magarii: reviews count fals :-1:, purchases count fals :-1:, etc. Iti faci reclama prin minciuni ? Poate asa ati fost voi crescuti prin zona aia.”

Sa iti dau contactul fiecarei persoane care a scris un review pe site-ul nostru? Sa iti dau toate facturile facute pentru achizitii? Vorbesti fara sa ai nici o dovada in acest sens. Intr-adevar am avut o perioada (primele luni cand a fost facut Themesberg) cu cateva review-uri puse de noi pentru a creste pe listarile de SEO (ca altfel nu arata acel smart snippet), dupa ce am primit review-uri reale le-am scos pe cele vechi.

Cat despre Quality Assurance, efectiv zero barat. Nu ati testat absolut nimic, va bazati pe comunitate si pe cei care cumpara tema sa va puna bug-urile / problemele pe tava, indiferent de rapiditatea cu care le rezolvati. Voi nu aveti in cap decat profitul rapid :-1:, tocmai din cauza asta le lansati fara un QA facut ca la carte.

Da, pentru ca tinem comunitatea aproape de noi. Legat de profit, ai probleme de vedere? Acest dashboard este open source sub MIT License, poti inclusiv sa il comercializezi. Da, are o versiune pro. Si ce? Esti obligat sa il cumperi? NU. Il cumpara altii, daca doresc.

Daca pe prima pagina ai probleme si nu le-ai vazut, eu nu mai am nimic de spus. Chiar nici nu o sa mai comentez absolut nimic despre temele voastre incepand de acum. Efectiv amatorism din partea echipei Themesberg (https://themesberg.com/).

Opinia ta personala, suntem respectati de sute de dezvoltatori care au folosit produsele noastre pentru a dezvolta site-uri pentru ei si clientii lor. Mereu este loc de imbunatatire.

"Parerea mea personala ramane: framework-ul nu este invatat complet, viziune zero cand vine vorba de a crea o structura pentru un anumit tip de layout: dashboard in speta (poate crea probleme grave cand incerci sa implementezi ceva nou in template).

Congratulations! Nice Work, GLWS :troll:."

Trebuie sa iti mearga foarte bine sa fii asa hater si troll nu doar cu noi, dar si cu alti oameni.

Este usor sa critici si sa dai cu noroi de pe tusa. Care sunt contributiile tale pe open source? Am verificat eu. Aproape zero. Si tu ne acuzi de profit? :troll:

Contul tau:

Contul meu:

Si in timp ce tu dai cu noroi in proiect, aparent alti dezvoltatori apreciaza proiectul atat de mult, incat a primit peste 100 de stars pe Github in mai putin de 24 de ore.

Chiar si haterii de pe Reddit ne-au apreciat proiectul:

Cu toate astea zise, o sa aducem un update pe baza feedback-ului din comunitate (deja este facut issue pe repo). Le multumesc mult membrilor de pe acest forum pentru input-ul lor legat de Volt :slight_smile:

PS: astazi este featured si pe Product Hunt (ia incearca tu sa faci ceva si sa fie pus acolo featured) https://www.producthunt.com/posts/volt-3 :wink:

5 Likes

Nu inteleg de unde atata invidie … ca sa nu o numesc metalitate romaneasca.

Probabil ca de asta nu exista o comunitate activa de startup-uri in Romania … majoritatea sunt prea ocupati sa-si dea cu parerea despre munca altora.

15 Likes

Just sayin’

4 Likes

Hai sa-mi dau si eu cu parerea: am aruncat o privire superficiala, mie mi-a placut.

Cui nu-i place, sa faca mai bine.

Probabil de aia nu exista nici foarte multe proiecte open source romanesti pe GitHub, cei mai multi developeri sunt prea ocupati cu critica :slight_smile:

11 Likes

Nu arata rau, totusi nu inteleg de ce mai exista piata de teme bootstrap.
Poti lucra la componente react/panouri in react/svelte/angular/vue…

Nu stiu cine mai face panouri de admin cu bootstrap.

Pentru ca un dashboard poate fi folosit si doar ca HTML/CSS/Javascript si combinat cu un back-end precum Laravel. Mai mult, Bootstrap inseamna in principiu doar partea de CSS, teoretic componentele de HTML se pot baga cam in orice tehnologie (ie. React/Svelte etc).

Oricum, noi deja lucram la o integrare a Volt in React :slight_smile:

5 Likes

Let’s try again (version 1.0.1) :rofl: … acum cu plugin.

image

Demo (firefox + chrome):

1 Like

@Zoli_Szogyenyi: ce vrea să spună @zshare dar nu îi iese din cauza tonului este că (cel mai probabil) voi testați (doar) pe MacOS, unde nu ai scrollbar-uri, ergo problema semnalată de el nu există.

6 Likes