Forem: TThroo-Dev

Build your SaaS landing page in 15 minutes using Mantine

TThroo-Dev — Thu, 11 Jan 2024 23:37:56 +0000

After the Jsoncrack codebase analysis series, I have decided to update my website TThroo to use Mantine components.

I was able to create components required in less than 15minutes.

Wait, what components?

You can find them in TThroo repo.

Choose the starter project

Mantine provides Nextjs starter configured with Mantine.

I chose next-app-min-template

And then copied the code from Mantine components listed above and that's it. You now have your SaaS landing page.

But is it though?

You still need to update the copy writing for your website content, update the logo to match your brand's values, but atleast you have a website ready. One less problem...

The problem

I used to host my website on firebase hosting, with nextjs, you have to perform additional steps. Keep this in mind.

Conclusion:

Jsoncrack codebase analysis helped me learn about Mantine and I liked their components. This is what you do, you apply from your learnings.

It can be something a small thing such as this one to decide to go with Mantine or it can be a huge pattern that you decided to apply when you have a lot of modals in your project.

Sure, I could have used tailwind, but it is alright. I want to demonstrate as much as possible how powerful and useful opensource to learn from.

If you have any questions or need help with your project, feel free to reach out to me at ram@tthroo.com

JSONCrack Codebase Analysis - Part 6 - Lemonsqueezy integration

TThroo-Dev — Wed, 10 Jan 2024 21:37:21 +0000

jsoncrack is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

We, at TThroo, love open source and perform codebase analysis on popular repositories, document, and provide a detailed explanation of the codebase. This enables OSS enthusiasts to learn and contribute to open source projects, and we also apply these learnings in our projects.

In this part 6, we understand how Lemonsqueezy is used for payment subscription.

Pricing.tsx in src/pages/pricing.tsx has Upgrade that redirects you to Lemonsqueezy checkout.

Checkout

Webhook listener

So, I could not figure out the webhook listener used to listen subscriptions created via this checkout in this codebase, I was hoping I could find an endpoint.

The idea is to listen to webhook events whenever there is a new subscription created and update the database record.

I will make sure to include this as part my next tutorial series where we build a product similar to jsoncrack.

But you get the idea now.

Premium

setSession object used in useFile store calls supabase.rpc("get_subscription_info") to fetch the user data if they have paid for subscription and premium flag in the store.

rpc? remote procedure call from Supabase

That's it, You now just have to call the following:

const premium = useUser(state => state.premium);

To find out if a user is a premium user and allow to user premium features.

Conlusion

Lemonsqueezy makes it easy to handle subscriptions for SaaS. This was a brief overview of how jsoncrack handles payment subscription.

We have rpc, webhook and useUser to reuse premium logic across the codebase.

This concludes our jsoncrack codebase analysis.

What's next?

I will create a tutorial that mainly uses the logic and design patterns used in this project. I am not a fan of copying exactly what is available in opensource codebases. I would rather build a unique application from sratch and apply the learnings. That's how you really learn. You APPLY :)

What are we building next?

A simple application that uses the same tech stack as jsoncrack.

Next.js
Supabase
Monaco Editor
Lemonsqueezy
Reaflow

and yes, it will be opensource.

I will make all these tutorials available at Practice Frontend after a significant to that website. That'll be opensource too.

If you have any questions or need help with your project, feel free to reach out to me at ram@tthroo.com

JSONCrack Codebase Analysis - Part 5 - Toolbar and Bottom bar

TThroo-Dev — Tue, 09 Jan 2024 21:41:54 +0000

jsoncrack is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

In this part 5, we understand how Toolbar and BottomBar are configured.

Interested to learn from opensource?

I am going to write a tutorial series where we use what we learnt from this jsoncrack codebase analysis, potentially involves usage of monaco editor, mantine, authentication and zustand configuration and modals, pretty much everything that is worth applying.

Before You ask, no, it is not going to be a jsoncrack clone but a unique project that uses similar codebase and similar approach and configuration to what we have seen in this series. It involves using supabase, zustand, mantine, monaco editor, nextjs.

Join the waitlist and I will send you the link to the tutorials once they are ready.

Where are they used?

They are used in Editor component. Part 4 explains about Editor component.

Toolbar

You will find Toolbar inside src/containers/Toolbar.

export const Toolbar: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) => {
  const getJson = useJson(state => state.getJson);
  const setVisible = useModal(state => state.setVisible);

  const setFormat = useFile(state => state.setFormat);
  const format = useFile(state => state.format);
  const premium = useUser(state => state.premium);

  const handleSave = () => {
    const a = document.createElement("a");
    const file = new Blob([getJson()], { type: "text/plain" });

    a.href = window.URL.createObjectURL(file);
    a.download = "jsoncrack.json";
    a.click();
  };

  return (
    <Styles.StyledTools>
      {isWidget && <Logo />}
      {!isWidget && (
        <Group gap="xs" justify="left" w="100%" style={{ flexWrap: "nowrap" }}>
          <Styles.StyledToolElement title="JSON Crack">
            <Flex gap="xs" align="center" justify="center">
              <JSONCrackLogo fontSize="1.2em" />
            </Flex>
          </Styles.StyledToolElement>

          <Select
            defaultValue="json"
            size="xs"
            value={format}
            onChange={e => setFormat(e as FileFormat)}
            miw={80}
            w={120}
            data={[
              { value: FileFormat.JSON, label: "JSON" },
              { value: FileFormat.YAML, label: "YAML" },
              { value: FileFormat.XML, label: "XML" },
              { value: FileFormat.TOML, label: "TOML" },
              { value: FileFormat.CSV, label: "CSV" },
            ]}
          />

          <ViewModeMenu />
          <Styles.StyledToolElement title="Import File" onClick={() => setVisible("import")(true)}>
            Import
          </Styles.StyledToolElement>
          <ViewMenu />
          <ToolsMenu />
          <Styles.StyledToolElement title="Cloud" onClick={() => setVisible("cloud")(true)}>
            Cloud
          </Styles.StyledToolElement>
          <Styles.StyledToolElement title="Download as File" onClick={handleSave}>
            Download
          </Styles.StyledToolElement>
        </Group>
      )}
      <Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
        {!premium && !isWidget && (
          <Styles.StyledToolElement onClick={() => setVisible("premium")(true)}>
            <Text display="flex" c="teal" fz="xs" fw="bold" style={{ textAlign: "center", gap: 4 }}>
              <MdWorkspacePremium size="18" />
              Get Premium
            </Text>
          </Styles.StyledToolElement>
        )}

        <SearchInput />
        {!isWidget && (
          <>
            <Styles.StyledToolElement
              title="Save as Image"
              onClick={() => setVisible("download")(true)}
            >
              <FiDownload size="18" />
            </Styles.StyledToolElement>
            <ZoomMenu />
            <AccountMenu />
            <OptionsMenu />
            <Styles.StyledToolElement
              title="Fullscreen"
              $hide={isWidget}
              onClick={fullscreenBrowser}
            >
              <AiOutlineFullscreen size="18" />
            </Styles.StyledToolElement>
          </>
        )}
      </Group>
    </Styles.StyledTools>
  );
};

isWidget flag is used to show either logo or the below optiions.

Select

<Select
  defaultValue="json"
  size="xs"
  value={format}
  onChange={e => setFormat(e as FileFormat)}
  miw={80}
  w={120}
  data={[
   { value: FileFormat.JSON, label: "JSON" },
   { value: FileFormat.YAML, label: "YAML" },
   { value: FileFormat.XML, label: "XML" },
   { value: FileFormat.TOML, label: "TOML" },
   { value: FileFormat.CSV, label: "CSV" },
  ]}
