JSONCrack Codebase Analysis - Part 1. File Structure


3 min read

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.

Let's get started with File structure.

File structure

File nameDescription
.githubThis folder is used for Github actions and workflow. Resources: GitHub .github directory overview
publicStatic assets like images are served using this public directory. Resources: Next.js assets, metadata, and CSS
srcThe 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
.dockerignoreAdd a list of files to be ignored when building your app using DockerFile. Resources: Docker .dockerignore files
.env.developmentSet defaults/environment variables for the development environment. Resources: Next.js environment variables
.env.productionSet defaults/environment variables for the production environment. Resources: Next.js environment variables
.eslintrc.jsonConfiguration to identify and report on patterns found in JavaScript, to avoid bugs and maintain code consistency. Resources: ESLint documentation and ESLint configuration files
.gitignoreUse 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
.prettierrcFormat your code on save using Prettier. Resources: Prettier configuration
CODE_OF_CONDUCT.mdDefine standards for your community engagement. Resources: GitHub code of conduct
CONTRIBUTING.mdContribution guide to follow, should you decide to contribute to this project. Resources: Contribution guide
DockerfileProvide instructions to build your docker image using this file. Resources: Dockerfile reference
README.mdProvides project set up instructions, features supported, etc.
default.confNginx configuration file. Resources: Nginx configuration and Nginx beginners guide
docker-compose.ymlA YAML configuration for Docker. Resources: Docker Compose file reference
next-env.d.tsThis 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.jsNext.js project configuration file. Resources: Next.js configuration
package.jsonManage 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