DHUN

Empowering Creators to Shine Brightly Online

Built with the tools and technologies:

📄 Table of Contents

Overview
UI Preview
Features
Project Structure
- Project Index
Getting Started
Learning Outcomes
Roadmap
Contributors
Acknowledgments
License

✨ Overview

It is a static, multi-page project using HTML, CSS, and JavaScript, with dedicated pages (About, Songs, Sign-Up), shared styles, and a lightweight script for basic interactions and responsiveness.

Why Dhun?

Dhun is an interactive artist site with core features including:

🧩 Responsive Navigation: Mobile-friendly layout and menus for smooth navigation across devices.
🎥 Multimedia Integration: Easy embedding of YouTube videos and images to showcase songs and artist visuals.
📝 User Sign-Up (Front-End Only): A sign-up page/form suitable for newsletters or waitlists.
Note: The repository does not include backend/authentication code.
⚙️ Lightweight UI Interactions: Basic DOM manipulation via a single app.js script.
Note: There is no server or database layer in this repository.
🌟 Multi-Page Structure: Clear IA with About, Songs, and Sign-Up pages.
🎨 Consistent Styling: Centralized CSS (site/Public/style.css) and image assets under site/Public/images/.

🎨 UI Preview

Frontend View	Admin / Dashboard View

📌 Features

	Component	Details
⚙️	Architecture	Static multi-page site (HTML/CSS/JavaScript) Pages: index.html, About, Songs, Sign-Up No server or database code present in the repository
🔩	Code Quality	Single JS entry (site/JavaScript/app.js) Clear separation of HTML / CSS / JS assets Human-readable file and folder naming
📄	Documentation	Project README with overview and structure CONTRIBUTING.md, CODE_OF_CONDUCT.md, SECURITY.md included MIT LICENSE file
🔌	Integrations	Embeds YouTube videos and images for media content HTML forms for user sign-up (client-side only)
🧩	Modularity	Per-page HTML with shared styles (site/Public/style.css) Reusable DOM helpers in a single app.js
🧪	Testing	No automated tests in the repository Manual route/UI validation
⚡️	Performance	Lightweight static assets Client-side DOM updates for responsiveness
🛡️	Security	Client-side input checks No authentication or authorization logic present SECURITY.md outlines reporting policy
📦	Dependencies	Vanilla HTML/CSS/JS (no package manager, no build step) Image assets under /Public/images
⚙️	CI / Templates	GitHub Actions: ci.yml, contributor and index updaters Issue & PR templates; CODEOWNERS

📁 Project Structure

└── dhun/
├── docs/
│   ├── adr/
│   │   └── ADR-001-tech-stack.md
│   ├── audit/
│   │   ├── CODEBASE_AUDIT.md
│   │   └── MIGRATION_PATH.md
│   └── decisions/
│       ├── DEC-001-licensing-catalogue.md
│       └── DEC-002-infrastructure-cost.md
├── site/
│   ├── HTML/
│   │   ├── about.html
│   │   ├── sign-up.html
│   │   └── songs.html
│   ├── JavaScript/
│   │   └── app.js
│   └── Public/
│       ├── images/
│       │   ├── Background_image.jpg
│       │   ├── image1.jpg
│       │   ├── image2.jpg
│       │   ├── image3.jpg
│       │   ├── image4.jpg
│       │   ├── image5.jpg
│       │   ├── image6.jpg
│       │   ├── image7.jpg
│       │   └── test_image.jpeg
│       └── style.css
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── index.html
├── LICENSE
├── README.md
└── SECURITY.md

📑 Project Index

DHUN/

__root__

CODE_OF_CONDUCT.md — File.
CONTRIBUTING.md — File.
index.html — HTML page.
LICENSE — File.
README.md — Project documentation, overview and setup instructions.
SECURITY.md — File.

.github

CODEOWNERS — File.

ISSUE_TEMPLATE

bug_report.yml — File.
config.yml — File.
feature_request.yml — File.

PULL_REQUEST_TEMPLATE

pull_request_template.yml — File.

scripts

update-contributors.js — JavaScript file.

workflows

ci.yml — File.
update-contributors.yml — File.
update-project-index.yml — File.
update-project-structure.yml — File.
update-tech-badges-single-repo.yml — File.

docs

adr

ADR-001-tech-stack.md — File.

audit

CODEBASE_AUDIT.md — File.
MIGRATION_PATH.md — File.

decisions

DEC-001-licensing-catalogue.md — File.
DEC-002-infrastructure-cost.md — File.

site

HTML

about.html — HTML page.
sign-up.html — HTML page.
songs.html — HTML page.

JavaScript

app.js — JavaScript file.

Public

style.css — Stylesheet.

images

Background_image.jpg — File.
image1.jpg — File.
image2.jpg — File.
image3.jpg — File.
image4.jpg — File.
image5.jpg — File.
image6.jpg — File.
image7.jpg — File.
test_image.jpeg — File.

🚀 Getting Started

📋 Prerequisites

This project requires the following dependencies:

Programming Language: HTML, CSS and JavaScript

⚙️ Installation

Build dhun from the source and install dependencies:

Clone the repository:

❯ git clone https://github.com/MA1002643/dhun

Navigate to the project directory:
```
❯ cd dhun
```

💻 Usage

Run the project with:

echo 'INSERT-RUN-COMMAND-HERE'

🧪 Testing

Dhun uses the {test_framework} test framework. Run the test suite with:

echo 'INSERT-TEST-COMMAND-HERE'

🎓 Learning Outcomes

Designed and developed a full-stack artist portfolio platform using Node.js, Express, MySQL, and EJS, following the MVC architectural pattern.
Strengthened understanding of RESTful API design and server–client interaction through dynamic content rendering and modular routing.
Implemented CRUD functionality for artist profiles, media content, and user interactions, reinforcing database integration and query optimization skills.
Gained hands-on experience in authentication, session management, and secure form handling to protect user data and application logic.
Enhanced proficiency with frontend templating (EJS) and backend development (Express.js) for real-world, production-ready web applications.
Practiced responsive UI design using Bootstrap and Font Awesome, ensuring accessibility and consistency across devices.
Applied modular software engineering principles to achieve clean code separation between controllers, models, and routes.
Strengthened understanding of database schema design, foreign key relationships, and SQL joins for structured data management.
Explored deployment workflows and configuration for hosting a Node.js application connected to a cloud-based MySQL database.
Improved collaborative development and version control practices using Git, branching workflows, and comprehensive documentation to maintain project quality.

📈 Roadmap

Task 1: Implement feature one.
Task 2: Implement feature two.
Task 3: Implement feature three.

🤝 Contributors

✨ Acknowledgments

Built as part of a full-stack engineering showcase, combining Node.js, Express, MySQL, and EJS to deliver a professional artist platform.
Inspired by modern music portfolio sites that emphasize visual identity, performance, and content scalability.
Thanks to the open-source ecosystem and mentors whose guidance strengthened the project’s architecture, UI flow, and deployment strategy.

📜 License

This project is licensed under the MIT License. See the LICENSE file for full details.

Navigation Menu

Repository files navigation

DHUN

📄 Table of Contents