{"id":15155248,"url":"https://github.com/chaoyingz/flect","last_synced_at":"2025-09-30T03:30:54.935Z","repository":{"id":216906384,"uuid":"742679299","full_name":"Chaoyingz/flect","owner":"Chaoyingz","description":" A full-stack framework that integrates FastAPI and React.","archived":true,"fork":false,"pushed_at":"2024-03-29T12:52:25.000Z","size":1521,"stargazers_count":137,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-17T13:07:11.331Z","etag":null,"topics":["fastapi","fastui","next","pydantic","react-router","reactjs","shadcn-ui"],"latest_commit_sha":null,"homepage":"https://flect-docs.fly.dev/docs/introduction/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chaoyingz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-13T03:25:52.000Z","updated_at":"2024-12-11T17:05:06.000Z","dependencies_parsed_at":"2024-02-06T16:30:23.089Z","dependency_job_id":"2125b03a-f0e6-4cbe-ad83-6b1db3e213fd","html_url":"https://github.com/Chaoyingz/flect","commit_stats":{"total_commits":242,"total_committers":3,"mean_commits":80.66666666666667,"dds":0.04132231404958675,"last_synced_commit":"57970b59f98e5ce729494e8ce2986b4eecac2138"},"previous_names":["chaoyingz/tui","chaoyingz/flect"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaoyingz%2Fflect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaoyingz%2Fflect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaoyingz%2Fflect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chaoyingz%2Fflect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chaoyingz","download_url":"https://codeload.github.com/Chaoyingz/flect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234695694,"owners_count":18873018,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fastapi","fastui","next","pydantic","react-router","reactjs","shadcn-ui"],"created_at":"2024-09-26T18:03:44.818Z","updated_at":"2025-09-30T03:30:54.520Z","avatar_url":"https://github.com/Chaoyingz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- PROJECT LOGO --\u003e\n\u003cdiv align=\"center\"\u003e\n\n  \u003ch3 align=\"center\"\u003eflect\u003c/h3\u003e\n\n  \u003cp align='center'\u003e\n    \u003cem\u003eTurning ideas into web app fast.\u003c/em\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/Chaoyingz/flect/actions?query=workflow\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://github.com/Chaoyingz/flect/actions/workflows/test.yaml/badge.svg?event=push\u0026branch=main\" alt=\"Test\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://pypi.python.org/pypi/flect\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/pypi/v/flect.svg\" alt=\"pypi\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/Chaoyingz/flect\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/pypi/pyversions/flect.svg\" alt=\"versions\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/Chaoyingz/flect/blob/main/LICENSE\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://img.shields.io/github/license/chaoyingz/flect.svg\" alt=\"license\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://flect.celerforge.com/\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/Chaoyingz/flect/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/Chaoyingz/flect/issues\"\u003eRequest Feature\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/Chaoyingz/flect/blob/main/README_CN.md\"\u003e简体中文\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- WHAT IS flect --\u003e\n\n## What is flect?\n\nflect is a Python framework for building full-stack web applications. It constructs user interfaces by utilizing Pydantic\nmodels in the backend that correspond to the properties of React components in the frontend. This integration enables\nquick development of interactive and beautiful UIs using Python.\n\nThe key features are:\n\n- **Fast development**: Write your entire app with Python, seamlessly integrating backend logic and frontend UI.\n- **Easy Form Validation**: Define a single Pydantic model for seamless and consistent form validation across your app, enhancing development speed and reducing potential errors.\n- **Folder-Based Routing**: Easy route management through folder structure.\n- **Client-Side Routing**: Fast, smooth page transitions without reloads.\n- **SEO Friendly**: Supports server-side rendering for better search engine visibility.\n- **Custom Components**: You can conveniently use your own built React components in flect.\n\nYou can also view the [documentation website](https://flect.celerforge.com/docs/introduction/), which is completely built with flect, source code can be found [here](https://github.com/Chaoyingz/flect/tree/main/docs).\n\n## Why use flect?\n\nflect enables developers to harness the combined power of Python and JavaScript ecosystems, facilitating the creation of web applications with efficiency and ease:\n\n\u003e If you're a Python developer — you can build responsive web applications using React without writing a single line of JavaScript, or touching npm.\n\u003e\n\u003e If you're a frontend developer — you can concentrate on building magical components that are truly reusable, no copy-pasting components for each view.\n\u003e\n\u003e For everyone — a true separation of concerns, the backend defines the entire application; while the frontend is free to implement just the user interface.\n\u003e\n\u003e — _From FastUI_\n\n## Example\n\nIn this example, we will demonstrate how to build a simple to-do application using flect. As flect is built on top of [FastAPI](https://fastapi.tiangolo.com/), so you can define your routes using FastAPI’s syntax.\n\nNote: In real-world flect applications, define page routes and post routes in separate files for better organization.\n\nBelow is a simple to-do application.\n\n```python\nimport json\nfrom typing import Optional\n\nfrom fastapi.encoders import jsonable_encoder\nfrom pydantic import BaseModel\nfrom flect import PageResponse, ActionResponse\nfrom flect import components as c\nfrom flect import form as f\nfrom flect.actions import Notify\n\n# Define a model for creating new todo items with a single 'task' field\nclass TodoInCreate(BaseModel):\n    task: str = f.Input(placeholder=\"Enter task...\")\n\n# Define a model for todo items stored in the database, extending the creation model with an 'id' and 'completed' field\nclass TodoInDB(TodoInCreate):\n    id: int\n    completed: Optional[bool] = False\n\n# Initialize a list of todo items\ntodos = [\n    TodoInDB(id=1, task=\"Task 1\", completed=False),\n    TodoInDB(id=2, task=\"Task 2\", completed=True),\n    TodoInDB(id=3, task=\"Task 3\", completed=False),\n]\n\n# Define the page\nasync def page() -\u003e PageResponse:\n    return PageResponse(\n        body=c.Container(\n            # support tailwind css\n            class_name=\"container mx-auto px-32 py-10\",\n            children=[\n                # Add a heading to the page\n                c.Heading(\n                    level=1,\n                    text=\"Todo App\",\n                    class_name=\"text-3xl mb-10\",\n                ),\n                # Add a form for creating new todo items\n                c.Form(\n                    model=TodoInCreate,\n                    submit_url=\"/\",\n                    class_name=\"mb-5 border p-5\",\n                ),\n                # Add a table displaying all todo items\n                c.Table(\n                    datasets=todos,\n                    class_name=\"border p-5\",\n                    model=TodoInDB\n                )\n            ]\n        )\n    )\n\n# Define the form handling logic\nasync def post(form: TodoInCreate) -\u003e ActionResponse:\n    todos.append(\n        TodoInDB(\n            id=len(todos) + 1,\n            task=form.task,\n            completed=False,\n        )\n    )\n    # Return a notification with the submitted form values\n    return ActionResponse(\n        action=Notify(\n            title=\"You submitted the following values:\",\n            description=json.dumps(jsonable_encoder(form), indent=2),\n        )\n    )\n```\n\nWhich renders like this:\n![flect-todo](https://github.com/Chaoyingz/flect/assets/32626585/f48415d8-b25c-432d-8dc4-d0bd4d65777d)\n\n## Learn More\n\n- [Documentation](https://flect.celerforge.com/)\n\n## Credits\n\nThis project draws inspiration from the following frameworks:\n\n- [FastUI](https://github.com/pydantic/FastUI)\n- [Next.js](https://nextjs.org/)\n\n## License\n\nThis project is licensed under the terms of the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaoyingz%2Fflect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchaoyingz%2Fflect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchaoyingz%2Fflect/lists"}