/generate-react-app-from-swagger

How to generate a full-featured React app from a restful Swagger API definition (including routing, mock and real api, mock data, validation, auth, internationalization, and an optional Redux layer)

MIT LicenseMIT

Generate a React app from Swagger

How to generate a full-featured React app from a restful Swagger API definition (including routing, mock and real api, mock data, validation, auth, internationalization, and an optional Redux layer)

(Work in progress, soon will be adding the tutorial content and the accompanying code)

1. Exploring the example React app we want to generate

2. Exploring the generic backend search/query library to make life easier on us

3. Swagger json structure

4. Exposing validation rules from the backend API

5. Mapping Rest API routes and resources to the React project structure

6. Deciding whether to use or leave out the optional Redux layer

7. Parsing parent/child and lookup relations between Rest API resources (entities)

8. Designing the navigation structure between components for a good UX

9. Designing the React app architecture, main layers & component types, smart (container) & dummy (presentational) components

10. Building common (shared) controls, like sidebar navigation, spinner, grid, form layout manager, breadcrumbs, tabs, cards & inputs

11. Building common utility libraries, like validator & auth manager

12. Generating routes and sidebar navigation React code for all Rest API resources (entities)

13. Generating React code for real and mock api layer for each Rest API resource (entity)

14. Generating mock data json for each Rest API resource (entity)

15. Generating validation React code for each Rest API resource (entity)

16. Generating search page component React code for each Rest API resource (entity)

17. Generating CRUD page component React code for each Rest API resource (entity)

18. Generating panel and list component React code for each nested Rest API resource (entity)

19. Generating cascading lookup React code for each Rest API resource (entity)

20. Generating internationalization resources for each module

21. Changes in the smart (container) components to add the (optional) Redux layer

22. Generating the (optional) Redux layer