/>

It is a Select component from mantine

import { Flex, Group, Select, Text } from "@mantine/core";

onChange sets format in useFile store

ViewMode

ViewMode deserves a file with its own html and is a standalone that directly updates zustand store.

Import

Import sets visible prop in useModal store.

ViewMenu

ViewMenu has a lot of changes to update useGraph store that is directly correlated to the way visualisation is rendered using Reaflow.

And this is again in it own file under Toolbar folder because it has additional HTML that is not the right fit to be in Toolbar/index.tsx

The same approach above is applied to ToolsMenu.

Cloud

Cloud triggers a modal by setting visible prop in useModal store.

Modals are handled super neatly.
Took me a while to figure this one out.

If you open _app.tsx, You will find ModalController

const ModalController = () => {
  const setVisible = useModal(state => state.setVisible);
  const modalStates = useModal(state => modalComponents.map(modal => state[modal.key]));

  return (
    <EditorWrapper>
      {modalComponents.map(({ key, component }, index) => {
        const ModalComponent = component;
        const opened = modalStates[index];

        return <ModalComponent key={key} opened={opened} onClose={() => setVisible(key)(false)} />;
      })}
    </EditorWrapper>
  );
};

That is basically telling to render what is set to true in useModal store. All the Modals used are placed in a container specifically dedicated for Modals. How NEAT!.

This is one of the way cleanest ways to deal with Modals especially when you have a lot of them :)

You can follow through similarly to understand the other items available in Toolbar.

Fullscreen Bar Icon

function fullscreenBrowser() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(() => {
      toast.error("Unable to enter fullscreen mode.");
    });
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

Next time, You are looking for a piece of code to toggle in and out of a full screenmode, You now know how!

BottomBar

BottomBar does not contain as many options as Topbar.

Interestingly, Bottombar is part of Editor, instead of it being a separate folder due to its limited number of options/features.

<StyledBottomBar>
      {data?.name && (
        <Head>
          <title>{data.name} | JSON Crack</title>
        </Head>
      )}
      <StyledLeft>
        <StyledBottomBarItem onClick={toggleEditor}>
          <BiSolidDockLeft />
        </StyledBottomBarItem>

        {fileName && (
          <StyledBottomBarItem onClick={() => setVisible("cloud")(true)}>
            <VscSourceControl />
            {fileName}
          </StyledBottomBarItem>
        )}
        <StyledBottomBarItem>
          {error ? (
            <Popover width="auto" shadow="md" position="top" withArrow>
              <Popover.Target>
                <Flex align="center" gap={2}>
                  <VscError color="red" size={16} />
                  <Text c="red" fw={500} fz="xs">
                    Invalid
                  </Text>
                </Flex>
              </Popover.Target>
              <Popover.Dropdown
                style={{
                  pointerEvents: "none",
                }}
              >
                <Text size="xs">{error}</Text>
              </Popover.Dropdown>
            </Popover>
          ) : (
            <Flex align="center" gap={2}>
              <MdOutlineCheckCircleOutline />
              <Text size="xs">Valid</Text>
            </Flex>
          )}
        </StyledBottomBarItem>
        {(data?.owner_email === user?.email || (!data && user)) && (
          <StyledBottomBarItem onClick={handleSaveJson} disabled={isUpdating || error}>
            {hasChanges || !user ? <AiOutlineCloudUpload /> : <AiOutlineCloudSync />}
            {hasChanges || !user ? (query?.json ? "Unsaved Changes" : "Save to Cloud") : "Saved"}
          </StyledBottomBarItem>
        )}
        {data?.owner_email === user?.email && (
          <StyledBottomBarItem onClick={setPrivate} disabled={isUpdating}>
            {isPrivate ? <AiOutlineLock /> : <AiOutlineUnlock />}
            {isPrivate ? "Private" : "Public"}
          </StyledBottomBarItem>
        )}
        <StyledBottomBarItem
          onClick={() => setVisible("share")(true)}
          disabled={isPrivate || !data}
        >
          <AiOutlineLink />
          Share
        </StyledBottomBarItem>
        {liveTransformEnabled ? (
          <StyledBottomBarItem onClick={() => toggleLiveTransform(false)}>
            <VscSync />
            <Text fz="xs">Live Transform</Text>
          </StyledBottomBarItem>
        ) : (
          <StyledBottomBarItem onClick={() => toggleLiveTransform(true)}>
            <VscSyncIgnored />
            <Text fz="xs">Manual Transform</Text>
          </StyledBottomBarItem>
        )}
        {!liveTransformEnabled && (
          <StyledBottomBarItem onClick={() => setContents({})}>
            <TbTransform />
            Transform
          </StyledBottomBarItem>
        )}
      </StyledLeft>

      <StyledRight>
        <StyledBottomBarItem>Nodes: {nodeCount}</StyledBottomBarItem>
        <StyledBottomBarItem onClick={() => setVisible("review")(true)}>
          <VscFeedback />
          Feedback
        </StyledBottomBarItem>
      </StyledRight>
    </StyledBottomBar>

The code is pretty straigt forward, modifies what needs to be set in stores and few flags are to display what's needed.

If You ask me to refactor the above code, I would choose to move the following to separate component.

{liveTransformEnabled ? (
          <StyledBottomBarItem onClick={() => toggleLiveTransform(false)}>
            <VscSync />
            <Text fz="xs">Live Transform</Text>
          </StyledBottomBarItem>
        ) : (
          <StyledBottomBarItem onClick={() => toggleLiveTransform(true)}>
            <VscSyncIgnored />
            <Text fz="xs">Manual Transform</Text>
          </StyledBottomBarItem>
        )}
        {!liveTransformEnabled && (
          <StyledBottomBarItem onClick={() => setContents({})}>
            <TbTransform />
            Transform
          </StyledBottomBarItem>
        )}

In this new file, You could do the following:

const liveTransformEnabled = useConfig(state => state.liveTransformEnabled);

This could improve the readability, again, it is choice and not hard set rule, depends on dev teams and their preferences. You cannot over engineer at the same time, it is a fine balance. How you draw this fine balance is directly correlated to code maintainability and readability.

Conclusion

We learnt how to use zustand stores and perform operations and do the state updates.

Modal configuration was interesting, I have never seen it before. All the modals are placed inside a folder and a separate store for modals. You can leverage this pattern if your project is dealing with modals heavy operations to handle and maintain the code easily.

Up next, we have part 6 where we talk about how the payments and subscription is integrated into this product using lemonsqueezy.

If you have any questions or need help with your project, feel free to reach out to me at ram@tthroo.com

JSONCrack Codebase Analysis — Part 4.3 — LiveEditor

TThroo-Dev — Mon, 08 Jan 2024 20:24:37 +0000

jsoncrack is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

Part 4.1 - Editor - Panes Component has 2 main components.

JsonEditor Component

Part 4.2.1 — Editor — JsonEditor Component
and

Part 4.2.1.1 — JsonEditor — debouncedUpdateJson

LiveEditor Component

In this article, let's understand how LiveEditor works.

