jsoncrack.com 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 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:
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.
Top comments (0)