Skip to content

Commit 0b7bba9

Browse files
killcod3killcod3
committed
first commit
0 parents  commit 0b7bba9

24 files changed

+5568
-0
lines changed

‎.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
.env

‎LICENCE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2025 Jawad Shafique
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# JSON Viewer 🔧
2+
3+
A modern, interactive JSON viewer and editor built with React, TypeScript, and ACE Editor. Parse, format, validate, and explore your JSON data with an intuitive tree view and powerful search functionality.
4+
5+
## ✨ Features
6+
7+
- **Professional Code Editor**: Powered by ACE Editor with syntax highlighting and error detection
8+
- **Interactive Tree View**: Explore JSON structure with expandable/collapsible nodes
9+
- **Real-time Search**: Search through JSON content with match highlighting and navigation
10+
- **JSON Validation**: Instant validation with detailed error messages and line numbers
11+
- **Format & Minify**: Beautify or compress JSON with one click
12+
- **Live Preview**: Real-time JSON parsing and tree visualization
13+
- **Responsive Design**: Works seamlessly on desktop and mobile devices
14+
- **Dark/Light Theme Support**: Built-in theme support via Tailwind CSS
15+
- **TypeScript**: Fully typed for better developer experience
16+
17+
## 🚀 Live Demo
18+
19+
[**👀 View Live Demo**](https://your-app-url.vercel.app) ← Click here to try it out!
20+
21+
## 📸 Screenshots
22+
23+
### Main Interface
24+
![JSON Viewer Main Interface](https://i.postimg.cc/vmLYJvDn/chrome-DUx-ETlp2y-V.png)
25+
26+
### Tree View
27+
![JSON Tree View](https://i.postimg.cc/ncCLX7w8/chrome-at-RFEV4-Ovp.png)
28+
29+
### Search Functionality
30+
![Search Feature](https://i.postimg.cc/nc4njkYP/chrome-7-G8-BRs-AVsy.png)
31+
32+
## 🛠️ Tech Stack
33+
34+
- **Frontend**: React 18, TypeScript
35+
- **Editor**: ACE Editor (ace-builds)
36+
- **Styling**: Tailwind CSS
37+
- **Icons**: Lucide React
38+
- **Build Tool**: Vite
39+
- **Linting**: ESLint
40+
41+
## 🏃‍♂️ Quick Start
42+
43+
### Prerequisites
44+
45+
- Node.js (v18 or higher)
46+
- npm or yarn
47+
48+
### Installation
49+
50+
1. **Clone the repository**
51+
```bash
52+
git clone https://github.com/killcod3/json-viewer.git
53+
cd json-viewer
54+
```
55+
56+
2. **Install dependencies**
57+
```bash
58+
npm install
59+
```
60+
61+
3. **Start the development server**
62+
```bash
63+
npm run dev
64+
```
65+
66+
4. **Open your browser**
67+
```
68+
http://localhost:5173
69+
```
70+
71+
## 🤝 Contributing
72+
73+
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
74+
75+
76+
77+
## 🐛 Bug Reports
78+
79+
If you find a bug, please create an issue with:
80+
- Bug description
81+
- Steps to reproduce
82+
- Expected behavior
83+
- Screenshots (if applicable)
84+
- Browser/OS information
85+
86+
## 💡 Feature Requests
87+
88+
Have an idea for a new feature? Open an issue with:
89+
- Feature description
90+
- Use case/motivation
91+
- Proposed implementation (optional)
92+
93+
## 📄 License
94+
95+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
96+
97+
## 👨‍💻 Author
98+
99+
[Jawad Shafique](https://github.com/killcod3)
100+
101+
## 📊 Stats
102+
103+
![GitHub stars](https://img.shields.io/github/stars/killcod3/json-viewer?style=social)
104+
![GitHub forks](https://img.shields.io/github/forks/killcod3/json-viewer?style=social)
105+
![GitHub issues](https://img.shields.io/github/issues/killcod3/json-viewer)
106+
![GitHub license](https://img.shields.io/github/license/killcod3/json-viewer)
107+
108+
---
109+
110+
⭐ **Star this repository if you found it helpful!**

‎eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import tseslint from 'typescript-eslint';
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
}
28+
);

‎favicon.ico‎

4.06 KB
Binary file not shown.

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>JSON Viewer</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)