Skip to content

A secure, client-side data converter that instantly transforms JSON, YAML, TOML, and XML. Built with Next.js 15 and Monaco Editor, it offers a VS Code-like experience with real-time validation and zero server data transfer.

License

Notifications You must be signed in to change notification settings

YashashavGoyal/datamorph

Repository files navigation

DataMorph

Next.js TypeScript React Tailwind CSS Vercel

License GitHub stars GitHub forks GitHub issues Docker Pulls

DataMorph Deployed on AWS EC2

Deployed on AWS EC2

DataMorph is a privacy-focused developer tool for converting and validating data formats like JSON, YAML, XML, and TOML. It runs entirely in your browser, so your data never leaves your device.

How It Works

DataMorph uses a Client-Side Architecture. It downloads the necessary code once and then processes everything locally on your computer.

flowchart TD
    %% Nodes
    User([πŸ‘€ User])
    CDN[("☁️ Vercel CDN")]
    
    subgraph Client ["πŸ’» Client-Side Runtime"]
        direction TB
        Shell["πŸ›‘οΈ App Shell"]
        Editor["πŸ“ Monaco Editor"]
        Engine["βš™οΈ Conversion Engine"]
    end

    %% Edges
    CDN -.->|1. Delivers Assets| Shell
    User ==>|2. Types Code| Editor
    Editor <==>|3. Real-time JSON/YAML/XML| Engine

    %% Styling
    classDef plain fill:#1a1a1a,stroke:#fff,color:#fff;
    classDef highlight fill:#22226e,stroke:#f2f0f0,stroke-width:2px,color:#fff;
    classDef secondary fill:#2d2d2d,stroke:#666,color:#eee;

    class User,CDN plain;
    class Shell,Editor secondary;
    class Engine highlight;
    style Client fill:transparent,stroke:#333,color:#ccc,stroke-dasharray: 5 5
Loading

Features

  • Real-Time Conversion: Instantly convert between formats as you type. Real-time Conversion
  • Privacy First: 100% client-side processing. Zero data opacity.
  • Validation: Instant syntax checking for JSON, YAML, XML, and TOML. Validator
  • Modern UI: Dark mode, glassmorphism, and responsive design.

Future Scope

  • More Formats: Support for CSV, Protobuf, and GraphQL SDL.
  • File Upload: Drag-and-drop file conversion.
  • API Generation: Generate TypeScript interfaces or Go structs from JSON.
  • PWA Support: Install as a Progressive Web App for offline use.
  • Theme Toggle: Light/Dark mode switcher.

πŸš€ DevOps & Deployment

We have professionalized the deployment pipeline using GitHub Actions and Docker, ensuring a robust CI/CD process.

πŸ”„ CI/CD Pipeline (GitHub Actions)

Our pipeline fully automates the testing, building, and deployment process:

  1. Test: Runs npm run lint to ensure code quality.
  2. Build: Creates a optimized Docker image using a multi-stage build.
  3. Deploy: Automatically deploys the new container to our AWS EC2 instance upon any push to main or any tag push (vx.y.z) with a manual approval.

GitHub Actions Workflow

🐳 Docker Containerization

We use a Multi-Stage Docker Build to ensure our production images are:

  • Lightweight: Only essential artifacts are copied to the final image (based on node:20-alpine).
  • Secure: The app runs as a non-root user (nextjs).
  • Efficient: Dependencies are cached effectively.

Official Docker Image: yashashavgoyal/datamorph

Docker Hub Repository

Verification

You can verify the running container on our AWS EC2 instance: AWS EC2 Docker Process

πŸ“ˆ Monitoring & Future Roadmap

  • CI/CD Pipeline: GitHub Actions for automated linting and deployment.
  • Containerization: Dockerfile with multi-stage builds.
  • Unit Tests: Integrate Jest/Vitest.
  • E2E Tests: Integrate Playwright.
  • Monitoring: Integrate Sentry and Vercel Analytics.

Prerequisites

  • Use a modern package manager like npm, yarn, or pnpm.
  • Node.js: v18 or higher is recommended.

Installation & Run

  1. Clone the repository:

    git clone https://github.com/YashashavGoyal/datamorph.git
    cd datamorph
  2. Install dependencies:

    npm ci
    # or
    npm install

Development

Run the development server to see changes in real-time:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Production

To build the application for production usage:

  1. Build the application:

    npm run build
  2. Start the production server:

    npm start

The application is now optimized and ready for deployment.

πŸ“‚ Modular Code Structure

β”œβ”€β”€ app/
β”‚   β”œβ”€β”€ (src)/               # Application Routes
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ shell/           # Core Editors (State Orchestration)
β”‚   β”‚   β”œβ”€β”€ editor/          # Third-party Integrations (Monaco)
β”‚   β”‚   └── ui/              # Design System (Atomic Components)
β”‚   └── lib/
β”‚       β”œβ”€β”€ converters.ts    # Logic: Pure functions (Unit Testable)
β”‚       └── hooks/           # Logic: React Custom Hooks

Author: Yashashav Goyal

GitHub LinkedIn Twitter

License: MIT

About

A secure, client-side data converter that instantly transforms JSON, YAML, TOML, and XML. Built with Next.js 15 and Monaco Editor, it offers a VS Code-like experience with real-time validation and zero server data transfer.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published