Modern web app stack

index.md

In all of these sections, I assume you want to use TypeScript as much as possible.

Backend / API

REST (OpenAPI)

https://strapi.io/ (no TS support ATM... see https://medium.com/@alexdevmotion/typescript-for-strapi-lifes-too-short-to-es5-1cc852fbf504)

Frontend friendly package

Restful React : https://github.com/contiamo/restful-react

TS autogenerated client :

• https://github.com/Azure/autorest.typescript
• https://github.com/manifoldco/swagger-to-ts

Generate a typed client / hooks from your OpenAPI introspection

GraphQL

Strapi + GraphQL plugin : https://strapi.io/ with https://strapi.io/documentation/3.0.0-alpha.x/guides/graphql.html

Hasura : https://hasura.io/

Postgraphile : https://www.graphile.org/postgraphile/

Frontend friendly package

GraphQL Code Generator : https://graphql-code-generator.com/docs/getting-started/

Generate a typed graphql client / hooks from your GraphQL API introspection

Database interaction

Prisma 2 : https://github.com/prisma/prisma-client-js

Generate a typed client from your database introspection

Frontend / UI

Framework / Bundler

Next.js : https://nextjs.org/ (SSR, SSG, FS based routing, optional PWA via next-pwa, see https://itnext.io/pwa-with-next-js-create-next-app-in-2020-%EF%B8%8F-9ee0e1a6313d)

Create React App : https://create-react-app.dev/docs/adding-typescript/

Parcel 2 : https://parceljs.org/

Developper tools (DX)

React devtools : https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Components "studio"

Storybook : https://storybook.js.org/

Blocks UI : https://blocks-ui.com/

React cosmos : https://reactcosmos.org/

Build your app in isolation, one component at a time.

Routers

Navi : https://frontarm.com/navi/en/

React-router v6 : https://github.com/ReactTraining/react-router/tree/dev

Support for Suspense and render-as-you-fetch (https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense)

State management

XState : https://xstate.js.org/docs/

Zustand : https://zustand.surge.sh/

Data fetching

React-query : https://github.com/tannerlinsley/react-query

Graphql-tag : https://github.com/apollographql/graphql-tag

For GraphQL, use fragment based approach : https://itnext.io/graphql-fragment-based-approach-to-building-your-components-798647d011a5

Forms

React-final-form : https://final-form.org/react

Formik : https://jaredpalmer.com/formik/docs/overview

Styling

Theme-UI : https://theme-ui.com/

Emotion : https://emotion.sh/docs/css-prop

Classy UI : https://classy-ui.io/ (utility first approach built on top of https://tailwindcss.com/)

CSS prop with theme available in every component via custom pragma

Animation

Framer Motion : https://www.framer.com/api/motion/

React-spring : https://www.react-spring.io/

Design system / UI kit

Material-UI : https://material-ui.com/

Chakra : https://chakra-ui.com/

Reakit : https://reakit.io/

Semantic UI : https://react.semantic-ui.com/

Fabric : https://developer.microsoft.com/en-us/fabric/#/controls/web

Testing

Test runner

Jest : https://jestjs.io/ (with TS : https://kulshekhar.github.io/ts-jest/)

Model-based testing

Xstate : https://xstate.js.org/docs/packages/xstate-test/

Unit / Integration

React-testing-library : https://testing-library.com/docs/react-testing-library/intro with complements such as https://github.com/testing-library/user-event and https://testing-library.com/docs/ecosystem-jest-dom

Functional / E2E

Playwright : https://github.com/microsoft/playwright (with Jest : https://github.com/mmarkelov/jest-playwright)

Codecept : https://codecept.io/playwright/

Cypress : https://www.cypress.io/ (Mocha instead of Jest, rely on JQuery...)