DivLab is full-stack web application for mocking up and building web applications. Divlab offers a sleek user interface and a great user experience with drag-and-drop integration. Users can quickly get started designing their projects without signing up. If users would like to save their progress and come back at a later time to edit their work, they can sign up and save their progress. Users are able to create multiple projects and go back to working on them any time. Once you are finished, users are able to export an HTML file with their project to their computer and view it on the browser.
Visit DivLab to try us out!
Step by step guide for downloading repo:
cd <directory you want to download to>
git clone https://github.com/bowserdnd/divlab.git
cd divlab
npm install
npm start
Go to http://localhost:3000 to use DivLab!
Github: https://github.com/ZResnick
LinkedIn: https://www.linkedin.com/in/zachresnick1/
Github: https://github.com/joonhojhan
LinkedIn: https://www.linkedin.com/in/joonhojhan/
Github: https://github.com/elliotgonzalez123
LinkedIn: https://www.linkedin.com/in/elliot-gonzalez-4b18534a/
Technologies used in this project:
-
React is a JavaScript library for building user interfaces.
-
React will efficiently update and render only the components that need to be rerendered.
-
React is component-based and allows for each component to manage their own state.
-
Redux is an open-source JavaScript library for state management.
-
Redux works together with React and Firestore to build complex user interfaces and retrieve data from the database, while easily managing state.
-
Firebase is a mobile and web application development platform that offers a variety of services to help develop high-quality apps.
-
Firebase Authentication is used to allow users to sign in and keep their data unique.
https://firebase.google.com/docs/firestore/
-
Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.
-
Firestore is a NoSQL database where data is stored in documents, and these documents are stored in collections.
-
Firestore keeps data in sync and keeps data up to date.
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
-
HTML5 Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.
-
By specifying draggable and droppable elements, users can easily select a draggable element and move it to a droppable element.
-
HTML5 Drag and Drop is used to move components into containers in the workspace.
https://github.com/STRML/react-grid-layout
-
React-Grid-Layout is a grid layout system for React.
-
React-Grid-Layout is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.
-
React-Grid-Layout allows users to drag and resize containers in the workspace.
https://react.semantic-ui.com/
-
Semantic UI React is the React integration for Semantic UI.
-
Semantic UI is a modern front-end development framework. Is offers a sleek and subtle design that provides a lightweight user experience.
After logging in, add a container or two to your canvas...
You can add, resize, move, and delete these containers as you wish.
Click "Show Comopnents" to choose which elements to add to your canvas.
After adding a component, fill out the form and click preview to see your element in action!
When you're happy with the way everything looks, save it to your projects page.
Don't worry! You can always go back and edit your page later.
PRO TIP: You can see what your page will look like live by toggling the preview button on and off!
Once your happy with your site, export it as an HTML file.
Launch the download using your favorite Text Editor or directly in your web browser of choice, and see your site in action!
If you'd like, you can add navigation links to yoiur header!
To do this, change the div ID of the component you want the link to navigate to, and add that link to the 'navbars' section of the header in the format DivId1, DivId1 || DivId2, DivId2 || etc.... NOTE: Adding navlinks can only be done immediately before exporting. All navlinks will be cleared upon exit from that specific working space.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.