OpenAPITools / OpenAPITools/openapi-generator
[REQ] Javascript frontend generator (react) basic CRUD scaffold
Nobody has claimed this yet.
- Dominant language
- Java
- Stars
- 26.8k
- Forks
- 7.7k
- PR merge metrics
- PR metrics pending
Description
Is your feature request related to a problem? Please describe.
When Im prototyping a open api spec i can in a easy way generate a backend that i can alter and use in my project.
But about the frontend that normally is the more work intensive, its quite easy from a swagger spec create the client sdk, then why not the frontend with the entities, the crud forms and listing forms?
Done right this feature could be a powerful addition to this project, allowing startups, small projects or prototypes from a API spec generate a easy admin portal, were authentication, create, delete, edit could be managed.
Describe the solution you'd like
A new react option in the client generation that allows from a open api spec, generate a react project, with a client SDK (typescript) and the pages that uses this client sdk to make the CRUD operations for the given entities.
- A entity search page (getAll route with features if exists)
- A entity page with entity data (get by id route)
-
- A delete button if the delete route exists
- A create/edit page (post and put route)
- If a bulk post/put exits consider a export json or csv option
Describe alternatives you've considered
- using existing sdk to generate the sdk, and then create the UI from scratch (using react, vue or angular)
- Using other projects that are not so well tested, or that are very coupled to the backend (jhipster)
Additional context
A UI similar to this one:

Pet Store Example
Considering the example on Pet store openAPI 3.0, the UI should have:
- Pet Base Page

- Pet Edit/Create Form Page

And the same for store
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the existing client-generation options and how generated client SDKs are structured. Define the scope for a React project, TypeScript client SDK, entity listing and detail pages, and create/edit/delete flows from an OpenAPI specification. Done should include a working generated project for the Pet Store example, with the requested CRUD pages and supported operations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, openapi, react, typescript
- Domain
- api, frontend, tooling
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100