Campfire Songbook

Interactive songbook application for campfire events.

It allows creating multiple sessions as a host or join existing ones. The host can choose and select a song which will be updated immediately on a joined user’s screen. App solves most common issues:

• What are the chords for the song?
• What is the lyrics of the song?
• Which song is playing now?
• What songs are available in the songbook?

---

---

Features

• Lightweight and mobile friendly
• Filtering and sorting songs by author or title
• Chord diagrams for guitar and ukulele
• Searching and saving songs from the Internet
• Song lyrics editor
• Play selected song on YouTube
• Share url to current session as guest
• Password protected session as host
• Multilingual support
• Changeable font size
• Built in database with stored songs

Screens

• 

• 

• 

• 

• 

• 

Tech stack

Back-end:

• Java
• Spring Boot, JPA – https://spring.io/projects/spring-boot
• REST – https://restfulapi.net
• Lombok – https://projectlombok.org
• Swagger – https://swagger.io
• JSoup – https://jsoup.org
• H2 database – https://www.h2database.com
• Websockets

Front-end:

• React – https://github.com/facebook/react
• Prime Faces UI – https://github.com/primefaces/primereact
• Axios – https://github.com/axios/axios
• Formik – https://github.com/formium/formik
• React i18next – https://github.com/i18next/react-i18next
• React Stomp – https://github.com/lahsivjar/react-stomp
• React Chords – https://github.com/tombatossals/react-chords
• React Player – https://github.com/cookpete/react-player
• Prettier – https://github.com/prettier/prettier
• Typescript – https://github.com/microsoft/TypeScript

Deployment

Caddy 2 is a powerful, enterprise-ready, open source web server with automatic HTTPS written in Go. It uses Let’s Encrypt certificate and allows easily configure server with one simple file.

Caddyfile:

example.com {
        templates
        encode gzip zstd
        reverse_proxy /api/* localhost:8090
        reverse_proxy /ws/* localhost:8090
        root * /var/www/html
        @notAPI {
                not {
                        path /api/*
                }
                file {
                        try_files {path} {path}/ /index.html
                }
        }
        rewrite @notAPI {http.matchers.file.relative}
        file_server
}