{"id":28745507,"url":"https://github.com/zbeucler2018/fieldnavformbuilder","last_synced_at":"2026-05-09T09:17:21.193Z","repository":{"id":48275334,"uuid":"384181833","full_name":"zbeucler2018/FieldNavFormBuilder","owner":"zbeucler2018","description":"Low-code form builder developed for my internship for FieldNav inc","archived":false,"fork":false,"pushed_at":"2021-08-18T18:07:03.000Z","size":484,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-28T19:17:17.643Z","etag":null,"topics":["firebase","low-code","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zbeucler2018.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-08T16:12:04.000Z","updated_at":"2023-11-15T07:42:28.000Z","dependencies_parsed_at":"2022-08-23T15:01:23.669Z","dependency_job_id":null,"html_url":"https://github.com/zbeucler2018/FieldNavFormBuilder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zbeucler2018/FieldNavFormBuilder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zbeucler2018%2FFieldNavFormBuilder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zbeucler2018%2FFieldNavFormBuilder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zbeucler2018%2FFieldNavFormBuilder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zbeucler2018%2FFieldNavFormBuilder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zbeucler2018","download_url":"https://codeload.github.com/zbeucler2018/FieldNavFormBuilder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zbeucler2018%2FFieldNavFormBuilder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260166413,"owners_count":22968645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","low-code","reactjs"],"created_at":"2025-06-16T13:14:42.759Z","updated_at":"2026-05-09T09:17:16.148Z","avatar_url":"https://github.com/zbeucler2018.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FieldNav Form Builder\n\n## Overview\nThe Form Builder app allows a user to easily build and preview a custom form by using a low-code (or WYSIWYG) tool.\n\n## Installation\n1. Make sure that `npm` and `node.js` are installed globally on your system\n2. Go to github and download the code from [this repo](https://github.com/zbeucler2018/FieldNavFormBuilder)\n3. Once the code has downloaded, `cd` into that directory and type `npm install`\n   - This will download all the needed libraries for the app\n   - After running `npm install`, if the `node_modules` folder has not been added, then run this command `npm install bootstrap firebase just-clone reactstrap react-router-dom react react-dom`\n4. Once the command has finished and the `node_modules` folder has been added to the directory, run `npm start` to start the app\n5. Visit `http://localhost:3000/` to see the app\n\n## Screens\n### Login Screen\n- The login screen is the screen that greets the user when the app is first started\n- The purpose of this screen is to collect the name, company, form title, and time/date from the user\n- The main component that controls this screen is `\u003cMetaDataGenerator /\u003e`\n\nThe code for this screen can be found in `src/JsonGenerator/MetaDataGenerator.js`\n### Select Screen\n- The purpose of this screen is to display all the forms currently in the database, as well as provide a option to create a new form\n- The main component for this screen is `\u003cFormSelectionScreen /\u003e`\n\nThe code for this screen can be found in `src/FormSelectScreen/FormSelection.js`\n### Create Screen\n- The purpose of this screen is to diaplay the form builder application\n- When the user finishes the form and submits it, the form is then sent to the firebase DB\n- The main components for this screen are `\u003cPayloadGenerator /\u003e`, `\u003cUiGenerator /\u003e`, and `\u003cFormItemLayout /\u003e`\n\nThe code for this screen can be found in `src/JsonGenerator/PayloadGeneratorClass.js`, `src/UiGenerator/UiGenerator.js` and `src/FormItemLayouts/FormItemLayout.js`\n\n## Components\n- `\u003cMetaDataGenerator /\u003e`\n- `\u003cFormSelectionScreen /\u003e`\n- `\u003cPayloadGenerator /\u003e`\n- `\u003cUiGenerator /\u003e`\n- `\u003cFormItemLayout /\u003e`\n\n## Libraries and their uses\n### Reactstrap\n- Reactstrap is the UI library I chose to use becasue it's based off of bootstrap and becasue a lot of the components from the library can be used in this project\n- Read more about this library [here](https://reactstrap.github.io/)\n### Firebase\n- The database used for this app is the firebase firestore database\n- The code for the initialization can be found in `src/Firebase/firestoreinit.js`\n- Read more about Firestore [here](https://firebase.google.com/docs/firestore)\n- By the time someone other than me is going to help develop this app, you must create your own Firebase Firestore database\n- Replace my initalization code with your new code in `src/Firebase/firestoreinit.js`\n- Read more about the Firebase JS SDK [here](https://www.npmjs.com/package/firebase)\n### Just-Clone\n- This library is used to deep copy complex data structures simply\n- A lot of the important data stored as state in the app are complex objects\n- Since it is bad practice to modify state directly, I use this library to make a copy of the complex state object, and then I modify the compy. Once I've finished modifying the copy, I replace the previous state with the modified copy\n```javascript\n// EX: In the updateFormTitle method in App.js\n  updateFormTitle = (value) =\u003e {\n    let updated = clone(this.state.formMetaData) // create a copy of the state object\n    updated.FormTitle = value // modify that copy\n    this.setState({ formMetaData: updated }) // replace old state with modified state\n  }\n```\n- Read more about Just-Clone [here](https://www.npmjs.com/package/just-clone)\n### React Router\n- React router is used to transition from one screen to another\n- This library also allows us to have cleaner code in our components becasue we dont have to worry about conditionally rendering the other components\n- Read more about React Router [here](https://reactrouter.com/web/guides/quick-start)\n\n## TODO\n- [ ] Add MapBox and map functionalities\n  - good [link](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/)\n- [ ] Add an Edit screen where user can select a form in the DB and then view + edit that form \n- [ ] Add validation to important sections where user input is required\n- [ ] Fix UI of the create screen to look like the figma \n- [ ] Add a FieldNav Navbar\n- [ ] Figure out a better flow for the screen (specifically the redirect from the create screen to the login screen)\n  - the login screen is where the user's company, name, and date are saved when using the form\n  - Therefore, if we redirected from the create screen to the form selection screen, the user's name, company, and date would be blank\n  - Solution: the user's name, company, and date should be set when a form is created (like the title of the form)\n- [ ] Add a version control system \n\n## Installing from Docker\n1. Make sure that you have docker desktop installed\n2. Open Docker Desktop\n3. Open a terminal or command line and type this command `docker pull zbeucler/fieldnav-form-builder:amd64` (use `docker pull zbeucler/fieldnav-form-builder:latest` if you are on an M1 mac)\n4. Once that has finished, run `docker images` to see if the `zbeucler/fieldnav-form-builder` has downloaded \n5. If it has downloaded, then move to the `Running on your local machine` section\n\n## Running on your local machine with Docker Desktop\n1. Open Docker Desktop, go to `Images`\n2. Under your `Local` images, find the `zbeucler/fieldnav-form-builder` image\n3. hover over that image and press run\n4. In the run popup, open the `Optional Settings` drop down\n5. Under `Container Name` enter `form-builder`\n6. Then, under `Ports` find the `Local Host` section and enter `3000`\n7. Everything else if fine blank\n8. Press `Run`\n9. After running the container, go to your browser and go to `http://localhost:3000/` to see the form builder\n\n## Running on your local machine with Docker CLI\n1. Open your terminal\n2. Enter `docker images` to check if the correct `zbeucler/fieldnav-form-builder` container is installed\n3. If the container is installed, enter this command `docker run -i -p 3000:3000 --name formbuilder -d zbeucler/fieldnav-form-builder`\n4. Then, visit `http://localhost:3000/` in your browser to see the form builder\n\n## Stopping the docker container\n1. To stop the container, go back to Docker Desktop\n2. Then go to `Containers / Images`\n3. Then find the `form-builder` image\n4. Hover over that container and press the square to stop the container\n\n## Links / Resources\n- [Great docker tutorial](https://www.youtube.com/watch?v=iqqDU2crIEQ)\n- [Dockerhub Repo](https://hub.docker.com/repository/docker/zbeucler/fieldnav-form-builder/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzbeucler2018%2Ffieldnavformbuilder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzbeucler2018%2Ffieldnavformbuilder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzbeucler2018%2Ffieldnavformbuilder/lists"}