298 lines
14 KiB
HTML
298 lines
14 KiB
HTML
<!--lint disable awesome-badge unordered-list-marker-style trailing-slash awesome-heading awesome-github awesome-toc double-link awesome-list-item no-repeat-punctuation-->
|
||
<div data-align="center">
|
||
<pre><code><img src="https://raw.githubusercontent.com/reflex-dev/awesome-reflex/main/images/dark_logo.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
|
||
<img src="https://raw.githubusercontent.com/reflex-dev/awesome-reflex/main/images/light_logo.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px"></code></pre>
|
||
<p><a href="https://badge.fury.io/py/reflex"><img
|
||
src="https://badge.fury.io/py/reflex.svg" alt="PyPI version" /></a> <img
|
||
src="https://img.shields.io/pypi/pyversions/reflex.svg"
|
||
alt="versions" /> <a
|
||
href="https://reflex.dev/docs/getting-started/introduction"><img
|
||
src="https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6"
|
||
alt="Documentation" /></a> <a href="https://discord.gg/T5WSbC2YtQ"><img
|
||
src="https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord"
|
||
alt="Discord" /></a> <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></p>
|
||
</div>
|
||
<p><a href="https://reflex.dev">Reflex</a> is an open-source framework
|
||
for building full-stack web applications entirely in pure Python. It
|
||
allows developers to create both the frontend and backend of their web
|
||
apps using just one language - Python.</p>
|
||
<p>With Reflex, you can build anything from small data science projects
|
||
to large, multi-page websites without having to write any HTML, CSS, or
|
||
JavaScript.</p>
|
||
<h2 id="contents">📚 Contents</h2>
|
||
<ul>
|
||
<li><a href="#-contents">📚 Contents</a></li>
|
||
<li><a href="#️-example-apps-and-templates">🛠️ Example Apps and
|
||
Templates</a>
|
||
<ul>
|
||
<li><a href="#official-templates">Official Templates</a></li>
|
||
<li><a href="#not-a-long-list-of-apps">Not a long-list of apps</a></li>
|
||
</ul></li>
|
||
<li><a href="#-resources">📖 Resources</a></li>
|
||
<li><a href="#official-resources">Official Resources</a></li>
|
||
<li><a href="#external-resources">External Resources</a>
|
||
<ul>
|
||
<li><a href="#podcasts">Podcasts</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#videos">Videos</a></li>
|
||
<li><a href="#cheatsheets">Cheatsheets</a></li>
|
||
</ul></li>
|
||
<li><a href="#-component-libraries">📦 Component Libraries</a></li>
|
||
<li><a href="#-databases-and-authentication">🔐 Databases and
|
||
Authentication</a></li>
|
||
<li><a href="#-checkoutsocial-media-links">🔗 Checkout/Social media
|
||
links</a></li>
|
||
</ul>
|
||
<h2 id="example-apps-and-templates">🛠️ Example Apps and Templates</h2>
|
||
<p>A repo of complete Reflex examples can be found <a
|
||
href="https://github.com/reflex-dev/reflex-examples">here.</a></p>
|
||
<p>Reflex’s own website was built using Reflex! See <a
|
||
href="https://github.com/reflex-dev/reflex-web">code on GitHub.</a></p>
|
||
<h3 id="official-templates">Official Templates</h3>
|
||
<ul>
|
||
<li><a href="https://blank-template.reflex.run">Blank Template</a> - A
|
||
minimal template.</li>
|
||
<li><a href="https://dashboard-new.reflex.run/">Dashboard App</a> - A
|
||
dashboard with tables and graphs.</li>
|
||
<li><a href="https://sales-new.reflex.run/">Sales Management</a> - An
|
||
app to manage sales and customers.</li>
|
||
<li><a href="https://ai-image-gen.reflex.run/">AI Image Generator</a> -
|
||
An app to generate images using AI.</li>
|
||
<li><a href="https://cijob.reflex.run/">CI Template App</a> - A template
|
||
for continuous integration.</li>
|
||
<li><a href="https://api-admin-panel.reflex.run/">API Admin Panel</a> -
|
||
An admin panel for an API.</li>
|
||
<li><a href="https://nba-new.reflex.run/">NBA Statistics</a> - A data
|
||
visualization app for NBA data.</li>
|
||
<li><a href="https://customer-data-app.reflex.run/">Customer Data
|
||
App</a> - An app to manage customer data.</li>
|
||
</ul>
|
||
<h3 id="not-a-long-list-of-apps">Not a long-list of apps</h3>
|
||
<ul>
|
||
<li><a href="https://translator.reflex.run/">Translator</a> - A
|
||
Translator made in Reflex for everybody.</li>
|
||
<li><a href="https://demo.reflex.run/">Demo</a> - A demo app showcasing
|
||
Reflex’s abilities.</li>
|
||
<li><a href="https://traversal.reflex.run/">Traversal</a> - A Graph
|
||
Traversal App.</li>
|
||
<li><a href="https://quiz.reflex.run/">Quiz</a> - A Python Quiz
|
||
App.</li>
|
||
<li><a href="https://dalle.reflex.run/">Dalle</a> - An image generator
|
||
app.</li>
|
||
</ul>
|
||
<h2 id="resources">📖 Resources</h2>
|
||
<h2 id="official-resources">Official Resources</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://reflex.dev/docs/getting-started/how-reflex-works/">How
|
||
Reflex works</a> - Understand Reflex’s core principles</li>
|
||
<li><a
|
||
href="https://reflex.dev/docs/getting-started/introduction/">Getting
|
||
Started</a> - Begin your Reflex journey</li>
|
||
</ul>
|
||
<h2 id="external-resources">External Resources</h2>
|
||
<h3 id="podcasts">Podcasts</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://talkpython.fm/episodes/show/483/reflex-framework-frontend-backend-pure-python">TalkPython</a>
|
||
- Insights on the framework</li>
|
||
</ul>
|
||
<h3 id="articles">Articles</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://reflex.dev/blog/2024-06-28-using-table-component/">Creating
|
||
Tables</a> - Master dynamic data presentation techniques</li>
|
||
<li><a
|
||
href="https://reflex.dev/blog/2024-04-16-custom-components/">Custom
|
||
Components</a> - Build reusable interface elements expertly</li>
|
||
<li><a
|
||
href="https://reflex.dev/blog/2024-03-27-structuring-a-large-app/">Structuring
|
||
a Large App</a> - Architect scalable web applications effectively</li>
|
||
<li><a
|
||
href="https://reflex.dev/blog/2024-03-21-reflex-architecture/">Designing
|
||
a Pure Python Web Framework</a> - Explore advanced framework
|
||
architecture patterns</li>
|
||
<li><a href="https://reflex.dev/blog/2024-10-11-graphing-update/">New
|
||
Core Graphing Components</a> - Create stunning data visualizations
|
||
easily</li>
|
||
<li><a
|
||
href="https://reflex.dev/blog/2023-09-28-unlocking-new-workflows-with-background-tasks/">Unlocking
|
||
New Workflows with Background Tasks</a> - Optimize asynchronous task
|
||
processing</li>
|
||
</ul>
|
||
<h3 id="tutorials">Tutorials</h3>
|
||
<ul>
|
||
<li><a href="https://neon.tech/docs/guides/reflex">Build a Python App
|
||
with Neon</a> - Create Neon database applications</li>
|
||
<li><a href="https://github.com/joyhchen/reflex-embedded-checkout">Embed
|
||
Checkout in Reflex</a> - Stripe embedded checkout implementation</li>
|
||
<li><a
|
||
href="https://reflex.dev/blog/2023-10-25-implementing-sign-in-with-google/">Implementing
|
||
Sign in with Google</a> - Google sign-in for the scalable apps.</li>
|
||
</ul>
|
||
<h3 id="videos">Videos</h3>
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=ITOZkzjtjUA">Building an AI
|
||
chat app</a> - Create powerful conversational interfaces</li>
|
||
<li><a href="https://youtu.be/jQMsWL0g0jc">Animated Sidebar Menu</a> -
|
||
Master smooth navigation animations</li>
|
||
<li><a href="https://youtu.be/uBx2T7ltQK0">Web App UI</a> - Craft
|
||
beautiful responsive interfaces</li>
|
||
<li><a href="https://youtu.be/j8ZX6bRynZ8">Data Table Automation</a> -
|
||
Streamline complex data displays</li>
|
||
<li><a href="https://youtu.be/FnEXy6we_5k">Login UI</a> - Design secure
|
||
authentication flows</li>
|
||
<li><a href="https://youtu.be/P5rBlAzoxP0">Web Auth Trailer</a> -
|
||
Preview authentication features</li>
|
||
<li><a href="https://youtu.be/Gk6f3COcmYs">Ultimate Full Stack Python
|
||
Web App</a> - Build complete web applications</li>
|
||
<li><a href="https://youtu.be/5lTBC8i4vWM">Fullstack App Masterclass</a>
|
||
- Master modern web development</li>
|
||
<li><a href="https://youtu.be/xOXhir-kMuU">How to make REST API</a> -
|
||
Create robust backend services</li>
|
||
<li><a href="https://youtu.be/lcSKCc7Nuqw">Full Stack App Tutorial</a> -
|
||
Build production-ready applications</li>
|
||
<li><a href="https://youtu.be/3XT-AMLFLK0">Yet Another Full Stack
|
||
App</a> - Explore advanced development patterns</li>
|
||
<li><a href="https://youtu.be/heFUIjrNWYA">Minimal Analog Clock</a> -
|
||
Create elegant time displays</li>
|
||
<li><a href="https://youtu.be/JyY2sZIrGb0">Simple Task Tracker</a> -
|
||
Build productivity applications</li>
|
||
<li><a href="https://youtu.be/mwB_AVPKnxg">Modern Web Apps</a> - Design
|
||
contemporary interfaces</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLDHA4931gtc7wHBDGQOYlmcpZm7qyici7">Full
|
||
Playlist by Line Indent</a> - Complete video tutorial series</li>
|
||
</ul>
|
||
<h3 id="cheatsheets">Cheatsheets</h3>
|
||
<ul>
|
||
<li><a href="https://reflex.dev/docs/api-reference/app/">API
|
||
Reference</a> - An official API reference for making a Reflex app.</li>
|
||
</ul>
|
||
<h2 id="component-libraries">📦 Component Libraries</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://chakra.reflex.run/introduction/"><code>reflex-chakra</code></a>
|
||
- A simple, modular and accessible component library (wrapped).</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-clerk/"><code>reflex-clerk</code></a>
|
||
- Custom Reflex component library for integration with Clerk, a user
|
||
authentication and management platform.</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-color-picker/"><code>reflex-color-picker</code></a>
|
||
- A color picker</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-chat/"><code>reflex-chat</code></a>
|
||
- A chat component</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-local-auth/"><code>reflex-local-auth</code></a>
|
||
- Local authentication</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-nav-menu/"><code>reflex-nav-menu</code></a>
|
||
- A navigation menu component</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-intersection-observer/"><code>reflex-intersection-observer</code></a>
|
||
- Intersection observer</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-echarts/"><code>reflex-echarts</code></a>
|
||
- ECharts integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-google-recaptcha-v2/"><code>reflex-google-recaptcha-v2</code></a>
|
||
- Google reCAPTCHA v2 integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-simpleicons/"><code>reflex-simpleicons</code></a>
|
||
- SimpleIcons integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-image-zoom/"><code>reflex-image-zoom</code></a>
|
||
- Image zoom component</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-webcam/"><code>reflex-webcam</code></a>
|
||
- Webcam integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-motion/"><code>reflex-motion</code></a>
|
||
- Motion animations</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-magic-link-auth/"><code>reflex-magic-link-auth</code></a>
|
||
- Magic link authentication</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-google-auth/"><code>reflex-google-auth</code></a>
|
||
- Google authentication</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-spline/"><code>reflex-spline</code></a>
|
||
- Spline integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-audio-capture/"><code>reflex-audio-capture</code></a>
|
||
- Audio capture component</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-calendar/"><code>reflex-calendar</code></a>
|
||
- Calendar component</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-dynoselect/"><code>reflex-dynoselect</code></a>
|
||
- Dynamic select component</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-simple-password/"><code>reflex-simple-password</code></a>
|
||
- Simple password input</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-antd/"><code>reflex-antd</code></a>
|
||
- Ant Design integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-resizable-panels/"><code>reflex-resizable-panels</code></a>
|
||
- Resizable panels</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-animated-cursor/"><code>reflex-animated-cursor</code></a>
|
||
- Animated cursor component</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-monaco/"><code>reflex-monaco</code></a>
|
||
- Monaco editor integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-qrcode/"><code>reflex-qrcode</code></a>
|
||
- QR code generator</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-lottiefiles/"><code>reflex-lottiefiles</code></a>
|
||
- LottieFiles integration</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-giscus/"><code>reflex-giscus</code></a>
|
||
- A GitHub-powered commenting system for Reflex applications.</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-wordcloud/"><code>reflex-wordcloud</code></a>
|
||
- Word cloud generator</li>
|
||
<li><a
|
||
href="https://pypi.org/project/reflex-ag-grid/"><code>reflex-ag-grid</code></a>
|
||
- AG Grid integration</li>
|
||
</ul>
|
||
<h2 id="databases-and-authentication">🔐 Databases and
|
||
Authentication</h2>
|
||
<ul>
|
||
<li><a href="https://alembic.sqlalchemy.org/en/latest/">Alembic</a> -
|
||
Database migrations made easy</li>
|
||
<li><a href="https://sqlmodel.tiangolo.com/">SQLModel</a> - SQL
|
||
databases with Pydantic</li>
|
||
<li><a href="https://neon.tech">Neon</a> - Serverless Postgres database
|
||
service</li>
|
||
<li><a href="https://clerk.com/">Clerk</a> (<a
|
||
href="https://kroo.github.io/reflex-clerk/">auth library</a>) -
|
||
Authentication and user management</li>
|
||
<li><a
|
||
href="https://youtu.be/JRGyvjjWb00?list=PLDHA4931gtc7wHBDGQOYlmcpZm7qyici7">Firebase</a>
|
||
- Backend services for apps</li>
|
||
</ul>
|
||
<h2 id="checkoutsocial-media-links">🔗 Checkout/Social media links</h2>
|
||
<div data-align="center">
|
||
<pre><code><table>
|
||
<tr>
|
||
<td><a href="https://forum.reflex.dev/"><img src="https://img.shields.io/badge/Forum-Blue?logo=forum" alt="Forum Badge"></a></td>
|
||
<td><a href="https://discord.gg/T5WSbC2YtQ"><img src="https://img.shields.io/badge/Discord-7289DA?logo=discord" alt="Discord Badge"></a></td>
|
||
<td><a href="https://www.linkedin.com/company/reflex-dev/"><img src="https://img.shields.io/badge/LinkedIn-0077B5?logo=linkedin" alt="LinkedIn Badge"></a></td>
|
||
<td><a href="https://twitter.com/getreflex"><img src="https://img.shields.io/badge/X-1DA1F3?logo=X" alt="Twitter Badge"></a></td>
|
||
<td><a href="https://www.ycombinator.com/companies/reflex"><img src="https://img.shields.io/badge/YC-007080?logo=ycombinator" alt="YC Badge"></a></td>
|
||
<td><a href="https://www.youtube.com/@reflex-dev"><img src="https://img.shields.io/badge/YouTube-FF0000?logo=youtube" alt="YouTube Badge"></a></td>
|
||
</tr>
|
||
</table></code></pre>
|
||
</div>
|
||
<p><a href="https://github.com/reflex-dev/awesome-reflex">reflex.md
|
||
Github</a></p>
|