{"id":13516455,"url":"https://github.com/amanjagdev/react-builder","last_synced_at":"2025-03-31T06:31:09.490Z","repository":{"id":39077420,"uuid":"275728902","full_name":"amanjagdev/react-builder","owner":"amanjagdev","description":"⚙ A GUI tool to build your react app in the fastest way with all components and pages with routing.","archived":false,"fork":false,"pushed_at":"2023-01-05T21:55:37.000Z","size":4724,"stargazers_count":141,"open_issues_count":18,"forks_count":40,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-01T21:33:44.714Z","etag":null,"topics":["context-api","developer-tools","development-tools","hacktoberfest","react","react-hooks","react-router","reactjs"],"latest_commit_sha":null,"homepage":"https://react-builder.now.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amanjagdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"COPYING.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-29T04:20:17.000Z","updated_at":"2024-10-10T05:50:07.000Z","dependencies_parsed_at":"2023-02-04T19:02:36.750Z","dependency_job_id":null,"html_url":"https://github.com/amanjagdev/react-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanjagdev%2Freact-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanjagdev%2Freact-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanjagdev%2Freact-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amanjagdev%2Freact-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amanjagdev","download_url":"https://codeload.github.com/amanjagdev/react-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246429459,"owners_count":20775805,"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":["context-api","developer-tools","development-tools","hacktoberfest","react","react-hooks","react-router","reactjs"],"created_at":"2024-08-01T05:01:22.407Z","updated_at":"2025-03-31T06:31:04.464Z","avatar_url":"https://github.com/amanjagdev.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![GitHub contributors](https://img.shields.io/github/contributors/amanjagdev/react-builder.svg)](https://github.com/amanjagdev/react-builder/graphs/contributors/)\n[![GitHub Stars](https://img.shields.io/github/stars/amanjagdev/react-builder.svg?style=social\u0026logo=github)](https://github.com/amanjagdev/react-builder/stargazers/)\n[![GitHub contributors](https://img.shields.io/github/forks/amanjagdev/react-builder.svg?style=social\u0026logo=github)](https://github.com/amanjagdev/react-builder/network/members/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![GPLv3 license](https://img.shields.io/badge/License-GPLv3-blue.svg)](http://perso.crans.org/besson/LICENSE.html)\n\u003c!-- [![Open Source? Yes!](https://badgen.net/badge/Open%20Source%20%3F/Yes%21/blue?icon=github)](https://github.com/amanjagdev/react-builder/badges/) --\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/amanjagdev/react-builder\"\u003e\n    \u003cimg src=\"src/assets/logo.png\" alt=\"Logo\" width=\"200\" height=\"200\"\u003e\n  \u003c/a\u003e\n\n   \u003ch1 align=\"center\"\u003eReact Builder \u003c/h1\u003e\n    \u003cdiv align=\"center\"\u003e\n  \u003ch4 \u003e\n    Build your react apps faster \n  \u003c/h4\u003e\n  \u003cp\u003eMake your react app with components and pages customized to your needs with routing and navigation with desired dependencies already done for you. Everything within a click's reach.\u003c/p\u003e\n    .\n    \u003ca href=\"https://github.com/amanjagdev/react-builder/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/amanjagdev/react-builder/issues\"\u003eRequest Feature\u003c/a\u003e\n    \u003c/div\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [About The Project](#about-the-project)\n  - [What it does for you?](#what-it-does-for-you)\n  - [Built With](#built-with)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Usage](#usage)\n      - [Step 1 |  Choose your preferences](#step-1--choose-your-preferences)\n      - [Step 2 | Choose Dependencies to add](#step-2--choose-dependencies-to-add)\n      - [Step 3 | Add Components and Pages](#step-3--add-components-and-pages)\n      - [Step 4 | Add routing](#step-4--add-routing)\n      - [Step 5 | Build your App](#step-5--build-your-app)\n      - [Final Result](#final-result)\n- [Roadmap](#roadmap)\n- [Contributing](#contributing)\n- [Contact](#contact)\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\n\u003c!-- [![Product Name Screen Shot][product-screenshot]](https://example.com) --\u003e\n\n\u003cp align =\"center\"\u003e\n\n\u003cimg src = \"screenshots/main.png\"  \u003e\n\nAn application to help you build your react apps faster. Make your react app with components and pages customized to your needs with routing and navigation with desired dependencies already done for you. Everything within a click's reach.\n\n### What it does for you?\n\n- Create Functional or Class based components with state integrated or optional according to you.\n- Create Functional or Class based pages with state integrated or optional according to you.\n- Does routing for you and make the corresponding navigation component for it.\n- Add dependencies to your project.\n- All above things with a single click and you are ready to go.\n\n### Built With\n\n\u003cp float =\"right\"\u003e\n\n\u003cimg alt=\"JavaScript\" src=\"https://img.shields.io/badge/-JavaScript-F7DF1E?style=flat-square\u0026logo=javascript\u0026logoColor=black\"\u003e\n\n\u003cimg alt=\"React\" src=\"https://img.shields.io/badge/-React-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=white\" /\u003e\n\n\u003cimg alt=\"Node\" src=\"https://img.shields.io/badge/-Node.js-339933?style=flat-square\u0026logo=node.js\u0026logoColor=white\" /\u003e\n\n\u003c/p\u003e\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\nTo get a local copy up and for running the project locally, follow these simple steps.\n\n### Prerequisites\n\nHave Node along with a package manager installed in the system.\n\n### Installation\n\n1. Clone the repo and enter it\n\n```sh\ngit clone https://github.com/amanjagdev/react-builder.git\ncd react-builder \n```\n\n3. Install packages\n\n```sh\nyarn | npm install\n```\n\n4. Run the development server\n\n```sh\nyarn start | npm start\n```\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Usage\n\n##### Step 1 |  Choose your preferences\n\nHere you can select your preferred starter environment currently it only supports `create-react-app`.\nMoreover, you can choose between yarn or npm/npx. And you can give the name to your project.\n\n\u003cp align =\"center\"\u003e\n\n\u003cimg src = \"screenshots/1.png\" \u003e\n\n##### Step 2 | Choose Dependencies to add\n\nYou can directly mention packages you want to add in the app.\nEx: We have `react-router-dom axios` etc..\n\n\u003cp align =\"center\"\u003e\n\n\u003cimg src = \"screenshots/2.png\" \u003e\n\n##### Step 3 | Add Components and Pages\n\nHere you can add all the component Names with their type, and you can select whether a component is a page or not.\n\n_Note: Routing will only be done between components marked as pages_\n\n\u003cp align =\"center\"\u003e\n\n\u003cimg src = \"screenshots/3.png\" \u003e\n\n##### Step 4 | Add routing\n\nYou can enable routing in your app from here. And you can select which component to use as Navigation Component or you can say Navigation Bar.\n\nNOTE : _Don't remove `react-router-dom` dependency if you enable routing_\n\n\u003cp align =\"center\"\u003e\n\n\u003cimg src = \"screenshots/4.png\" \u003e\n\n##### Step 5 | Build your App\n\nOnce you click on **Create App** It will download a js file and will give you a script\n\nYou would need to place that js file in the folder you want to create the react app and run the script there.\n\n\u003cp align =\"center\"\u003e\n\n\u003cimg src = \"screenshots/5.png\" \u003e\n\n##### Final Result\n\nYou have successfully created your react app with desired preferences.\n\nThe folder structure generated with App.js on following the above steps looks like this.\n\n\u003cp align =\"center\"\u003e\n\n\u003cimg src = \"screenshots/6.png\" \u003e\n\n\u003c!-- ROADMAP --\u003e\n\n## Roadmap\n\nSee the [open issues](https://github.com/amanjagdev/react-builder/issues) for a list of proposed features (and known issues).\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003c!-- CONTACT --\u003e\n\n## Contact\n\n\u003c!-- \u003cNames\u003e --\u003e\n\nAman Jagdev - [GitHub](https://github.com/amanjagdev) - amankumarjagdev@gmail.com\n\n\u003cp align = \"center\" \u003eMade with :heart: for :earth_asia: Everyone \u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famanjagdev%2Freact-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famanjagdev%2Freact-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famanjagdev%2Freact-builder/lists"}