Drag n drop website builder με React & Nextjs

[Geo.grv]

Καλησπερα σε ολους,

πριν μερικους μηνες αρχισα να μαθαινω React και παραλληλα ξεκινησα αυτο το project.
Ειναι ενας drag n drop website builder, που χρησιμοποιει απλα React components που με την χρηση του Nextjs βγαινει σε Static σελιδες.
Ο στοχος μου ειναι να φτιαξω εναν builder, που μπορει να τον χρησιμοποιησει ο καθενας, οχι μονο για να φτιαξει μια σελιδα, αλλα και να κανει τις αλλαγες που θελει, ανεξαρτητα απο το γνωστικο του πεδιο. Πηγη της εμπνευσης μου, ποιος αλλος, το αφεντικο μου ( για βαλε αυτο το κειμενο δεξια, για βαλτο αριστερα κλπ κλπ).

Εαν ενδιαφερεται καποιος να "παιξει" μπορει στο https://adventurouscoding.com/?edit χρησιμοποιοντας τον λογαριασμο test 1234Aa# .
Οι περιορισμοι με αυτον τον λογαριασμο ειναι οτι δεν μπορειτε να σβησετε/αποθηκευσετε κατι.

Πως δουλευει το πραγμα , υπαρχει μια λιστα με components τα οποια μπορειτε να "τραβηξετε" και να τα ριξετε μεσα στον καμβα-σελιδα. Υπαρχουν δυο editing modes, το ενα ειναι για Layouts, το αλλο για σελιδες. Δουλευουν με τον ιδιο τροπο, μονο που στο Layout εχει ενα εξτρα component που θα μπει η σελιδα στην θεση του(content).

Για να "κουνησουμε" κατι απο την σελιδα, κραταμε λιγο το click πατημενο και μετα τραβαμε (200ms τουλαχιστον).

Για να κανουμε κατι Edit η για να "τραβηξουμε" κατι απο την σελιδα το οποιο αντιδραει στα click , με ALT+Click βγαινουν καποιες επιλογες που ειναι το Edit/Drag/Delete.

Με το Edit πειραζουμε οτιδηποτε παραμετρους εχει το component (πχ col span στα columns, κειμενο στα paragraphs κλπ) και κανουμε Save του Edit για να φανουν οι αλλαγες στην οθονη.

Η σελιδα αυτη ειναι το προσωπικο μου site οποτε θα βρειτε καποιες σελιδες ετοιμες σαν παραδειγματα, αλλα εχω αφησει και μια αδεια για να δοκιμασετε κατι απο την αρχη.

Για να μην κουρασω (περισσοτερο) δεν θα μπω σε περισσοτερες λεπτομεριες, εαν καποιος θελει να μαθει περισσοτερα ειναι ελευθερος να ρωτησει.

Σας ευχαριστω ολους που θα μπειτε στον κοπο εστω να διαβασετε το σεντονακι μου.

Disclaimer: δεν κανω showcase τα Components αλλα την λειτουργια του εργαλειου σαν builder, μην περιμενετε φανταχτερα css και animations.

[dhmm]

Φίλε μου θα έλεγα να κάνεις τα columns και rows να είναι με κουμπί add μέσα στην σελίδα που θα διευκόλυνε τον χρήστη.

Αν βρώ χρόνο πιστεύω θα γράψω και άλλα. Καλο κουράγιο και καλή ευκολία.