Book Arrow

A browser-based study companion built with PHP, MySQL, HTML, CSS, and vanilla JavaScript. Inspired by LifeAt.io, it gives you a single, calm place to focus: a Pomodoro timer, a to-do list, lofi music, a doodle pad, rotating ambient video backgrounds, and motivational phrases pulled from a database.

Originally built for a Web Programming class and polished afterward for public release.

---

Demo

Screenshots

_{Login page}

_{Main dashboard}

  

_{Pomodoro timer  ·  Doodle pad}

---

Features

• Pomodoro timer: 25-minute focus sessions with start / pause / reset. When the session ends the timer flashes a visual cue (no sound, no popup).
• To-do list: tasks persist in localStorage across visits. Click a task to cross it out and delete it.
• Ambient video backgrounds: switch between forest, beach, mountain, and city scenes (YouTube-embedded).
• Lofi music: embedded Apple Music lofi playlist.
• Doodle pad: HTML5 canvas with a color picker.
• Motivational phrases: random quotes fetched from MySQL; click the panel to cycle.
• Session goal: set a daily focus; saved in localStorage.
• Authentication: register / log in / log out with bcrypt-hashed passwords and session management.

---

Tech stack

• Backend: PHP with MySQLi (prepared statements)
• Database: MySQL (works out of the box with MAMP / XAMPP)
• Frontend: HTML5, CSS3 (glass-morphism styling), vanilla JavaScript (no frameworks)
• Server: Apache (via MAMP locally)

---

Local setup

1. Prerequisites

• MAMP (or XAMPP), which provides Apache + MySQL + PHP in one install.
• A browser.

2. Clone into the MAMP webroot

cd /Applications/MAMP/htdocs
git clone https://github.com/NinyaDev/BookArrow-StudyHub.git

The folder name doesn't matter. All asset paths are relative, so you can name it whatever you like.

3. Start MAMP

Open MAMP.app and click Start. Apache and MySQL lights should turn green. Default ports: Apache 8888, MySQL 8889.

4. Create the database

Open phpMyAdmin at http://localhost:8888/MAMP/ → "phpMyAdmin" tab → Import → choose schema.sql from this repo → Go.

That creates studyhub_db with the users and phrases tables and seeds a handful of motivational quotes.

5. Configure the DB connection

Copy the example config and edit if needed:

cp config.example.php config.php

The defaults match MAMP out of the box (root / root). config.php is gitignored so your credentials never get committed.

6. Open the app

http://localhost:8888/BookArrow-StudyHub/ (or whatever you named the folder)

You'll be redirected to the login page. Click "Create new account", register, and you're in.

---

Project structure

.
├── index.php              # Main dashboard (requires login)
├── login.php              # Login form + auth handler
├── register.php           # Signup form + handler
├── logout.php             # Destroys session
├── technologies.php       # Class-project writeup of technologies used
├── config.example.php     # Template for local DB config
├── schema.sql             # Database schema + seed data
├── script.js              # Timer, doodle, to-do, background switcher, goal
├── assets/                # Logos and background images
├── css/                   # Stylesheets (mainPage, logIn, auth, techStyles)
└── screenshots/           # README media

---

Known limitations

• To-do items and the session goal are stored only in localStorage, so they don't sync across devices.
• Background videos are YouTube embeds; availability depends on YouTube being reachable.
• No CSRF protection on forms (the app is intended for local / personal use).

---

Credits

Inspired by LifeAt.io. Music: Lofi Girl - Beats to Relax/Study To (Apple Music).

---

Contact

Adrian Ninanya

• GitHub: NinyaDev
• LinkedIn: Adrian Ninanya
• Project Link: https://github.com/NinyaDev/BookArrow-StudyHub