amanjagdev / react-builder

⚙ A GUI tool to build your react app in the fastest way with all components and pages with routing.

React Builder

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.

. Report Bug · Request Feature

Table of Contents

• Table of Contents
• About The Project
  • What it does for you?
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage - Step 1 | Choose your preferences - Step 2 | Choose Dependencies to add - Step 3 | Add Components and Pages - Step 4 | Add routing - Step 5 | Build your App - Final Result
• Roadmap
• Contributing
• Contact

About The Project

An 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.

What it does for you?

• Create Functional or Class based components with state integrated or optional according to you.
• Create Functional or Class based pages with state integrated or optional according to you.
• Does routing for you and make the corresponding navigation component for it.
• Add dependencies to your project.
• All above things with a single click and you are ready to go.

Built With

Getting Started

To get a local copy up and for running the project locally, follow these simple steps.

Prerequisites

Have Node along with a package manager installed in the system.

Installation

1. Clone the repo and enter it

git clone https://github.com/amanjagdev/react-builder.git
cd react-builder 

3. Install packages

yarn | npm install

4. Run the development server

yarn start | npm start

Usage

Step 1 | Choose your preferences

Here you can select your preferred starter environment currently it only supports create-react-app. Moreover, you can choose between yarn or npm/npx. And you can give the name to your project.

Step 2 | Choose Dependencies to add

You can directly mention packages you want to add in the app. Ex: We have react-router-dom axios etc..

Step 3 | Add Components and Pages

Here you can add all the component Names with their type, and you can select whether a component is a page or not.

Note: Routing will only be done between components marked as pages

Step 4 | Add routing

You 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.

NOTE : Don't remove react-router-dom dependency if you enable routing

Step 5 | Build your App

Once you click on Create App It will download a js file and will give you a script

You would need to place that js file in the folder you want to create the react app and run the script there.

Final Result

You have successfully created your react app with desired preferences.

The folder structure generated with App.js on following the above steps looks like this.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Aman Jagdev - GitHub - [email protected]

Made with ❤️ for 🌏 Everyone

react-builder's Issues

Adding many components breaks the InfoPane column

When users add several components to their add, the spacing between the elements inside InfoPane starts to increase.
I've attached an example in the below screenshot.

This is undesirable and can be fixed with some minor tweaks to the CSS.

Add number of visitors and users

There should be a small badge that shows how many people have visited the site and how many people are using the service.
It's more like analytics for the site.
Placement of these badges must fit well with the current styling and must not interfere with the current functioning.

"No of visitors" will increase as soon as someone visits the site.
"No of Users" will increase once the user clicks on "Create App" button.

Make It Mobile Responsive

In order to make the web app mobile responsive, the following tasks need to be implemented.

• Only the left panel should be visible on the mobile view.
• If people are on a mobile device, it should show a small card at the bottom which will say "open this website on the desktop to access it".
• The visitor's and users count along with the GitHub buttons should also be visible on the mobile view also.

UI Changes: Making the interface less text-heavy

The interface can use some modifications to make it:
a) Less textual and more intuitive
b) Make it more beginner-friendly, maybe include resources somewhere?

I am willing to work on this right away.

Add GitHub Repo Links to the site

A "Star us on GitHub" and "Fork us on Github" button need to be added in the web application without disturbing the styling and working of the application.
It would help newcomers to contribute to the project by directly staring and forking the repo.

please support vite

vite is much faster and is the new preferred tool to build react. thanks.

Update Readme

In the readme file, the following changes were required:

• Replace the screenshots with an updated version of the site and ensure that the background of the screenshots is transparent so that it works in both light and dark GitHub mode.
• If necessary, update the documentation
• Correct this section of the readme
  

Need a delete button to remove added components

Currently, there's no way for the user to delete an added component.

If the user accidentally adds a component and then wants to remove it, the only way is to reload the app and start again. This is bad in bigger projects because the user will lose all their planning. A delete button beside every component is necessary.

The delete button can be a single SVG icon appended at the end of every component card.

Error in react-router

The application installs the latest version (6.7.0 as of the time of writing) for the react-router-dom npm package. But the code for the routing part consists of Switch, etc., which are now removed from the newer versions of the react-router packages.

Solutions:

1. Either install the 5.2.0 version of the react-router-dom module, which supports the concept of Switch, etc
2. Let the version of the module remain same, but update the code snippet being generated (https://stackoverflow.com/a/69968165)

Implement Dark mode in the web app

Implement dark mode through a toggle switch in a dark mode which switched between light and dark mode
Dark mode settings must persist even after refreshing the page

Replace "images require imports" with modern "ES6 imports"

Replace "images require imports" with modern "ES6 imports", example images used in the project are in the form

<img src={require("../assets/logo.png")} alt="React-Builder-Logo" />

Instead, they should be done like:

import logoImage from "../assets/logo.png"

<img src={logoImage} alt="React-Builder-Logo" />

PS : As i checked the old import statements are no longer working in updated version of react and we need to shift to a newer version of react