const LiveEditor: React.FC = () => {
  const [contextOpened, setContextOpened] = React.useState(false);
  const [contextPosition, setContextPosition] = React.useState({
    x: 0,
    y: 0,
  });

  return (
    <StyledLiveEditor
      onContextMenuCapture={e => {
        e.preventDefault();
        setContextOpened(true);
        setContextPosition({ x: e.pageX, y: e.pageY });
      }}
      onClick={() => setContextOpened(false)}
    >
      <div
        style={{
          position: "fixed",
          top: contextPosition.y,
          left: contextPosition.x,
          zIndex: 100,
        }}
      >
        <Menu opened={false} shadow="sm">
          <Menu.Dropdown>
            <Menu.Item>
              <Text size="xs">Download as Image</Text>
            </Menu.Item>
            <Menu.Item>
              <Text size="xs">Zoom to Fit</Text>
            </Menu.Item>
            <Menu.Item>
              <Text size="xs">Rotate</Text>
            </Menu.Item>
          </Menu.Dropdown>
        </Menu>
      </div>

      <View />
    </StyledLiveEditor>
  );
};

Hang on minute? where is the LiveEditor? On the first look, it might be apparent but what are interested in is here: View

const View = () => {
  const viewMode = useConfig(state => state.viewMode);

  if (viewMode === ViewMode.Graph) return <Graph />;
  if (viewMode === ViewMode.Tree) return <TreeView />;
  return null;
};

By this time, you must have understood the power off zustand to simplify the state management. useConfig is a zustand store.

A view mode that is header aka Toolbar is used to set the view type. You guessed it. We are now moving away from LiveEditor to Graph.

A rookie mistake here would be dump all the Graph and TreeView code in the same file, this only makes your life hard when it comes to maintenance.

Graph is in src/containers/Views/GraphView. Can the containers folder have Views? It it makes sense, so be it. Because this Views contains Graph and TreeView are in a way containers.

There is no strict rule to follow to place your files, you be the best judge and place them where it makes sense. You can move the files around as your project grows in size.

Graph

No wonder Graph is placed in containers/Views. It just has more modularity to it.

return (
    <>
      <Loading loading={loading} message="Painting graph..." />
      <StyledEditorWrapper
        $widget={isWidget}
        onContextMenu={e => e.preventDefault()}
        onClick={blurOnClick}
        key={String(gesturesEnabled)}
        $showRulers={rulersEnabled}
        {...bindLongPress()}
      >
        <Space
          onCreate={setViewPort}
          onContextMenu={e => e.preventDefault()}
          treatTwoFingerTrackPadGesturesLikeTouch={gesturesEnabled}
          pollForElementResizing
        >
          <GraphCanvas isWidget={isWidget} />
        </Space>
      </StyledEditorWrapper>
    </>
  );

Graph to GraphCanvas, Notice how the component we are interested is now changed GraphCanvas.

But why GraphCanvas? It is because Reaflow uses Canvas to render visualisations. Context matters here. Hence the name Canvas appended to GraphCanvas

const GraphCanvas = ({ isWidget }: GraphProps) => {
  const { validateHiddenNodes } = useToggleHide();
  const setLoading = useGraph(state => state.setLoading);
  const centerView = useGraph(state => state.centerView);
  const direction = useGraph(state => state.direction);
  const nodes = useGraph(state => state.nodes);
  const edges = useGraph(state => state.edges);

  const [paneWidth, setPaneWidth] = React.useState(2000);
  const [paneHeight, setPaneHeight] = React.useState(2000);

  const onLayoutChange = React.useCallback(
    (layout: ElkRoot) => {
      if (layout.width && layout.height) {
        const areaSize = layout.width * layout.height;
        const changeRatio = Math.abs((areaSize * 100) / (paneWidth * paneHeight) - 100);

        setPaneWidth(layout.width + 50);
        setPaneHeight((layout.height as number) + 50);

        setTimeout(() => {
          validateHiddenNodes();
          window.requestAnimationFrame(() => {
            if (changeRatio > 70 || isWidget) centerView();
            setLoading(false);
          });
        });
      }
    },
    [isWidget, paneHeight, paneWidth, centerView, setLoading, validateHiddenNodes]
  );

  return (
    <Canvas
      className="jsoncrack-canvas"
      onLayoutChange={onLayoutChange}
      node={p => <CustomNode {...p} />}
      edge={p => <CustomEdge {...p} />}
      nodes={nodes}
      edges={edges}
      maxHeight={paneHeight}
      maxWidth={paneWidth}
      height={paneHeight}
      width={paneWidth}
      direction={direction}
      layoutOptions={layoutOptions}
      key={direction}
      pannable={false}
      zoomable={false}
      animated={false}
      readonly={true}
      dragEdge={null}
      dragNode={null}
      fit={true}
    />
  );
};

Remember when we were looking to understanding what was responsible for generating nodes and edges in Part 4.2.1.1 — JsonEditor — debouncedUpdateJson

GraphCanvas uses nodes and edges to render the visualisation.

This is how what you entered as a json in code editor visualised using Reaflow in the LiveEditor.

I just love how efficiently props management is done using zustand.

Conclusion

We navigated between few files to understand the workings for LiveEditor and saw how powerful zustand can be when it comes to state management.

Part 5 would be about Toolbar and Bottombar.

Part 6 - How the payments and subscription is integrated into this product using lemonsqueezy.

Thank you for reading till the end. If you have any questions or need help with a project, feel free to reach out to me at ram@tthroo.com

JSONCrack Codebase Analysis — Part 4.2.1.1 — JsonEditor — debouncedUpdateJson

TThroo-Dev — Sun, 07 Jan 2024 17:19:06 +0000

jsoncrack is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

Part 4.2.1 talks in detail about JsonEditor and MonacoEditor and we also look into understanding the MonacoEditor.

In this article, we will get a better understanding of debouncedUpdateJson(json)

A recap:

setContents: async ({ contents, hasChanges = true, skipUpdate = false }) => {
    try {
      set({ ...(contents && { contents }), error: null, hasChanges });

      const isFetchURL = window.location.href.includes("?");
      const json = await contentToJson(get().contents, get().format);

      if (!useConfig.getState().liveTransformEnabled && skipUpdate) return;

      if (get().hasChanges && contents && contents.length < 80_000 && !isIframe() && !isFetchURL) {
        sessionStorage.setItem("content", contents);
        sessionStorage.setItem("format", get().format);
        set({ hasChanges: true });
      }

      debouncedUpdateJson(json);
    } catch (error: any) {
      if (error?.mark?.snippet) return set({ error: error.mark.snippet });
      if (error?.message) set({ error: error.message });
      useJson.setState({ loading: false });
      useGraph.setState({ loading: false });
    }
  },

We went into great details about the above code snippet in Part 4.2.1 except for debouncedUpdateJson(json);.

What is inside the debouncedUpdateJson?

const debouncedUpdateJson = debounce((value: unknown) => {
  useGraph.getState().setLoading(true);
  useJson.getState().setJson(JSON.stringify(value, null, 2));
}, 800);

Just two calls to zustand stores, named as useGraph and useJson.

useJson.getState().setJson(JSON.stringify(value, null, 2));

setJson has a side effect, it updates graph

setJson: json => {
    set({ json, loading: false });
    useGraph.getState().setGraph(json);
  },

This article strictly goes into only details of the debouncedUpdateJson and the side effects involved in it. This article does not provide a complete overview of the zustand stores yet, because we do not see a need yet. When trying to understand a new codebase, set a well defined scope.

But you might be wondering, what is a graph?

The following screenshot helps you understand what we are referring to and talking about.

Graph is a view mode.

But why to have 2 stores, one for json and one for graph? the answer is, separation of concern. Json is used in monaco editor to load the json code and graph is used to render the mindmap or visualisation. Beginners would use one store to deal with json and graph in a single file. Don't do it. Separate your concerns through variables names, files names, folder organisation. It helps you in the long run.

