With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js. Learn more →
Console Alternatives
Similar projects and alternatives to console
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
orval
orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 🍺
-
meetup-contacts-app-2021
Modern, structured React application demo with pages, services. An Opinionated React App template for large projects.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
console reviews and mentions
-
Oxide Cloud Computer. No Cables. No Assembly. Just Cloud
>https://console-preview.oxide.computer/
That's pretty cool! The design language is a nice touch for sure.
-
Storybook 8
I've used Storybook during development for a while now and the use case you present is how the Storybook is pitched. I actually agree about the simplicity of discovering the components. What I disagree with, though, is that I can't see value of "develop & test your UI independently from your app" part. It forces me to decouple the state from a component and this in turn adds unnecessary complexity to the architecture.
I'm going to use Oxide console [1] as an example because it has a really good setup of MSW + OpenAPI autogenerated mocks (which means that it doesn't need any complete backend, just a defined contract).
Consider this fairly simple page [2]. If I'm using the Storybook pattern, I'm keeping all of the state outside of the component, which means I now have to manually memoize every single variable defined before the return to make sure that the component doesn't do any unnecessary re-renders. This includes `intervalPicker`, `commonProps`, `setFilterId`, every return of `useDateTimeRangePicker`. With MSW I have benefits not needing the API, testing in real production app, using the same exact mocks for unit tests and development.
[1]: https://github.com/oxidecomputer/console
[2]: https://github.com/oxidecomputer/console/blob/main/app/pages...
- Tailwind CSS v4.0.0 Alpha
-
Remix Vite Is Now Stable
SPA mode (what I assume you mean by BFF mode) is brand new, so almost nobody has used it. However, a close example would be the Oxide web console, which we build as an SPA because we want to serve it as static assets from a Rust backend. It's very close to your suggested stack: React + React Router + Tanstack query + zustand, though importantly we also use React Router's loaders to give the app a better-than-SPA feel on navigations. I do plan on moving it to Remix SPA mode when I get a chance, but like I said the result should be very similar so it's not that high a priority for me. If I were starting from scratch I'd probably use Remix SPA.
Repo: https://github.com/oxidecomputer/console/
Live demo here with in-browser MSW mock API: https://oxide-console-preview.vercel.app
-
Oxide: The Cloud Computer
VPS providers are nice, but they don't provide the same cloud-level capabilities that Oxide offers. Check out the console to get an idea of what I mean (this is a demo with mock data): https://oxide-console-preview.vercel.app/
-
Mock Service Worker(msw) releases 2.0
Yeah, basically. We do it with a function call where the argument to the function is that interface representing all the API endpoints. `makeHandlers` handles parsing path params, query params, and request body and passes them to each endpoint handler. So the runtime validation of request bodies is also generated — we generate a zod schema for each request body in the OpenAPI definition and use it to parse the actual request body that comes in.
big function call https://github.com/oxidecomputer/console/blob/bd65b9da7019ad...
automatic body parsing and argument passing: https://github.com/oxidecomputer/console/blob/bd65b9da7019ad...
When an endpoint gets added to the spec, we can rerun the generator and get type errors in the `makeHandlers` telling us endpdoints are missing.
-
A note from our sponsor - SurveyJS
surveyjs.io | 28 Apr 2024
Stats
oxidecomputer/console is an open source project licensed under Mozilla Public License 2.0 which is an OSI approved license.
The primary programming language of console is TypeScript.
Sponsored