React UI generator

Tier - Advanced

Description

The project idea is to create a framework that will allow users to create React pages/views share them and automatically generate the code. The framework will consist of a browser app and a server. The user will use the app to drag and drop various visual components on the canvas. The app will allow live previews as well as code generation for the designed UI. Subsequently the user can use the automatically generated React code in his or hers project.

Requirements

1. The user car run the app and the server on his or hers PC.
2. The app can be hosted on heroku, AWS or similar services.
3. The app will allow the user to create UIs based on css/javascript components from Material UI, Bootstrap or other frameworks.
4. The user will be able to drag and drop various components like Buttons, Lists, Checkboxes, Flex Grids, etc., on the canvas.
5. The user will be able to arrange the components on the canvas as suited.
6. The user will be able to preview the UI.
7. The user will be able to generate the code and edit it if needed.
8. The user will be able to share the generated pages/views with other users.
9. The app should be able to generate the code for desktop as well as mobile applications.

Similar ideas

1. Structor
2. Webcodesk

URL shortener generator

Tier: Intermediate

The application should have input where an URL address can be added and a button to generate a short URL.

The application can be hosted on Heroku on any free host providers.

This also could be a good practice to prepare for tech interviews as most companies ask about it in their interview process.