Giter VIP home page Giter VIP logo

musicbinder's Introduction

Music Binder

Created With a Python-backed Frontend!

Music Binder is a demo project showcasing what you can do with a Python-backed frontend, featuring htmx and TailwindCSS.

Table of Contents

๐Ÿง About

You 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.

๐Ÿ Getting Started

This repository was prepared for a PyCon tutorial on how to create a python-backed frontend, featuring Jinja templates for HTML rendering, TailwindCSS for style, and htmx for pizzazz! ๐Ÿ˜Ž

The tutorial was conducted on Wednesday, April 19th, 2023 from 9 - 12:30pm (Mountain Time).

Prerequisites

The 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.

fastapi[all]
jinja2
jinja2-fragments
pytailwindcss
pytest
python-multipart
tinydb

Note 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.)

Installation

There 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.

Either way, make sure you are in the main branch and locate this button above:

help

Codespaces:

Press 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.

Tip: 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!

The first time you open the Codespace, the build might take a couple of minutes, but this only happens the first time.

Note You can alternatively start up a Codespace by clicking on the <> 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.

Locally

Create a copy of the repo using the Use this template button above. Select Create a new repository.

Note You may want to Include all branches when cloning the repo to view some advanced features.

After 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:

python -m venv .venv

This will create a .venv directory within your project.

Next, activate your environment:

# On Windows
.\.venv\Scripts\activate

# On MacOS/Linux
$ source .venv/bin/activate

Then, install the requirements:

python -m pip install -r requirements.txt

Warning 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.

As a recap... To get started, use ONE of the methods listed below:

๐Ÿฅ‡ Method 1: Codespaces (recommended) ๐Ÿฅˆ Method 2: Locally
Click on "Use this template" Check for latest Python version
Select "Open in a codespace" Clone repo or use template
Wait for the build Navigate to project root in terminal
Start Coding Create virtual environment
... Activate virtual environment
... Install from requirements.txt
... Run tailwindcss init

Tip: 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.

๐Ÿ”ง Run pytest

After 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.

pytest

Note 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.

๐ŸŽˆ Guide

If 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.

The repo includes documentation 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.

๐Ÿ’ช Advanced

The 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.

โ›๏ธ Built Using

โœ๏ธ Author

๐ŸŽ‰ Acknowledgements

  • @kjaymiller - Jay Miller, Senior Cloud Advocate-Python, Microsoft

musicbinder's People

Contributors

pokkakiyo avatar tataraba avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

musicbinder's Issues

Add tests

Opening issue to start adding tests.

As of right now, running pytest confirms that app starts up and sends a 200 response, as well as generating a <title> tag.

Cannot load .main file

Hi all,

I cloned the repo locally and executed on VS code from both Windows and Ubuntu, and I got the same result says that "no command uvicore found" first, then I searched solutions and someone suggests using "python -m uvicore app.main:app --reload" instead of "uvicore app.main:app --reload" , after I re-installed uvicore using 'pip install uvicore[standard]', I could run the code by "python -m uvicore app.main:app --reload", however, it says that the main.py file cannot be loaded, as depicted in the following pic

image

I have no idea what's going on? Any thoughts to solve this problem? thx

Create htmx request for the "Randomize" button

Currently, the "Randomize" button on the homepage ("/") merely reloads the endpoint, which generates a new random image.

Change the request to an htmx (hx-get) request which ONLY refreshes the image, instead of the whole page.

Make artist cards toggle

The /catalog endpoint (as well as \search) displays a list of cards with Artist name and active members.

When container is clicked, the containing element changes to display the Artist profile.

Want to see if another htmx event can be included on click that reverts the card back to its original state (Artist name and Members)... as such, functioning mostly as a toggle.

Change navigation link for "About" to use hx-get request

Instead of using an <a href> tag for the "About" link, change it to use an hx-get request instead. By doing this, we can request that only the element within the "content" section changes.

Using the Jinja2Blocks object, we can also choose what {% block ... %} to render from the Jinja template.

Things to remember, since this is no longer an <a href> element, the pointer/cursor will need to be stylized with tailwind to emulate the hover effect on an <a href> link.

Also, will need to use htmx to send the correct endpoint to the url.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.