Song Board

A simple web application that allows users to view songs and add new songs to the board.

Getting Started

1. Install Bun

Linux and macOS:

curl -fsSL https://bun.sh/install | bash

Windows:

powershell -c "irm bun.sh/install.ps1 | iex"

2. Clone and Setup

git clone https://github.com/cooper-gadd/song-board.git

3. Go to the project directory

cd song-board

4. Install dependencies

bun install

5. Add a .env file

touch .env

6. Add the following to the .env file

DATABASE_URL="file:./db.sqlite"

7. Database Setup

bun run db:push

8. Start Development Server

bun run dev

Rapid prototyping with Bun, SQLite, Next.js

• Bun and Next.js enable easy high fidelity prototyping
• Bun includes native sqlite driver and supports many npm libraries/frameworks
• Next.js builds on React with performance and efficiency features

What is Bun?

• All-in-one high performance JavaScript toolkit
• Includes package manager, bundler, and test kit
• Provides web APIs for quick application scaffolding

Package Manager

• Uses JavaScriptCore Engine from Safari for fast speeds
• Compatible with all npm packages
• Adheres to package.json standard
• Enables easy migration from npm projects

Web and File System APIs

• Simple APIs that reduce boilerplate code
• Handles file reading, writing, and HTTP requests efficiently
• Improves developer experience

Additional Features

• Built-in hot reloading
• Includes bundling tool
• Native sqlite driver support

Starting server application

Reading a file

Writing a file Bun

Reading and Writing Nodejs

Bun Hashing

Starting an sqlite service

Running a C program in JS

What is Next.js?

• Framework building on React
• Improves performance through server-side rendering
• Simplifies routing
• Includes serverless API support

Server Side Rendering

• Serves fully formed HTML pages
• Provides performance benefits
• Creates better user experience
• Enables fast perceived loading times

Benefits over React

• Streamlines routing using a file-based system
• Enables API routes for serverless functionality
• No need for additional backend server
• Includes performance optimizations over React
• Building with Turbopack for faster builds

Todo

• Schema
• Seed data
• Display songs
• Create songs