https://github.com/rkstudio585/dummy-data-display
A simple website that displays dummy JSON data, including user profiles, product listings, and order details, styled with Tailwind CSS and powered by JavaScript and jQuery for dynamic data rendering.
https://github.com/rkstudio585/dummy-data-display
dummy-data dummy-data-website dummy-website dummyjson json-website website
Last synced: 6 months ago
JSON representation
A simple website that displays dummy JSON data, including user profiles, product listings, and order details, styled with Tailwind CSS and powered by JavaScript and jQuery for dynamic data rendering.
- Host: GitHub
- URL: https://github.com/rkstudio585/dummy-data-display
- Owner: rkstudio585
- Created: 2024-11-10T14:53:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-10T14:59:18.000Z (over 1 year ago)
- Last Synced: 2025-01-21T11:45:25.353Z (over 1 year ago)
- Topics: dummy-data, dummy-data-website, dummy-website, dummyjson, json-website, website
- Language: HTML
- Homepage: https://rkstudio.com
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📊 Dummy Data Display Website
> ### Live Demo Link
> [Cleack Here For view the Preview](https://dummy-data-display-mr-r-k-s-projects.vercel.app/)
This project is a sample website that displays dummy JSON data (users, products, and orders) using HTML, Tailwind CSS, jQuery, and JavaScript. It provides a basic UI for viewing user profiles, product listings, and order details in a visually appealing format.
## ✨ Features
- 👤 **User Profiles**: View user information including name, age, email, phone numbers, and addresses.
- 🛍️ **Product Catalog**: Browse product details including name, description, price, stock, and ratings.
- 📦 **Order Details**: See orders placed by users, with details on each item and total cost.
## 🛠️ Technologies Used
- **HTML**: For page structure.
- **Tailwind CSS**: For styling the page with a responsive, modern design.
- **JavaScript & jQuery**: For dynamically displaying the JSON data.
## 🚀 Getting Started
1. **Download or Clone the Repository**:
```bash
git clone https://github.com/yourusername/dummy-data-display.git
```
2. **Open the `index.html` file** in your web browser to view the website.
## 📂 Project Structure
- **index.html**: Main file containing HTML structure, embedded JSON data, and scripts.
- **Tailwind CSS CDN**: For page styling.
- **jQuery CDN**: For easier JavaScript DOM manipulation.
## 🧩 How It Works
- The JSON data is embedded directly in the HTML file within a JavaScript object.
- The data is parsed and dynamically displayed in sections using jQuery.
- Tailwind CSS styles the sections and layout for a clean, modern look.
---