An open API service indexing awesome lists of open source software.

https://github.com/basmasalim/duabox

Allows users to write, save, and manage their favorite Duas (supplications) — all in one place. Built with HTML, CSS, JavaScript, and powered by a local JSON server for backend functionality.
https://github.com/basmasalim/duabox

bootstrap5 css3 html5 json masonry-layout sweetalert2

Last synced: 3 months ago
JSON representation

Allows users to write, save, and manage their favorite Duas (supplications) — all in one place. Built with HTML, CSS, JavaScript, and powered by a local JSON server for backend functionality.

Awesome Lists containing this project

README

          

**DuaBox** is a simple and elegant web app that allows users to write, save, and manage their favorite Duas (supplications) — all in one place. Built with HTML, CSS, JavaScript, and powered by a local JSON server for backend functionality.

## 📸 Preview

![image](https://github.com/user-attachments/assets/75bcadfc-c597-4798-afaf-fab6950337ca)

## ✨ Features

- 📝 Add your favorite Duas
- 📂 View all saved Duas in a clean layout
- 🗑️ Delete any Dua you no longer need
- 🖊️ (Coming Soon) Edit saved Duas
- 🌙 RTL (Right-to-Left) Arabic support
- ❤️ Clean and responsive Bootstrap 5 design

## 🛠️ Built With

- HTML5
- CSS3
- Bootstrap 5.3
- JavaScript (Vanilla)
- [JSON Server](https://github.com/typicode/json-server) (for local development)

## 🚀 Getting Started (Local Setup)

To run the project locally with full functionality including saving/deleting:

### 1. Clone the repository

```bash
git clone https://github.com/basmasalim/DuaBox.git
cd DuaBox
````

### 2. Install JSON Server

```bash
npm install -g json-server
```

### 3. Start the server

```bash
json-server --watch db.json --port 3000
```

This will create a local REST API at: `http://localhost:3000/DuaBox`

### 4. Open the `index.html` file in your browser

## 📁 Project Structure

```
DuaBox/

├── assets/
│ ├── icon/ # Favicon files
│ ├── style.css # Custom styling
│ └── script.js # JavaScript logic
│ └── db.json # JSON Server database

├── index.html # Main HTML file
└── README.md # Project documentation
```

---

## 🤝 Contributing

Feel free to fork the repository, create a pull request, or suggest new features via issues.

---

## 📧 Contact

Made with 💚 by **[Basma Salim](https://github.com/basmasalim)**
For any feedback or ideas, feel free to reach out!

---

## 🕌 A Note of Gratitude

> *"Whoever guides someone to goodness will have a reward like one who did it."*
> — Prophet Muhammad (peace be upon him)