🟡 🥁 Yellow Battery 🥁 🟡

📑 Table of Contents

• 📑 Table of Contents
• 📖 Overview
• 🛠️ Technologies
• ⚡ Performance & PWA
• 🚀 Demo
• 📦 Install and Use
• 📂 File Structure
• 🎨 Reference & Inspiration
• 👨‍💻 Author and Contact

📖 Overview

Yellow Battery is a full-stack web application developed for a fictional music band, combining a promotional website with a custom content management dashboard.

The platform allows administrators to update concert dates and other site information through a dedicated management interface, while visitors can explore band content through a responsive, mobile-first experience.

Built with HTML5, CSS3, JavaScript, PHP, and MySQL, the project demonstrates core concepts of responsive design, database-driven applications, server-side development, and content management workflows.

🛠 Technologies

The following technologies were used to build this project:

• PHP
• MySQL
• HTML5
• CSS3
• Javascript

⚡ Performance & PWA

🚀 Demo

Access the live application below to interact with the interface and run your own performance tests.

Yellow Battery: https://yellow-battery.vercel.app/

Desktop

desktop.webm

Mobile

mobile.webm

📦 Install and Use

Prerequisites: Node.js (v22.x) or higher installed.

1. Clone the repository:

git clone https://github.com/Epiled/yellow-battery.git
cd yellow-battery

2. Install the dependencies:

npm install

3. Run the development environment (Build + Watch + Server):

npm run dev

4. (Optional) Generate minified build for production:

npm run build

📂 File Structure

Below is the project architecture. All development should be done inside the src/ folder. The dist/ folder is automatically generated by Gulp and should not be edited manually.

yellow-battery/
├── design/                  # Wireframes, videos and assets for documentation
├── src/                     # Main source code (Development)
│   ├── assets/              # Original images and icons
│   ├── css/                 # Styles following architecture BEM and Atomic Design principles
│   └──js/                   # UI logic and PWA registration
├── dist/                    # Production build (Generated by Gulp - DO NOT EDIT)
├── index.html               # Base semantic structure and main markup
├── gulpfile.js              # Automation pipeline (Minification and optimization tasks)
└── package.json             # Project dependencies and npm scripts

🎨 Reference & Inspiration

Inspiration

• Lindsey Stirling

👨‍💻 Author and Contact

_{Felipe De Andrade}

Made with ❤️ by Felipe De Andrade 👋🏽 Get in touch!