Skip to content

Latest commit

 

History

History
140 lines (90 loc) · 3.02 KB

README.md

File metadata and controls

140 lines (90 loc) · 3.02 KB
Raw

JSON Visualiser

An application for visualising, sharing, and analyzing JSON data with multiple viewing modes and AI-powered explanations.

Features

  • 🎯 Multiple Visualisation Modes

    • Raw Input: Edit and validate JSON with syntax highlighting
image
  • Tree View: Hierarchical representation of JSON data
Screenshot 2024-11-06 at 9 19 19 AM
  • Grid View: Tabular view for array-based JSON
Screenshot 2024-11-06 at 9 19 28 AM

  • AI Analysis: Get AI-powered explanations of your JSON structure

  • 🔄 Real-time Validation

    • Instant JSON syntax validation
    • Clear error messages for debugging

  • 🌓 Dark/Light Mode

    • Automatic theme detection
    • Manual theme toggle

  • 📤 Sharing Capabilities

    • Generate shareable links for JSON snippets
    • View shared JSON with metadata
Screenshot 2024-11-06 at 9 19 48 AM Screenshot 2024-11-06 at 9 20 11 AM

Tech Stack

  • Framework: Next.js 15
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Components: Shadcn UI
  • Database: PostgreSQL

Getting Started

Prerequisites

  • Node.js 20+
  • pnpm (recommended) or npm
  • PostgreSQL database

Installation

  1. Clone the repository:
git clone https://github.com/thatbeautifuldream/json-visualizer.git --depth 1
cd json-visualizer
  1. Install dependencies:
pnpm install
# or
npm install
  1. Set up environment variables:

Create a .env file in the root directory with the following variables:

# Database
DATABASE_URL="postgresql://postgres:postgres@localhost:5432/json_visualizer"
ADMIN_KEY="your-super-secret-admin-key"
  1. Start the development server:
pnpm dev
# or
npm run dev

The application will be available at http://localhost:3000.

Database Setup

  1. Ensure PostgreSQL is installed and running
  2. Create a new database:
CREATE DATABASE json_visualizer;
  1. To create the tables, run the following command:
pnpm db:push

Production Deployment

  1. Build the application:
pnpm build
# or
npm run build
  1. Start the production server:
pnpm start
# or
npm start

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.