Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prodo-dev/prodo
Prodo is a React framework to build apps faster.
https://github.com/prodo-dev/prodo
boilerplate mobx prodo react redux state-management web
Last synced: about 2 months ago
JSON representation
Prodo is a React framework to build apps faster.
- Host: GitHub
- URL: https://github.com/prodo-dev/prodo
- Owner: prodo-dev
- License: mit
- Created: 2019-08-20T19:20:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T20:22:43.000Z (almost 2 years ago)
- Last Synced: 2024-05-17T10:03:01.969Z (7 months ago)
- Topics: boilerplate, mobx, prodo, react, redux, state-management, web
- Language: TypeScript
- Homepage: https://docs.prodo.dev
- Size: 6.33 MB
- Stars: 115
- Watchers: 8
- Forks: 6
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Prodo
Prodo is a React framework to write performant and scalable web apps with as
little boilerplate as possible. View the
[Documentation](https://docs.prodo.dev). Read more about the motivation behind Prodo on our [blog](https://medium.com/prodo-ai). Join us on [Slack](https://prodo-feedback-slackin.herokuapp.com)!
[](https://circleci.com/gh/prodo-dev/prodo)
[](https://www.npmjs.com/package/@prodo/core)
[](https://prodo-feedback-slackin.herokuapp.com)
## Key benefits
- 🎉 Drastically simplified state management
- ✨ Absolutely minimal boilerplate, especially compared to Redux
- ⚡️ Blazingly fast re-rendering, similar to MobX
- 👯♀️ Handles async actions out of the box
- 🔎 First class support for TypeScript
- ✅ Easily testable
- 🚀 Less to learn and shorter ramp up time
- 💪 Powerful plugins for routing, local storage, authentication, database, and more...
## Show me the code
Define your model:
```tsx
// src/model.ts
import { createModel } from "@prodo/core";
interface State {
count: number;
}
export const model = createModel();
export const { state, watch, dispatch } = model.ctx;
```
Use your state:
```tsx
// src/index.tsx
import { model, state, dispatch, watch } from "./model";
const changeCount = (amount: number) => {
state.count += amount;
};
const App = () => (
dispatch(changeCount)(-1)}>-
Count: {watch(state.count)}
dispatch(changeCount)(1)}>+
);
const { Provider } = model.createStore({
initState: {
count: 0,
},
});
ReactDOM.render(
,
document.getElementById("root"),
);
```
As you can see in the above example, the state type was used once and
everything else is automatically inferred.
## Examples
There are some examples on [CodeSandbox](https://codesandbox.io/) that you can
view and edit.
- [Counter](https://codesandbox.io/s/prodo-counter-ts-9n7tx?fontsize=14&module=%2Fsrc%2FApp.tsx)
- [TodoMVC](https://codesandbox.io/s/prodo-todomvc-wf4nv?fontsize=14&module=%2Fsrc%2Fmodel.ts)
- [Github PR List](https://codesandbox.io/embed/github-pr-list-noxhw?fontsize=14&module=%2Fsrc%2Fmodel.ts)
There are also many example apps that use Prodo in `examples/`. We recommend
looking at.
- Small to-do app example: [`examples/todo-app`](/examples/todo-app)
- Larger kanban app example: [`examples/kanban`](/examples/kanban)
### Running an example
Navigate to the example directory. For example:
```shell
cd examples/todo-app
```
Install dependencies
```shell
yarn
```
Run development server
```shell
yarn start
```
Navigate to [localhost:8080](http://localhost:8080).
Some examples have tests. You can run the tests with
```shell
yarn test
```
## How to help?
- Help us gauge interest by [starring](https://github.com/prodo-ai/prodo#) this
repository if you like what you see!
- Give feedback by opening an [issue](https://github.com/prodo-ai/prodo/issues/new).
- Contribute code by opening a [PR](https://github.com/prodo-ai/prodo/pulls). See
[CONTRIBUTING](./CONTRIBUTING.md) for information on how to contribute code to
the project.
## Where to go next?
- [Join the private beta!](https://prodo.dev)
- [Documentation](https://docs.prodo.dev)