JSONCrack Codebase Analysis - Part 2 - Landing Page
Tags: webdev, javascript, nextjs, opensource
Published: 2024-01-02 21:10:18

[jsoncrack.com](https://jsoncrack.com/) is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

We, at [TThroo](https://tthroo.com/), 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 post, let’s understand the code responsible to load the [jsoncrack.com](https://jsoncrack.com/).

![jsoncrack landing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxknfwbetdy5gkozhde4.png)

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](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts)

## 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`

```jsx
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

```jsx
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](https://styled-components.com/).

[Typewriter](https://www.npmjs.com/package/typewriter-effect) component is used

`Stack, Button, Group` are from [Mantine](https://mantine.dev/)

## How to find what packages are used?

You can figure this out from the imports used.

```jsx
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](https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md)**

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

 

![test.PNG](https://tthroo.com/images/posts/post-2.png)

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

But what about the header?

![test2.PNG](https://tthroo.com/images/posts/post-2-1.png)

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

## Layout

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

```jsx
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` 

```jsx
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](https://jsoncrack.com/)

Then, `HeroSection` and `Layout` are used as main components. There is [Mantine](https://mantine.dev/) configuration involved in `Layout`.