{"id":13780410,"url":"https://github.com/tataraba/musicbinder","last_synced_at":"2025-05-11T13:32:11.615Z","repository":{"id":175659437,"uuid":"624243222","full_name":"tataraba/musicbinder","owner":"tataraba","description":"Kind of like a CD Binder...","archived":false,"fork":false,"pushed_at":"2024-06-26T07:04:58.000Z","size":1943,"stargazers_count":100,"open_issues_count":6,"forks_count":16,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-03T18:15:06.101Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","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/tataraba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2023-04-06T03:36:44.000Z","updated_at":"2024-07-27T14:26:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"36ca4795-6337-4095-9d2b-17300477838d","html_url":"https://github.com/tataraba/musicbinder","commit_stats":null,"previous_names":["tataraba/musicbinder"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tataraba%2Fmusicbinder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tataraba%2Fmusicbinder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tataraba%2Fmusicbinder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tataraba%2Fmusicbinder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tataraba","download_url":"https://codeload.github.com/tataraba/musicbinder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225056816,"owners_count":17414215,"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":[],"created_at":"2024-08-03T18:01:15.425Z","updated_at":"2024-11-17T15:31:11.276Z","avatar_url":"https://github.com/tataraba.png","language":"HTML","funding_links":[],"categories":["others","Third Party Packages 📦 \u003ca name = \"tools\"\u003e\u003c/a\u003e"],"sub_categories":["Demos"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/tataraba/musicbinder\" rel=\"nofollow\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/tataraba/musicbinder/7f112db92dca43cf2dc808a487e7425c40c436b2/app/static/img/mb-logo-two-tone.svg\" alt=\"Music Binder\" style=\"max-width: 100%;\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eCreated With a Python-backed Frontend!\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e Music Binder is a demo project showcasing what you can do with a Python-backed frontend, featuring htmx and TailwindCSS.\n    \u003cbr\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [🧐 About ](#-about-)\n- [🏁 Getting Started ](#-getting-started-)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n    - [Codespaces:](#codespaces)\n    - [Locally](#locally)\n- [🔧 Run pytest ](#-run-pytest-)\n- [🎈 Guide ](#-guide-)\n- [💪 Advanced ](#-advanced-)\n- [⛏️ Built Using ](#️-built-using-)\n- [✍️ Author ](#️-author-)\n- [🎉 Acknowledgements ](#-acknowledgements-)\n\n## 🧐 About \u003ca name = \"about\"\u003e\u003c/a\u003e\n\nYou can build a beautiful web application using nothing more than Python, htmx, and TailwindCSS. Create dynamic pages using the power of Jinja templates and server-side rendering to create a Hypertext driven application.\n\n## 🏁 Getting Started \u003ca name = \"getting_started\"\u003e\u003c/a\u003e\n\nThis repository was prepared for a [PyCon tutorial](https://youtu.be/YUoflPpVLjQ) on how to create a python-backed frontend, featuring Jinja templates for HTML rendering, TailwindCSS for style, and htmx for pizzazz! 😎\n\nThe [tutorial](https://us.pycon.org/2023/schedule/presentation/151/) was conducted on Wednesday, April 19th, 2023 from 9 - 12:30pm (Mountain Time).\n\n\n### Prerequisites\n\nThe example app was created with **Python 3.11**, but it is likely compatible with earlier versions. However, I would highly recommend using the latest version of Python. The rest of the dependencies are listed in the `requirements.txt` file.\n\n```\nfastapi[all]\njinja2\njinja2-fragments\npytailwindcss\npytest\npython-multipart\ntinydb\n```\n\n\u003e **Note**\n\u003e The `fastapi[all]` dependency installs some other optional dependencies and features. It also includes `uvicorn`, which is used as the server to run your code. (You could choose to just use `fastapi` and `uvicorn[standard]` separately, if you prefer.)\n\n### Installation\n\nThere are two methods to get started. The first and recommended method is using Codespaces. The second, more traditional route is to clone/copy the repo and install locally.\n\nEither way, make sure you are in the `main` branch and locate this button above:\n\n![help](https://raw.githubusercontent.com/tataraba/musicbinder/main/app/static/img/gh/use-this-template.png)\n\n#### Codespaces:\n\nPress the `Use this template` button above and select `Open in a codespace`. This will open a new window in your browser, where you can run the code in a dedicated, containerized environment in the cloud.\n\n\u003e **Tip:**\n\u003e If you don't know what that means, don't worry! It just means that you can run this codebase without having to install anything on your computer, all through your browser!\n\nThe first time you open the Codespace, the build might take a couple of minutes, but this only happens the first time.\n\n\u003e **Note**\n\u003e You can alternatively start up a Codespace by clicking on the `\u003c\u003e Code` button next to the `Use this template` button. This gives you access to git history, as well as giving you the option to copy all branches to your Codespace.\n\n#### Locally\n\nCreate a copy of the repo using the `Use this template` button above. Select `Create a new repository`.\n\n\u003e **Note**\n\u003e You may want to **`Include all branches`** when cloning the repo to view some advanced features.\n\nAfter cloning or using this template, you will need to create a virtual environment. Navigate to the location where you have cloned the project (your project root) and run the following command in your terminal:\n\n```\npython -m venv .venv\n```\n\nThis will create a `.venv` directory within your project.\n\nNext, activate your environment:\n\n```\n# On Windows\n.\\.venv\\Scripts\\activate\n\n# On MacOS/Linux\n$ source .venv/bin/activate\n```\n\nThen, install the requirements:\n\n```\npython -m pip install -r requirements.txt\n```\n\n\u003e **Warning**\n\u003e Make sure you are only using **one** of the above options to get started. If you use Codespaces, you will NOT need to install any dependencies, nor need to \"activate\" your environment when using the in-browser terminal.\n\nAs a recap... To get started, use ONE of the methods listed below:\n\n| 🥇 Method 1: Codespaces (recommended) | 🥈 Method 2: Locally |\n| --- | --- |\n| Click on \"Use this template\" | Check for latest Python version\n| Select \"Open in a codespace\" | Clone repo or use template\n| Wait for the build | Navigate to project root in terminal\n| Start Coding | Create virtual environment\n| ... | Activate virtual environment\n| ... | Install from requirements.txt\n| ... | Run `tailwindcss init`\n\n\u003e **Tip:**\n\u003e If you use VSCode, you can transfer the browser session of Codespaces to your Desktop application, which allows you to use your own extensions and settings.\n\n## 🔧 Run pytest \u003ca name = \"run_pytest\"\u003e\u003c/a\u003e\n\nAfter activating your virtual environment, you can run tests by typing `pytest` on the command line. This makes sure that your application is able to generate the index page.\n\n```\npytest\n```\n\n\u003e **Note**\n\u003e The application does not include comprehensive testing (yet). As of now, if the tests pass, it means that the application runs and generates a response.\n\n\n## 🎈 Guide \u003ca name=\"guide\"\u003e\u003c/a\u003e\n\nIf you would like to learn how to build a site like this from the ground up, consider following the instructions over on the [Simple Site repository](https://github.com/tataraba/simplesite).\n\nThe repo includes [documentation](https://github.com/tataraba/simplesite/blob/main/docs/00_Preface.md) on how to get started from scratch, with more information on some of the libraries used in this application, including FastAPI, Jinja2, pytailwindcss, and htmx.\n\n## 💪 Advanced \u003ca name=\"advanced\"\u003e\u003c/a\u003e\n\nThe `advanced-features` branch showcases a few features of TailwindCSS and htmx. If you're learning how to use either of the tools, try to tackle them yourself before looking at the branch for solutions. Some of this will be covered in the workshop.\n\n## ⛏️ Built Using \u003ca name = \"built_using\"\u003e\u003c/a\u003e\n\n- [FastAPI](https://fastapi.tiangolo.com)\n- [Jinja2](https://jinja.palletsprojects.com/en/3.1.x/)\n- [TailwindCSS](https://tailwindcss.com/docs/installation)\n- [TinyDB](https://tinydb.readthedocs.io/en/latest/)\n- [htmx](https://htmx.org)\n\n## ✍️ Author \u003ca name = \"author\"\u003e\u003c/a\u003e\n\n- [@tataraba](https://github.com/tataraba) - Mario Munoz, _Python By Night_\n\n## 🎉 Acknowledgements \u003ca name = \"acknowledgement\"\u003e\u003c/a\u003e\n\n- [@kjaymiller](https://github.com/kjaymiller) - Jay Miller, _Senior Cloud Advocate-Python_, Microsoft\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftataraba%2Fmusicbinder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftataraba%2Fmusicbinder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftataraba%2Fmusicbinder/lists"}