Dragon Drop is an Angular static website builder app inspired by popular website builders such as Wix, Squarespace, and Shopify. Users can add, arrange, and customize webpage sections and elements using drag-and-drop and resizing functionalities. Upon completion, the application generates a static website ready for deployment.
Production deployed builder: Dragon Drop Website Builder
Example website generated using Dragon Drop Website Builder: Website
Example website repo: Repo
Documentation generated with Compodoc: Documentation
This app was made as part of the graduate thesis (T. Škobić, "Building Web site generators", Graduate thesis, University of Zagreb, Faculty of Organization and Informatics, Varaždin, 2023, Available at: https://urn.nsk.hr/urn:nbn:hr:211:816572).
- Drag-and-Drop Sections: Easily add new sections to your webpage.
- Section Organization: Arrange and organize sections and elements via drag-and-drop.
- Resizable Elements: Adjust the size of sections and elements.
- Context Menus: Specialized context menus for sections and elements.
- Styling: Apply global styles or customized styles for individual sections and elements.
- Undo/Redo: Ability to revert or reapply changes.
- Preview: View your website design for both desktop and mobile screens.
- Predefined Sections: Special footer and header sections with link lists.
- Angular Material
- Angular CDK
- CKEditor 5
- NgRx
- ngrx-wieder
- angular-gridster2
- angular-resizable-element
- jszip
- file-saver
- lodash-es
- ngx-color-picker
- uuid
- RxJS
This project was generated with Angular CLI version 16.1.4.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.