useGraph

useGraph has a lot going on, but we will look for setGraph as this is the side effect performed in setJson explained above.

useGraph.getState().setGraph(json);

setGraph has the following code:

setGraph: (data, options) => {
    const { nodes, edges } = parser(data ?? useJson.getState().json);

    if (get().collapseAll) {
      set({ nodes, edges, ...options });
      get().collapseGraph();
    } else {
      set({
        nodes,
        edges,
        collapsedParents: [],
        collapsedNodes: [],
        collapsedEdges: [],
        graphCollapsed: false,
        ...options,
      });
    }
  },

You go step by step, exploring your unknowns.

parser

parser is imported on top of the file from src/lib/utils/json/jsonParser we saw a similar strategy for helpers that was using jsonAdapter.

It is a good practice to put all your helpers in a file. Initially you might not see a need to put certains functions in a file, but as you add more code/features, you should make the best judgement about which functions can be moved into a file.

You will reduce number of lines in a file, you do not want to end up 3k+ lines of code in a single file, rookie mistake. I have seen it before. My thoughts on such a file "God Almighty!?"

export function parser(jsonStr: string): Graph {
  try {
    const states = initializeStates();
    const parsedJsonTree = parseTree(jsonStr);

    if (!parsedJsonTree) {
      throw new Error("Invalid document");
    }

    traverse({ states, objectToTraverse: parsedJsonTree });

    const { notHaveParent, graph } = states;

    if (notHaveParent.length > 1 && parsedJsonTree.type !== "array") {
      const emptyNode = { id: null, text: "", isEmpty: true, data: {} };
      const emptyId = addNodeToGraph({ graph, ...emptyNode });

      notHaveParent.forEach(childId => addEdgeToGraph(graph, emptyId, childId));
    }

    if (states.graph.nodes.length === 0) {
      if (parsedJsonTree.type === "array") {
        addNodeToGraph({ graph: states.graph, text: "[]" });
      } else {
        addNodeToGraph({ graph: states.graph, text: "{}" });
      }
    }

    states.graph.nodes = states.graph.nodes.map(node => ({
      ...node,
      path: getNodePath(states.graph.nodes, states.graph.edges, node.id),
    }));

    return states.graph;
  } catch (error) {
    console.error(error);
    return { nodes: [], edges: [] };
  }
}

Take some time to try to understand the code above. It makes sense to introduce Reaflow. Reaflow is used to show the nodes and edges and form a mindmap.

Unknowns in the above code are:

parseTree - This comes from jsonc-parser
Traverse: a core util that deals with creating nodes and edges.

We could go into details of this, but the point of these tutorials is to understand how open sourced software is built ,the best practices around file structure, tech stack used.

Looking at traverse file's code you will understand that it has a lot of cases handled, all to build nodes and edges. Again be comfortable with this. You know how the core is now put together.

If you were to contribute to jsoncrack, atleast you now where to look for, how the codebase is organised.

Any changes in core should be dealt with extra care. It is named core for a good reason.

So, in the end parser returns a graph with nodes and edges that are used in Reaflow to render a map.

Conclusion

Setting a json has a side effect that deals with updating graph. This graph with nodes and edges is used to Reaflow to render a mindmap. We touched the core utils when we looked at traverse functionality. You do not see any comments in the traverse file, because code is self explanatory by using variable names and function names that fit into the context.

In part 4.3, we will look at LiveEditor and understand how these nodes and edges in graph are put together to laod a visualisation.

In the upcoming parts, we will also talk about Toolbar and bottombar. This is where we can understand how the payments and subscription is integrated into this product using lemonsqueezy

And that would be the end of jsoncrack codebase analysis.

The next codebase to analyse is cal.com. This repo is larger than jsoncrack. It is a monorepo with packages and lots of stuff going behind the scenes.

Our approach and the intention behind writing these analysis of open source codebase is not get into complete details and understand how the core works, but to understand the design patterns, file structure, tech stack used so you can take these learnings and apply them in your projects. Because every project deals with different business logic, it would not make sense to get into business logic but rather the structure around it, in essence, laying down the foundation.

Thank you for reading till the end. If you have any questions or need help with a project or looking for an IT partner for your business, feel free to reach out to us at ram@tthroo.com

JSONCrack Codebase Analysis — Part 4.2.1 — Editor — JsonEditor Component

TThroo-Dev — Sat, 06 Jan 2024 23:11:51 +0000

jsoncrack is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

Part 4.1 talks about Panes component that has this component JsonEditor

Do what does JsonEditor do? the below image shows what it is responsible for.

JsonEditor.tsx has about 23 lines at the time of writing this article.

import React from "react";
import styled from "styled-components";
import { MonacoEditor } from "src/components/MonacoEditor";

// import { PromptInput } from "src/components/PromptInput";

const StyledEditorWrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  user-select: none;
`;

export const JsonEditor: React.FC = () => {
  return (
    <StyledEditorWrapper>
      {/* <PromptInput /> */}
      <MonacoEditor />
    </StyledEditorWrapper>
  );
};

export default JsonEditor;

Aye, commented code? anyways, You see this tool uses popular MonacoEditor, a browser based open source code editor from Microsoft.

MonacoEditor component

Now notice how we are now moving away from JsonEditor component to MonacoEditor. The author could have just put all the code related to MonacoEditor in this JsonEditor component, but no, it has been moved to components folder. One possible answer could be jsoncrack author must have decided to include PromtInput as part of JsonEditor, but it was commented. Purely, to add more features along side the monaco editor, I think MonacoEditor is made a separate new component.

Let's now understand what MonacoEditor does.

Top down approach, this component returns the following:

return (
    <StyledWrapper>
      <Editor
        height="100%"
        language={fileType}
        theme={theme}
        value={contents}
        options={editorOptions}
        onValidate={errors => setError(errors[0]?.message)}
        onChange={contents => setContents({ contents, skipUpdate: true })}
        loading={<Loading message="Loading Monaco Editor..." loading />}
      />
    </StyledWrapper>
  );

Let's go through each prop in detail.

`language={fileType}`

Where is fileType coming from? Checking the MonacoEditor.tsx code, we see

const fileType = useFile(state => state.format);

useFile? no worries, it is zustand store.

This useFile has initial state as follows

const initialStates = {
  fileData: null as File | null,
  format: FileFormat.JSON,
  contents: defaultJson,
  error: null as any,
  hasChanges: false,
  jsonSchema: null as object | null,
};

Always look for what you are interested in, do not let the extra props, additions functions, fancy typescript type scare you away. It helps you stay focused. so what we are looking for is FileFormat.JSON

FileFormat? it is simple enum file. This goes to say that jsoncrack author follows standard coding practices in not using magical strings or numbers instead relies on enums.

Notice how we approached in understanding fileType prop, it was unknown but we carefully looked at imports and specifically looked for it without letting the code inside useFile scare us away :)

theme={theme}

Let's take the same approach as we did for fileType.

const theme = useConfig(state => (state.darkmodeEnabled ? "vs-dark" : "light"));

you will find the above snippet here

What are the unknowns here? yes, useConfig

useConfig

We are specifically looking for an initialState with the prop darkModeEnabled

const initialStates = {
  darkmodeEnabled: false,
  collapseButtonVisible: true,
  childrenCountVisible: true,
  imagePreviewEnabled: true,
  liveTransformEnabled: true,
  gesturesEnabled: false,
  rulersEnabled: true,
  viewMode: ViewMode.Graph,
};

You will find the above code snippet here

So by default, darkmodeEnabled is set to false as part of initial state.

value={contents}

Let's take the same approach as we did for theme.

const contents = useFile(state => state.contents);

You will find the above code snippet here.

back to useFile, except this time we are interested in a different prop named contents.

useFile initialState

const initialStates = {
  fileData: null as File | null,
  format: FileFormat.JSON,
  contents: defaultJson,
  error: null as any,
  hasChanges: false,
  jsonSchema: null as object | null,
};

Pick what you are interested in, yes, contents. what is a defaulJson ? the answer is in import

This is how you find answers, You have to be patient. There is a back and forth jumping between different files, that is because author has defined such a pattern.

Meaning, all the zustand stores and inside a folder called store inside src. Large project complexity can be maintained well when you have well defined design pattern. You should keep it simple and know where to look for. Back to the code analysis now.

defaultJson is used to render some placeholder json. Notice how this is inside src/constants/data.ts. Again, I am praising the way it is organised.

options={editorOptions}

editorOptions are to provide your options for your monaco editor.

onValidate={errors => setError(errors[0]?.message)}

onValidate used to set errors in the useFile store

You can read more about it here

onChange={contents => setContents({ contents, skipUpdate: true })}

setContents has few side effects.

setContents: async ({ contents, hasChanges = true, skipUpdate = false }) => {
    try {
      set({ ...(contents && { contents }), error: null, hasChanges });

      const isFetchURL = window.location.href.includes("?");
      const json = await contentToJson(get().contents, get().format);

      if (!useConfig.getState().liveTransformEnabled && skipUpdate) return;

      if (get().hasChanges && contents && contents.length < 80_000 && !isIframe() && !isFetchURL) {
        sessionStorage.setItem("content", contents);
        sessionStorage.setItem("format", get().format);
        set({ hasChanges: true });
      }

      debouncedUpdateJson(json);
    } catch (error: any) {
      if (error?.mark?.snippet) return set({ error: error.mark.snippet });
      if (error?.message) set({ error: error.message });
      useJson.setState({ loading: false });
      useGraph.setState({ loading: false });
    }
  },

The prop setContents({ contents, skipUpdate: true }) only sets skipUpdate and contents, setContents: async ({ contents, hasChanges = true, skipUpdate = false }) hasChanges is defaulted to true.

set({ ...(contents && { contents }), error: null, hasChanges }); updates the contents in the useFile store.

const isFetchURL = window.location.href.includes("?"); apparently, jsoncrack does not auto save your edits. You have to click on save to cloud in the BottomBar to save your json and then you will see your url changing to something like https://jsoncrack.com/editor?json=0d15b1a928fdbd3c3283d1e6

I have done to understand what isFetchURL does. now we know why.

const json = await contentToJson(get().contents, get().format);

contentToJson function name indicates that it takes monacoeditor content and converts it to json. Let's see what code is.

This contentToJson is coming from https://github.com/AykutSarac/jsoncrack.com/blob/main/src/lib/utils/json/jsonAdapter.ts#L34.

Notice how we are using a file from src/lib/utils/json/jsonAdapter. Author could have just put this in MonacoEditor, but when you are interested and making efforts to organise your code to use lib/utils/json/jsonAdapter to put your helpers in a different file is how you level up your coding game. Nobody will teach you this. Seasoned devs always try to put helper functions where they belong.

const contentToJson = async (value: string, format = FileFormat.JSON): Promise<object> => {
  try {
    let json: object = {};

    if (format === FileFormat.JSON) json = parse(value);
    if (format === FileFormat.YAML) json = load(value) as object;
    if (format === FileFormat.XML) json = jxon.stringToJs(value);
    if (format === FileFormat.TOML) json = toml.parse(value);
    if (format === FileFormat.CSV) json = await csv2json(value);
    if (format === FileFormat.XML && keyExists(json, "parsererror")) throw Error("Unknown error!");

    if (!json) throw Error("Invalid JSON!");

    return Promise.resolve(json);
  } catch (error: any) {
    throw error;
  }
};

Okay, it is simple parse on contents from monaco editor since contents are json.

if (!useConfig.getState().liveTransformEnabled && skipUpdate) return;

This is directly related to the BottomBar as shown in image, notice how zustand makes it easy to establish state communication between Editor component and Bottombar

if (get().hasChanges && contents && contents.length < 80_000 && !isIframe() && !isFetchURL) {
        sessionStorage.setItem("content", contents);
        sessionStorage.setItem("format", get().format);
        set({ hasChanges: true });
      }

So far, hasChanges is true, contents has got some data, isIframe is false and isFetchURL is false. This if block gets executed and saves the data into sessionStorage.

Finally

debouncedUpdateJson(json);

debouncedupdateJson has the following code:

const debouncedUpdateJson = debounce((value: unknown) => {
  useGraph.getState().setLoading(true);
  useJson.getState().setJson(JSON.stringify(value, null, 2));
}, 800);

It is a super common pattern to use debounce when you are dealing with user input and to save the data. Read more about it here

useJson.getState().setJson deserves a new article 4.2.1 because of the following code snippets and the side effects involved with useGraph

const useJson = create<JsonStates & JsonActions>()((set, get) => ({
  ...initialStates,
  getJson: () => get().json,
  setJson: json => {
    set({ json, loading: false });
    useGraph.getState().setGraph(json);
  },
  clear: () => {
    set({ json: "", loading: false });
    useGraph.getState().clearGraph();
  },
}));

The above snippet is from here

Once we understand, useJson and useGraph, it lays a foundation to further explore different use cases involved with yaml, xml, csv formats as well.

Conclusion:

We looked at how you need to be specific about what you are looking for, especially when you have lot of unknowns, do not let this scare you away, I keep saying this, you have to comfortable with not knowing enough YET. We looked at props used in MonacoEditor, a lot of the props were straight forward. Because of the complexity and side effects involved in debouncedJson's useGraph and useJson, we decided to make a new article 4.2.1.1 talking in depth about useJson.getState().setJson and the side effect involving setGraph. Thank you for reading till the end. If you have any questions or need help with a project or looking for an IT partner for your business, feel free to reach out to us at ram@tthroo.com

JSONCrack Codebase Analysis - Part 4.1 - Editor - Panes Component

TThroo-Dev — Fri, 05 Jan 2024 22:12:12 +0000

jsoncrack.com is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

Part 4 talks about how Editor component is configured for the JSONCrack. It has the components overview, but let's dig deeper into how these components are entagled together. Interesting stuff from here on as this is where we will see the usage of zustand, hooks and draw more conclusions about design patterns used in this codebase.

In this post, let's understand the editor's Panes component used in jsoncrack.com.

Panes

Panes comprise of two main components. One is the json editor and the other component renders the json as a mindmap

const Panes: React.FC = () => {
  const fullscreen = useGraph(state => state.fullscreen);

  return (
    <StyledEditor proportionalLayout={false}>
      <Allotment.Pane
        preferredSize={450}
        minSize={fullscreen ? 0 : 300}
        maxSize={800}
        visible={!fullscreen}
      >
        <JsonEditor />
      </Allotment.Pane>
      <Allotment.Pane minSize={0}>
        <LiveEditor />
      </Allotment.Pane>
    </StyledEditor>
  );
};

In the above code, Let's understand what useGraph is.

[useGraph](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/store/useGraph.ts) is imported from src/store/useGraph.

useGraph is a zustand store. You could be tempted to understand useGraph fully but hang on, we will get there. Let's take a step back and check first line inside Panes component.

const fullscreen = useGraph(state => state.fullscreen);

It only relies on one value called fullscreen and that's all we have to know for now. useGraph has a lot going on, more on that in the later of part of this series.

fullscreen is used to set minSize prop in Panes component, then we have JsonEditor and LiveEditor

Conclusion:

When you are studying a new codebase, know when to stop. You cannot consume it all in one go. Which is what we did with useGraph, we just looked at it at high level and learnt that it uses zustand store and Panes only depends on fullscreen prop. In part 4.2, we will look at JsonEditor and in part 4.3, we will look at LiveEditor, this, in turn, gives us a better understanding as to how the editor changes trigger a live reload for the mindmap and how the stores are used to establish communication between these two components. It is going to be fun understanding this complicated entanglement.

JSONCrack Codebase Analysis — Part 4 — Editor

TThroo-Dev — Thu, 04 Jan 2024 20:17:04 +0000

jsoncrack.com is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

In this post, let’s understand the editor functionality used in jsoncrack.com.

Open src/pages/editor.tsx in a new tab and let’s take the top down approach. Let’s first look into the components used.

<EditorWrapper>
      <StyledEditorWrapper>
        <Head>
          <title>Editor | JSON Crack</title>
          {hasQuery && <meta name="robots" content="noindex,nofollow" />}
        </Head>
        <StyledPageWrapper>
          <Toolbar />
          <StyledEditorWrapper>
            <Panes />
          </StyledEditorWrapper>
        </StyledPageWrapper>
        <BottomBar />
      </StyledEditorWrapper>
</EditorWrapper>

EditorWrapper

This is the first component used in page loaded when you visit https://jsoncrack.com/editor and contains the following

export const EditorWrapper: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);

  return (
    <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
      <MantineProvider forceColorScheme={darkmodeEnabled ? "dark" : "light"}>
        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
      </MantineProvider>
    </ThemeProvider>
  );
};

Providers are imported at the top of the file.

import { MantineProvider } from "@mantine/core";
import { ThemeProvider } from "styled-components";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

Toolbar

Toolbar is what you see as header/navigation on top of the page

The code is as below:

<Styles.StyledTools>
      {isWidget && <Logo />}
      {!isWidget && (
        <Group gap="xs" justify="left" w="100%" style={{ flexWrap: "nowrap" }}>
          <Styles.StyledToolElement title="JSON Crack">
            <Flex gap="xs" align="center" justify="center">
              <JSONCrackLogo fontSize="1.2em" />
            </Flex>
          </Styles.StyledToolElement>

          <Select
            defaultValue="json"
            size="xs"
            value={format}
            onChange={e => setFormat(e as FileFormat)}
            miw={80}
            w={120}
            data={[
              { value: FileFormat.JSON, label: "JSON" },
              { value: FileFormat.YAML, label: "YAML" },
              { value: FileFormat.XML, label: "XML" },
              { value: FileFormat.TOML, label: "TOML" },
              { value: FileFormat.CSV, label: "CSV" },
            ]}
          />

          <ViewModeMenu />
          <Styles.StyledToolElement title="Import File" onClick={() => setVisible("import")(true)}>
            Import
          </Styles.StyledToolElement>
          <ViewMenu />
          <ToolsMenu />
          <Styles.StyledToolElement title="Cloud" onClick={() => setVisible("cloud")(true)}>
            Cloud
          </Styles.StyledToolElement>
          <Styles.StyledToolElement title="Download as File" onClick={handleSave}>
            Download
          </Styles.StyledToolElement>
        </Group>
      )}
      <Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
        {!premium && !isWidget && (
          <Styles.StyledToolElement onClick={() => setVisible("premium")(true)}>
            <Text display="flex" c="teal" fz="xs" fw="bold" style={{ textAlign: "center", gap: 4 }}>
              <MdWorkspacePremium size="18" />
              Get Premium
            </Text>
          </Styles.StyledToolElement>
        )}

        <SearchInput />
        {!isWidget && (
          <>
            <Styles.StyledToolElement
              title="Save as Image"
              onClick={() => setVisible("download")(true)}
            >
              <FiDownload size="18" />
            </Styles.StyledToolElement>
            <ZoomMenu />
            <AccountMenu />
            <OptionsMenu />
            <Styles.StyledToolElement
              title="Fullscreen"
              $hide={isWidget}
              onClick={fullscreenBrowser}
            >
              <AiOutlineFullscreen size="18" />
            </Styles.StyledToolElement>
          </>
        )}
      </Group>
    </Styles.StyledTools>
  );
};

Code above is self explanatory, the options that you see in the toolbar are listed here.

Panes

Panes comprise of two main components, JsonEditor and LiveEditor. I thought why not name this to LivePreview, but then I realised you could edit the mindmap from the livepreview — this is only possible when you are on paid plan, well it isn’t exactly a preview anymore. is it? Yup, naming conventions and their meaning matter. Seasoned devs have constructive discourse about variable or function naming conventions.

“Hang on a minute, what do you mean constructive discourse? appendText() appends a random text and returns the updated string.” Right mate, shouldn’t it be appendAndGetText() or even better, write two functions, one for append and one for get. This is just an example. Anyways, let’s get back to the code now.

<StyledEditor proportionalLayout={false}>
      <Allotment.Pane
        preferredSize={450}
        minSize={fullscreen ? 0 : 300}
        maxSize={800}
        visible={!fullscreen}
      >
        <JsonEditor />
      </Allotment.Pane>
      <Allotment.Pane minSize={0}>
        <LiveEditor />
      </Allotment.Pane>
</StyledEditor>

BottomBar

BottomBar has features like Valid, Save to cloud, Private, Share, Live Transform etc.,

<StyledBottomBar>
      {data?.name && (
        <Head>
          <title>{data.name} | JSON Crack</title>
        </Head>
      )}
      <StyledLeft>
        <StyledBottomBarItem onClick={toggleEditor}>
          <BiSolidDockLeft />
        </StyledBottomBarItem>

        {fileName && (
          <StyledBottomBarItem onClick={() => setVisible("cloud")(true)}>
            <VscSourceControl />
            {fileName}
          </StyledBottomBarItem>
        )}
        <StyledBottomBarItem>
          {error ? (
            <Popover width="auto" shadow="md" position="top" withArrow>
              <Popover.Target>
                <Flex align="center" gap={2}>
                  <VscError color="red" size={16} />
                  <Text c="red" fw={500} fz="xs">
                    Invalid
                  </Text>
                </Flex>
              </Popover.Target>
              <Popover.Dropdown
                style={{
                  pointerEvents: "none",
                }}
              >
                <Text size="xs">{error}</Text>
              </Popover.Dropdown>
            </Popover>
          ) : (
            <Flex align="center" gap={2}>
              <MdOutlineCheckCircleOutline />
              <Text size="xs">Valid</Text>
            </Flex>
          )}
        </StyledBottomBarItem>
        {(data?.owner_email === user?.email || (!data && user)) && (
          <StyledBottomBarItem onClick={handleSaveJson} disabled={isUpdating || error}>
            {hasChanges || !user ? <AiOutlineCloudUpload /> : <AiOutlineCloudSync />}
            {hasChanges || !user ? (query?.json ? "Unsaved Changes" : "Save to Cloud") : "Saved"}
          </StyledBottomBarItem>
        )}
        {data?.owner_email === user?.email && (
          <StyledBottomBarItem onClick={setPrivate} disabled={isUpdating}>
            {isPrivate ? <AiOutlineLock /> : <AiOutlineUnlock />}
            {isPrivate ? "Private" : "Public"}
          </StyledBottomBarItem>
        )}
        <StyledBottomBarItem
          onClick={() => setVisible("share")(true)}
          disabled={isPrivate || !data}
        >
          <AiOutlineLink />
          Share
        </StyledBottomBarItem>
        {liveTransformEnabled ? (
          <StyledBottomBarItem onClick={() => toggleLiveTransform(false)}>
            <VscSync />
            <Text fz="xs">Live Transform</Text>
          </StyledBottomBarItem>
        ) : (
          <StyledBottomBarItem onClick={() => toggleLiveTransform(true)}>
            <VscSyncIgnored />
            <Text fz="xs">Manual Transform</Text>
          </StyledBottomBarItem>
        )}
        {!liveTransformEnabled && (
          <StyledBottomBarItem onClick={() => setContents({})}>
            <TbTransform />
            Transform
          </StyledBottomBarItem>
        )}
      </StyledLeft>

      <StyledRight>
        <StyledBottomBarItem>Nodes: {nodeCount}</StyledBottomBarItem>
        <StyledBottomBarItem onClick={() => setVisible("review")(true)}>
          <VscFeedback />
          Feedback
        </StyledBottomBarItem>
      </StyledRight>
    </StyledBottomBar>

There is a lot happening in the above code, but don’t worry. I will explain each of these components in detail in the upcoming tutorials.

Conclusion

We looked at 3 main components in Editor for jsoncrack.com, Toolbar, Panes, BottomBar. In the upcoming tutorials, I will pick each of these components and go into details such as custom hooks used and how this application zustand configured. If you have any questions, feel free to email us at ram@tthroo.com.

JSONCrack Codebase Analysis — Part 3 — Signin

TThroo-Dev — Wed, 03 Jan 2024 23:03:50 +0000

jsoncrack.com is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

In this post, let’s understand the signin functionality used in jsoncrack.com.

Signin

src/pages/sign-in.tsx has the code. Again, let’s do a top down approach.

You will see this file does the following export at the end of file

const SignIn = () => {
  const { isReady, push, query } = useRouter();
  const session = useSession();
  const isPasswordReset = query?.type === "recovery" && !query?.error;

  React.useEffect(() => {
    if (isIframe()) push("/");
    if (isReady && session && !isPasswordReset) push("/editor");
  }, [isReady, session, push, isPasswordReset]);

  return (
    <Layout>
      <Head>
        <title>Sign In - JSON Crack</title>
      </Head>
      <Paper mt={50} mx="auto" maw={400} p="lg" withBorder>
        <AuthenticationForm />
      </Paper>
      <Center my="xl">
        <Anchor component={Link} prefetch={false} href="/sign-up" c="dark" fw="bold">
          Don&apos;t have an account?
        </Anchor>
      </Center>
    </Layout>
  );
};

export default SignIn;

Layout, Head are known components. Paper is an import from @mantine/core. The real stuff is in AuthenticationForm.

Authentication Form

export function AuthenticationForm(props: PaperProps) {
  const setSession = useUser(state => state.setSession);
  const [loading, setLoading] = React.useState(false);
  const [userData, setUserData] = React.useState({
    name: "",
    email: "",
    password: "",
  });

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);

    supabase.auth
      .signInWithPassword({
        email: userData.email,
        password: userData.password,
      })
      .then(({ data, error }) => {
        if (error) return toast.error(error.message);
        setSession(data.session);
      })
      .finally(() => setLoading(false));
  };

  const handleLoginClick = (provider: "github" | "google") => {
    supabase.auth.signInWithOAuth({
      provider,
      options: { redirectTo: "https://jsoncrack.com/editor" },
    });
  };

  return (
    <Paper {...props}>
      <form onSubmit={onSubmit}>
        <Stack>
          <TextInput
            name="email"
            required
            label="Email"
            placeholder="hello@jsoncrack.com"
            value={userData.email}
            onChange={event => setUserData(d => ({ ...d, email: event.target.value }))}
            radius="sm"
            style={{ color: "black" }}
          />

          <PasswordInput
            name="password"
            required
            label="Password"
            placeholder="∗∗∗∗∗∗∗∗∗∗∗"
            value={userData.password}
            onChange={event => setUserData(d => ({ ...d, password: event.target.value }))}
            radius="sm"
            style={{ color: "black" }}
          />

          <Button color="dark" type="submit" radius="sm" loading={loading}>
            Sign in
          </Button>

          <Stack gap="sm" mx="auto" align="center">
            <Anchor component={Link} prefetch={false} href="/forgot-password" c="dark" size="xs">
              Forgot your password?
            </Anchor>
          </Stack>
        </Stack>
      </form>

      <Divider my="lg" />

      <Stack mb="md" mt="md">
        <Button
          radius="sm"
          leftSection={<AiOutlineGoogle size="20" />}
          onClick={() => handleLoginClick("google")}
          color="red"
          variant="outline"
        >
          Sign in with Google
        </Button>
        <Button
          radius="sm"
          leftSection={<AiOutlineGithub size="20" />}
          onClick={() => handleLoginClick("github")}
          color="dark"
          variant="outline"
        >
          Sign in with GitHub
        </Button>
      </Stack>
    </Paper>
  );
}

It is a simple component with input elements and social login buttons.

Sign in using email

onSubmit function is called when you try to login with your email and password.
As you can see supabase is used to sign in with password

Sign in using Google or Github

handleLoginClick function is called when you try to login with either Google or Github account.
As you can see supabase is used to sign in with Google or Github.

We recommend to check the supabase docs to read further how you can easily solve/implement Auth into your application.

Conclusion

Supabase has simplified the Auth used in jsoncrack.com. We also see the how this sign-in component used @mantine/core components. If you have any questions, feel free to email us at ram@tthroo.com

JSONCrack Codebase Analysis - Part 2 - Landing Page

TThroo-Dev — Tue, 02 Jan 2024 21:10:18 +0000

jsoncrack.com is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

In this post, let’s understand the code responsible to load the jsoncrack.com.

The file, we are interested in, is located at src/pages/index.tsx

If you are wondering what is pages folder, checkout the following documentation:

Pages and Layout

How to read code?

As a developer, you have to read other people’s code. I recommend top-down approach. If the codebase is small in size, you can easily get familiarised with the code. But, if the codebase is large, ideally, you should only consider those files that are directly related to the bug fix or feature upgrade you are handling. Small steps until eventually you get the big picture. Let’s follow the similar strategy here.

Considering top-down approach, since we are dealing with a Next.js project, I would look at the HTML code returned by this src/pages.index.tsx

export const HomePage = () => {
    const [ads, setAds] = React.useState(false);

    return (
    <Layout>
      <Head>
        <title>JSON Crack | Visualize Instantly Into Graphs</title>
      </Head>
      <HeroSection />
      <Script src="https://m.servedby-buysellads.com/monetization.js" onLoad={() => setAds(true)} />
    </Layout>
  );
};

export default HomePage;

Now let’s see what HeroSection component looks like

const HeroSection = () => (
  <StyledHeroSection id="hero-section">
    <StyledHeroSectionBody>
      <Stack w="100%" mx="auto" align="center">
        <StyledHeroTitle>
          Understand your{" "}
          <StyledHighlightedText>
            <Typewriter
              words={["JSON", "YAML", "XML", "TOML", "CSV"]}
              typeSpeed={100}
              deleteSpeed={60}
              delaySpeed={2000}
              loop
            />
          </StyledHighlightedText>
          <br />
          better by visualizing
        </StyledHeroTitle>

        <StyledHeroText>
          Visualize, analyze, and manipulate data with ease, a versatile and powerful tool for data
          representation and exploration.
        </StyledHeroText>
        <Group gap="xl">
          <Button
            color="orange"
            variant="light"
            component={Link}
            href="/editor"
            fw="bold"
            rightSection={<FaChevronRight />}
            size="xl"
            style={{ border: "2px solid orange" }}
            visibleFrom="md"
          >
            GO TO EDITOR
          </Button>
          <Button
            color="orange"
            variant="light"
            component={Link}
            href="/editor"
            fw="bold"
            rightSection={<FaChevronRight />}
            size="md"
            style={{ border: "2px solid orange" }}
            hiddenFrom="md"
          >
            GO TO EDITOR
          </Button>
        </Group>
      </Stack>
    </StyledHeroSectionBody>
  </StyledHeroSection>
);

Tags like StyledHeroSection, StyledHeroSectionBody indicate that this project uses styled-components.

Typewriter component is used

Stack, Button, Group are from Mantine

How to find what packages are used?

You can figure this out from the imports used.

import { Button, Group, Stack, Text } from "@mantine/core";
import styled from "styled-components";
import { Typewriter } from "react-simple-typewriter";

More over, a nice detailed explanation about tech stack used is provided in CONTRIBUTING.md

Now HeroSection code snippet from above is responsible for the following screen

Be comfortable with the fact that you do not know everything about the code you are currently dealing with.

But what about the header?

Yes, let’s look at how that is configured in the next section.

Layout

Layout component from src/layout/Layout has the following code:

import React from "react";
import { MantineProvider } from "@mantine/core";
import styled, { ThemeProvider } from "styled-components";
import { lightTheme } from "src/constants/theme";
import { Navbar } from "../Navbar";

const StyledLayoutWrapper = styled.div`
  padding-bottom: 48px;
