OpenAPITools / OpenAPITools/openapi-generator

[REQ] Javascript frontend generator (react) basic CRUD scaffold

Open
#8,172 3 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Enhancement: Feature
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

  1. using existing sdk to generate the sdk, and then create the UI from scratch (using react, vue or angular)
  2. 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:

image

Pet Store Example

Considering the example on Pet store openAPI 3.0, the UI should have:

  • Pet Base Page

image

  • Pet Edit/Create Form Page

image

And the same for store

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.