The Bookshelf

This is the source code for a virtual library of all the books you want to keep tabs on, those sneaky buggers tend to run off in search of adventure.

You can visit the live application here.

This project’s origin is as the demo for Meks’ talk "The Bookshelf: Engage Your Users with LiveView and Tailwind CSS", presented at ElixirConf EU, 2024.

Contact

Meks McClure (they/them)

• LinkedIn
• email

Presentation

• The Bookshelf - Slide Deck.pdf

Presentation & Demo Resources

• Tailwind CSS - Utility first
• TW Elements Utility first approach
• Switching to utility first
• Preflight
• Modifiers
• Adding Additional Colors
• Google Fonts
• How to use custom fonts Tailwind CSS
• Hero Icons
• Tailwind Gradients
• Radial Gradients
• Tailwind Play for Marci’s Status Pill
• Phoenix.LiveView.JS push/1
• Tailwind Plugins Adding Variants

Further Reading and Resources

• Pragmatic Programmers: Modern CSS with Tailwind, Second Edition
• Tailwind Play
• Complete Guide to CSS Flex and Grid!
• Level Up with Tailwind CSS

Development

To start your Phoenix server:

• Run mix setup to install and setup dependencies
• Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.