`;

const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <MantineProvider forceColorScheme="light">
      <ThemeProvider theme={lightTheme}>
        <StyledLayoutWrapper>
          <Navbar />
          {children}
        </StyledLayoutWrapper>
      </ThemeProvider>
    </MantineProvider>
  );
};

export default Layout;

Yes, there are lot of unknowns at this point in time in the above code. You could be wondering what is MantineProvider or ThemeProvider but focus on what you are interested to find out, i.e., header component. You can tell Navbar is coming from src/layout/Navbar/index.tsx

export const Navbar = () => {
  const isAuthenticated = useUser(state => state.isAuthenticated);

  return (
    <StyledNavbarWrapper>
      <StyledNavbar>
        <Left>
          <JSONCrackLogo />
        </Left>
        <Middle className="hide-mobile">
          <Button component={Link} href="/pricing" variant="subtle" color="dark" radius="md">
            Pricing
          </Button>
          <Button
            component={Link}
            href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
            prefetch={false}
            variant="subtle"
            color="dark"
            radius="md"
          >
            VS Code
          </Button>
          <Button
            component={Link}
            href="/docs"
            prefetch={false}
            variant="subtle"
            color="dark"
            radius="md"
          >
            Docs
          </Button>
          <Menu trigger="hover" offset={15} withArrow>
            <Menu.Target>
              <Button
                variant="subtle"
                color="dark"
                radius="md"
                rightSection={<BiChevronDown size="18" />}
              >
                Legal
              </Button>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item component={Link} href="/legal/privacy" prefetch={false}>
                Privacy Policy
              </Menu.Item>
              <Menu.Item component={Link} href="/legal/terms" prefetch={false}>
                Terms and Conditions
              </Menu.Item>
              <Menu.Item component={Link} href="/legal/subscription-refund" prefetch={false}>
                Subscription
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item component="a" href="mailto:contact@jsoncrack.com">
                contact@jsoncrack.com
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
          <Menu trigger="hover" offset={15} withArrow>
            <Menu.Target>
              <Button
                variant="subtle"
                color="dark"
                radius="md"
                rightSection={<BiChevronDown size="18" />}
              >
                Social
              </Button>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item component="a" href="https://twitter.com/jsoncrack">
                𝕏 (Twitter)
              </Menu.Item>
              <Menu.Item component="a" href="https://discord.gg/yVyTtCRueq">
                Discord
              </Menu.Item>
              <Menu.Item component="a" href="https://www.linkedin.com/company/herowand">
                LinkedIn
              </Menu.Item>
              <Menu.Item component="a" href="https://github.com/AykutSarac/jsoncrack.com">
                GitHub
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        </Middle>
        <Right>
          {!isAuthenticated && (
            <Button
              component={Link}
              href="/sign-in"
              prefetch={false}
              variant="outline"
              color="grape.9"
              className="hide-mobile"
            >
              Login
            </Button>
          )}
          <Button color="grape.9" component={Link} href="/editor" prefetch={false}>
            Editor
          </Button>
        </Right>
      </StyledNavbar>
    </StyledNavbarWrapper>
  );
};

Nothing fancy going on in the above code, just a simple navbar with links pointing to different pages.

Conclusion:

We started off with src/pages/index.tsx as this is the code responsible to load what you see when you visit jsoncrack.com

Then, HeroSection and Layout are used as main components. There is Mantine configuration involved in Layout.

JSONCrack Codebase Analysis - Part 1. File Structure

TThroo-Dev — Mon, 01 Jan 2024 18:07:42 +0000

jsoncrack.com is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

Let's get started with File structure.

File name	Description
.github	This folder is used for Github actions and workflow. Resources: GitHub .github directory overview
public	Static assets like images are served using this public directory. Resources: Next.js assets, metadata, and CSS
src	The `src` folder is a convention used to organize your source code. It stands for "source" and typically contains the main codebase of your Next.js application. Resources: Next.js src directory
.dockerignore	Add a list of files to be ignored when building your app using DockerFile. Resources: Docker .dockerignore files
.env.development	Set defaults/environment variables for the development environment. Resources: Next.js environment variables
.env.production	Set defaults/environment variables for the production environment. Resources: Next.js environment variables
.eslintrc.json	Configuration to identify and report on patterns found in JavaScript, to avoid bugs and maintain code consistency. Resources: ESLint documentation and ESLint configuration files
.gitignore	Use this file to ignore files, folders that you do not wish to see in your Github repo
.prettierignore	.prettierignore can be used to ignore files or folders of your choice. Resources: Prettier ignore files
.prettierrc	Format your code on save using Prettier. Resources: Prettier configuration
CODE_OF_CONDUCT.md	Define standards for your community engagement. Resources: GitHub code of conduct
CONTRIBUTING.md	Contribution guide to follow, should you decide to contribute to this project. Resources: Contribution guide
Dockerfile	Provide instructions to build your docker image using this file. Resources: Dockerfile reference
LICENSE	License
README.md	Provides project set up instructions, features supported, etc.
default.conf	Nginx configuration file. Resources: Nginx configuration and Nginx beginners guide
docker-compose.yml	A YAML configuration for Docker. Resources: Docker Compose file reference
next-env.d.ts	This file should not be edited, generated with Next.js project set up. Resources: Use of next-env.d.ts in Next.js and Next.js TypeScript configuration
next.config.js	Next.js project configuration file. Resources: Next.js configuration
package.json	Manage project’s metadata and dependencies. Node.js project set up adds this file when a new project is initialized with `npm init`. Resources: [npm package.json configuration](https://docs.npmjs.com/cli