26 |
27 | ### Tools and Packages Used
28 |
29 | - React
30 | - prismjs
31 | - react-component-export-image
32 | - react-simple-code-editor
33 | - reactflow
34 | - sass
35 |
36 | ## Features
37 |
38 | - Tabs
39 | - Preview Board
40 | - Code editor
41 | - Zoom In/out
42 | - Focus control
43 | - Lock
44 | - Download Button
45 |
46 | ## Why I started this project
47 |
48 | I came across a code editor that helps you visualize JSON file, so I thought about build something similar as a web app with additional features.
49 |
50 | I had a challenges with generating the diagram, but `Reactflow` gave me insight on how to connect the different nodes and edges together.
51 |
52 | ## How It Works
53 |
54 | Users can easily interact with the code editor and type in JSON structured code.
55 |
56 | The code editor has a *debugging feature* - red indicator that shows error exist in the code. Thus, It can't be previewed until it is fixed.
57 |
58 | At the bottom-left, it has features which allows:
59 |
60 | - **Zoom in or out** from the workspace.
61 | - **Fit to view** for easy switching on the vertical or horizontal direction.
62 | - **Lock** to restrict the diagram generated from further edit or distortion.
63 |
64 | At the top-right, there is:
65 |
66 | - **Download** to the diagrams
67 | - **Orientation adjustment** button for custom view.
68 |
69 |
70 | The left side menu consists of:
71 |
72 | - **Eraser** to delete the contents in the code editor.
73 | - **Social media handles** (Linkedin, Twitter)
74 | - **Github repository**
75 |
76 | ## Installation
77 |
78 | 1. Clone the repository
79 |
80 | ```bash
81 | git clone https://github.com/ugwustanley/json-preview.git
82 | ```
83 |
84 | 2. Change the working directory
85 |
86 | ```bash
87 | cd json-preview
88 | ```
89 |
90 | 3. Install dependencies
91 |
92 | ```bash
93 | npm install
94 | ```
95 |
96 | 4. Run the app
97 |
98 | ```bash
99 | npm start
100 | ```
101 |
102 | You can now see it at `http://localhost:3000` in your browser.
103 |
104 | ## Contributing
105 |
106 | If you face any problems while using the application, please open an issue or submit a pull request.
107 |
108 | ## Support
109 |
110 | Please give this project a star⭐, if you like it.
111 |
112 | ## License
113 |
114 | This project is built under the [MIT License](./License).
115 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "json-preview",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "dagre": "^0.8.5",
10 | "phosphor-react": "^1.4.1",
11 | "prismjs": "^1.29.0",
12 | "react": "^18.2.0",
13 | "react-component-export-image": "^1.0.6",
14 | "react-dom": "^18.2.0",
15 | "react-flow-renderer": "^10.3.17",
16 | "react-router-dom": "^6.4.1",
17 | "react-scripts": "5.0.1",
18 | "react-simple-code-editor": "^0.13.1",
19 | "reactflow": "^11.0.0",
20 | "sass": "^1.55.0",
21 | "web-vitals": "^2.1.4"
22 | },
23 | "scripts": {
24 | "start": "react-scripts start",
25 | "build": "react-scripts build",
26 | "test": "react-scripts test",
27 | "eject": "react-scripts eject"
28 | },
29 | "eslintConfig": {
30 | "extends": [
31 | "react-app",
32 | "react-app/jest"
33 | ]
34 | },
35 | "browserslist": {
36 | "production": [
37 | ">0.2%",
38 | "not dead",
39 | "not op_mini all"
40 | ],
41 | "development": [
42 | "last 1 chrome version",
43 | "last 1 firefox version",
44 | "last 1 safari version"
45 | ]
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Json Preview
20 |
21 |
22 |
23 |
24 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ugwustanley/json-preview/773fbd2d7b80c391f01323284a12fd7046d95ef7/public/logo.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Json Preview",
3 | "name": "Json Preview",
4 | "icons": [
5 | {
6 | "src": "logo.png",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#011627",
24 | "background_color": "tomato"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ugwustanley/json-preview/773fbd2d7b80c391f01323284a12fd7046d95ef7/src/App.css
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import {useState} from 'react'
2 | import {BrowserRouter} from 'react-router-dom'
3 | import Routes from './routes'
4 |
5 | function App() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/Layout/Layout.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styles from "./Layout.module.scss";
3 | import Sidebar from "../components/Sidebar/Sidebar";
4 | import NavBar from "../components/NavBar/NavBar";
5 | import View from "../components/View/View";
6 |
7 | const Layout = ({ children }) => {
8 | const [layout, setLayout] = useState("LR");
9 | const [downloadCount, setDownloadCount] = useState(0);
10 | const [code, setCode] = useState(`
11 | {
12 | "name": "json-preview",
13 | "version": "0.1.0",
14 | "private": true,
15 |
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject"
21 | },
22 |
23 | "browserslist": {
24 |
25 | "production": [
26 | ">0.2%",
27 | "not dead",
28 | "not op_mini all"
29 | ]
30 |
31 | }
32 | }
33 |
34 |
35 | `);
36 |
37 | return (
38 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
58 |
59 |
60 |
13 | setCode(code)}
16 | highlight={code => highlight(code, languages.js)}
17 | padding={10}
18 | style={{
19 | fontFamily: " 'Noto Sans Mono', monospace ",
20 | fontSize: 14,
21 | background: '#011627',
22 | }}
23 | />
24 |
25 | );
26 | }
27 |
28 | export default CodeEditor;
--------------------------------------------------------------------------------
/src/components/CodeEditor/CodeEditor.module.scss:
--------------------------------------------------------------------------------
1 | .codeEditor {
2 | width: 100%;
3 | height: calc(100vh - 70px);
4 | background: #011627;
5 | color: #fff;
6 | overflow-y: auto;
7 |
8 | ::-webkit-scrollbar-track {
9 | border: 0px solid black;
10 | background-color: transparent;
11 | //background-color: #F5F5F5;
12 | }
13 |
14 | ::-webkit-scrollbar {
15 | width: 8px;
16 | height: 8px;
17 | background-color: transparent;
18 | @media (max-width: 480px) {
19 | width: 5px;
20 | height: 5px;
21 | }
22 | // margin-right:10rem;
23 | // background-color: #F5F5F5;
24 | }
25 |
26 | ::-webkit-scrollbar-thumb {
27 | background-color: rgba(0, 0, 0, 0.2);
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { DownloadSimple, ArrowRight, ArrowDown } from "phosphor-react";
3 | import DownloadIcon from '../../assets/icons/icons8-download-50.png'
4 | import DirectionIcon from '../../assets/icons/icons8-direction-64.png'
5 | import ArrowRightIcon from '../../assets/icons/icons8-right-arrow-64 (1).png'
6 | import ArrowDownIcon from '../../assets/icons/icons8-down-arrow-64 (1).png'
7 | import Logo from '../../assets/images/default-removebg-preview.png'
8 | import styles from "./NavBar.module.scss";
9 |
10 | const NavBar = ({setLayout, layout , setDownloadCount , downloadCount}) => {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
setLayout(layout === "LR" ? "TB" : "LR")}>
20 |
21 |
22 |
setDownloadCount(downloadCount + 1)}>
23 |
24 |
25 |
26 |
109 |
110 |
111 |
120 |
121 |
122 |
123 |
124 |
29 | {`./`}
37 | Root
38 |
39 | ),
40 | },
41 | position: this.position,
42 | style: {
43 | background: "#122d424f",
44 | fontSize: ".95rem",
45 | textAlign: "left",
46 | color: "teal",
47 | border: "2px solid #122d42cb",
48 | minWidth: 220,
49 | padding: 0,
50 | textOverflow: "ellipsis !important",
51 | whiteSpace: "nowrap",
52 | overflow: "hidden",
53 | },
54 | });
55 | }
56 | if (typeof input === "object" && !Array.isArray(input)) {
57 | let valueArray = [];
58 | Object.keys(input).map((key, index) => {
59 | if (typeof input[key] === "object" || Array.isArray(input[key])) {
60 | const id = `${parentID + 1}${index + 1} ${Math.random() * 10000}`;
61 |
62 | this.nodes.push({
63 | id,
64 | data: {
65 | label: (
66 |
67 |
75 | {Array.isArray(input[key]) ? `[]` : `{}`}
76 |
77 |
88 | {key}
89 |
90 |
91 | ),
92 | },
93 | position: this.position,
94 | style: {
95 | background: "#122d424f",
96 | fontSize: ".95rem",
97 | textAlign: "left",
98 | color: "teal",
99 | border: "2px solid #122d42cb",
100 | minWidth: 280,
101 | padding: 0,
102 | textOverflow: "ellipsis",
103 | whiteSpace: "nowrap",
104 | overflow: "hidden",
105 | },
106 | });
107 |
108 | this.edges.push({
109 | id: id + parentID,
110 | source: parentID,
111 | target: id,
112 | type: this.edgeType,
113 | animated: this.animated,
114 | });
115 |
116 | this.getNodes(input[key], id, key);
117 | } else {
118 | valueArray.push({ key: key, value: input[key] });
119 | }
120 | });
121 |
122 | if (valueArray.length > 0) {
123 | const id = `${Math.random() & 1000000}${Math.random() * 100000}`;
124 |
125 | this.nodes.push({
126 | id,
127 | data: {
128 | label: (
129 |
130 | {valueArray.map((value) => (
131 |
143 | {value.key}:
144 | {`${value?.value}`}
147 |
148 | ))}
149 |
189 |
203 | {item}
204 |
205 |
13 |
14 |
setCode(`{}`)}>
15 |
16 |
17 |
18 |
32 |
40 |
41 |
setActiveTab("code-editor")}
48 | >
49 | Code Editor {isJson ? null : }
50 |
51 |
isJson && setActiveTab("preview-board")}
58 | >
59 | Preview Board
60 |
61 |
62 |
63 | {activeTab === "code-editor" ? (
64 |
65 | ) : (
66 |
67 | )}
68 |
3 |
4 | 
11 | 
15 | 
17 |
18 |