https://github.com/zapeture/json_processor
A modern JSON formatter and validator built with Next.js and shadcn/ui. Features real-time formatting, syntax validation, and a beautiful code editor interface.
https://github.com/zapeture/json_processor
json-formatter json-parser json-tools json-validator nextjs
Last synced: 2 months ago
JSON representation
A modern JSON formatter and validator built with Next.js and shadcn/ui. Features real-time formatting, syntax validation, and a beautiful code editor interface.
- Host: GitHub
- URL: https://github.com/zapeture/json_processor
- Owner: zapeture
- License: mit
- Created: 2025-03-21T03:49:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-21T04:25:09.000Z (about 1 year ago)
- Last Synced: 2025-03-21T05:24:47.009Z (about 1 year ago)
- Topics: json-formatter, json-parser, json-tools, json-validator, nextjs
- Language: TypeScript
- Homepage: https://jsonprocessor.fortunezviregei.com
- Size: 140 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JSON Processor
[](https://opensource.org/licenses/MIT)
## 🚀 Overview
JSON Processor is a modern, efficient, and user-friendly tool for formatting and validating JSON data. Built with Next.js and shadcn/ui, it provides instant feedback and a beautiful interface for working with JSON.
### ✨ Features
- 🎯 Instant JSON formatting with proper indentation
- ✅ JSON validation with detailed error messages
- 📝 Modern code editor with syntax highlighting
- 📱 Beautiful and responsive UI
- 🔔 Real-time feedback with toast notifications
- 🎨 Dark theme support
- ⚡ Format-on-type capability
## 🛠️ Technologies Used
- Next.js 14
- React v19
- TypeScript
- shadcn/ui
- Monaco Editor
- Sonner (for toast notifications)
- Tailwind CSS
## 🏗️ Installation
1. Clone the repository:
```bash
git clone https://github.com/zapeture/json-processor.git
cd json-processor
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser
## 🎯 Usage
1. Paste your JSON data into the editor
2. Choose between "Format" or "Validate" mode
3. Click the action button to process your JSON
4. See the formatted result directly in the editor
5. Get instant feedback through toast notifications
## 🚀 Live Demo
Check out the live demo: [JSON Processor Demo](https://jsonprocessor.fortunezviregei.com)
## 🤝 Contributing
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.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 👤 Author
**Fortune Zviregei**
- Website: [fortunezviregei.com](https://fortunezviregei.com/)
- GitHub: [@zapeture](https://github.com/zapeture)
## 🌟 Show your support
Give a ⭐️ if this project helped you!
## 🙏 Acknowledgments
- [Next.js](https://nextjs.org)
- [shadcn/ui](https://ui.shadcn.com)
- [Monaco Editor](https://microsoft.github.io/monaco-editor/)
- [Sonner](https://sonner.emilkowal.ski/)