Aloittelija3-4 tuntia🛠️ Kehittäjätyökalut

JSON-työkalut

Muotoile, validoi ja vertaa JSON-dataa.

Teknologiat:Next.jsTypeScriptTailwind CSS

Aloitusprompt

Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.

Luo JSON-työkalupakki.

Välilehdet:
1. Formatter (beautify/minify)
2. Validator (tarkista ja näytä virheet)
3. Tree View (visualisoi rakenne)
4. Diff (vertaa kahta JSONia)

Jokaisella välilehdellä:
- Input-alue(t) JSONille
- Toimintonapit
- Output/tulos-alue
- Kopioi-nappi

Ominaisuudet:
- Syntaksikorostus
- Rivinumerot
- Virheiden korostus
- Sample JSON -napit

Tech: Next.js, TypeScript, Tailwind CSS

Ominaisuudet

Tässä projektissa rakennetaan seuraavat ominaisuudet:

1JSON-muotoilu (prettify)
2Validointi
3Minifiointi
4Vertailu (diff)
5JSON <-> objekti muunnos

Vaiheet

1

JSON-muotoilu

Luo beautifier ja minifier.

Prompti:

Luo JSON-työkalun perustoiminnot: input-alue JSON:ille, Beautify-nappi (muotoilu sisennyksellä), Minify-nappi (poista turhat välilyönnit). Näytä virheviestit jos JSON on virheellinen.
2

Validointi ja visualisointi

Lisää validointi ja puurakenne.

Prompti:

Lisää JSON-validointi virheviesteineen. Luo puurakenne-näkymä (tree view) jossa voi navigoida JSONin sisällä. Näytä tyypit (string, number, boolean, array, object).
3

JSON-diff

Vertaa kahta JSON-objektia.

Prompti:

Luo JSON-diff työkalu: kaksi input-aluetta JSONeille, vertaa ja näytä erot värikoodattuna (lisätty, poistettu, muutettu).

Laajennusideat

Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:

  • JSON -> TypeScript interface
  • JSON -> YAML muunnos
  • JSON Path -haku
  • Schema-validointi
  • Import/export tiedostosta

Lisää projekti-ideoita

Selaa kaikkia kehittäjätyökalut projekteja tai tutustu muihin kategorioihin.