Fundee

A Progressive Web App for creating and sharing illustrated children's stories with recorded voice narration — built with PHP and MySQL.

---

Overview

Fundee lets users create their own picture stories — give the story a name, pick a category, add images page by page, and record voice narration through the microphone — then read them back in a full-page viewer. It includes user accounts, story categories, a "My Story" area, and a complete admin panel for moderating content.

The app is installable as a PWA (web app manifest + home-screen icons) and is styled for mobile use.

Features

• Story creation — multi-page stories with a title, category, and per-page images (create_story.php, create_page.php, create_page_detail.php)
• Voice narration — record and attach audio per story/page using the microphone (create_mic.php, powered by p5.sound)
• Reading view — full-page story reader (full_page.php) and "My Story" library (mystory.php)
• Categories & home feed — browse stories by category (category.php, home.php)
• User accounts — register, login, logout, password recovery (login.php, forgetPass.php, logout.php)
• Admin panel — approve submitted stories, manage stories/pages, categories, and news (11 admin_*.php pages)
• PWA support — manifest.json with installable icons

Tech stack

• Backend: PHP (procedural) + MySQL
• Frontend: Bootstrap 3, jQuery, Font Awesome
• Audio: p5.js / p5.sound for recording and playback
• PWA: web app manifest

Project structure

fundee/
├── index.php                 # splash → redirects to login
├── login.php / logout.php / forgetPass.php
├── home.php / category.php / mystory.php / full_page.php
├── create_story.php / create_page.php / create_page_detail.php / create_mic.php
├── admin*.php                # admin panel (approve / manage stories, categories, news)
├── action.php                # form/AJAX action handler
├── include/
│   ├── config.php            # DB connection + global settings
│   └── function.php          # DB helper functions (insert/update/delete/select)
├── js/  (incl. js/p5/)       # jQuery, Bootstrap, p5.js + p5.sound
├── css/  (incl. fonts)       # Bootstrap + custom styles
├── img/ imgStory/ icon/      # images and story assets
├── audio/                    # recorded narration
└── manifest.json             # PWA manifest

Getting started

1. Set up a PHP + MySQL environment (e.g. XAMPP)
2. Create a MySQL database and import the schema, then update the connection settings in include/config.php
3. Serve the folder from your web root and open it in a browser

Security & modernization notes

This is an older project and would need the following before any production or public use:

• Move off the removed mysql_* API — these functions were removed in PHP 7. Migrate to mysqli or PDO with prepared statements.
• Fix SQL injection risk — the generic helpers in function.php concatenate input directly into SQL. Use parameterized queries instead of string building.
• Never commit credentials — include/config.php contains a hard-coded database username/password. Move secrets to an untracked config or environment variables, and commit a sanitized template only.
• Hash passwords — ensure stored passwords use password_hash() / password_verify() rather than plain text.
• Re-enable error reporting in development (error_reporting(0) currently hides all errors) and validate/escape all user input and uploads.
• Update the placeholder description in manifest.json.

Notes

A feature-complete storytelling platform (creation, narration, moderation) that demonstrates a full PHP/MySQL app with a PWA front end. Treat it as a legacy codebase; the notes above outline the path to bring it up to current standards.