JSONCrack Codebase Analysis - Part 1. File Structure
Tags: webdev, javascript, nextjs, opensource
Published: 2024-01-01 18:07:42

[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.

Let's get started with File structure.

![File structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6djrjd91f6lbcbglbx19.png)

| File name | Description |
| --- | --- |
| [.github](https://github.com/AykutSarac/jsoncrack.com/tree/main/.github) | This folder is used for Github actions and workflow. Resources: [GitHub .github directory overview](https://stackoverflow.com/questions/60507097/is-there-an-overview-of-what-can-go-into-a-github-dot-github-directory) |
| [public](https://github.com/AykutSarac/jsoncrack.com/tree/main/public) | Static assets like images are served using this public directory. Resources: [Next.js assets, metadata, and CSS](https://nextjs.org/learn-pages-router/basics/assets-metadata-css/assets) |
| [src](https://github.com/AykutSarac/jsoncrack.com/tree/main/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](https://nextjs.org/docs/pages/building-your-application/configuring/src-directory) |
| [.dockerignore](https://github.com/AykutSarac/jsoncrack.com/blob/main/.dockerignore) | Add a list of files to be ignored when building your app using DockerFile. Resources: [Docker .dockerignore files](https://stackoverflow.com/questions/31789770/what-are-the-files-that-the-dockerignore-works-on) |
| [.env.development](https://github.com/AykutSarac/jsoncrack.com/blob/main/.env.development) | Set defaults/environment variables for the development environment. Resources: [Next.js environment variables](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables) |
| [.env.production](https://github.com/AykutSarac/jsoncrack.com/blob/main/.env.production) | Set defaults/environment variables for the production environment. Resources: [Next.js environment variables](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables) |
| [.eslintrc.json](https://github.com/AykutSarac/jsoncrack.com/blob/main/.eslintrc.json) | Configuration to identify and report on patterns found in JavaScript, to avoid bugs and maintain code consistency. Resources: [ESLint documentation](https://eslint.org/docs/latest/use/getting-started) and [ESLint configuration files](https://eslint.org/docs/latest/use/configure/configuration-files#:~:text=JSON%20%2D%20use%20.eslintrc.json,and%20define%20your%20configuration%20there) |
| [.gitignore](https://github.com/AykutSarac/jsoncrack.com/blob/main/.gitignore) | Use this file to ignore files, folders that you do not wish to see in your Github repo |
| [.prettierignore](https://github.com/AykutSarac/jsoncrack.com/blob/main/.prettierignore) | .prettierignore can be used to ignore files or folders of your choice. Resources: [Prettier ignore files](https://prettier.io/docs/en/ignore.html) |
| [.prettierrc](https://github.com/AykutSarac/jsoncrack.com/blob/main/.prettierrc) | Format your code on save using Prettier. Resources: [Prettier configuration](https://prettier.io/docs/en/configuration.html) |
| [CODE_OF_CONDUCT.md](https://github.com/AykutSarac/jsoncrack.com/blob/main/CODE_OF_CONDUCT.md) | Define standards for your community engagement. Resources: [GitHub code of conduct](https://docs.github.com/en/communities/setting-up-your-project-for-healthy-contributions/adding-a-code-of-conduct-to-your-project) |
| [CONTRIBUTING.md](https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md) | Contribution guide to follow, should you decide to contribute to this project. Resources: [Contribution guide](https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md) |
| [Dockerfile](https://github.com/AykutSarac/jsoncrack.com/blob/main/Dockerfile) | Provide instructions to build your docker image using this file. Resources: [Dockerfile reference](https://docs.docker.com/engine/reference/builder/) |
| [LICENSE](https://github.com/AykutSarac/jsoncrack.com/blob/main/LICENSE) | [License](https://github.com/AykutSarac/jsoncrack.com/blob/main/LICENSE) |
| [README.md](https://github.com/AykutSarac/jsoncrack.com/blob/main/README.md) | Provides project set up instructions, features supported, etc. |
| [default.conf](https://github.com/AykutSarac/jsoncrack.com/blob/main/default.conf) | Nginx configuration file. Resources: [Nginx configuration](https://gist.github.com/xameeramir/a5cb675fb6a6a64098365e89a239541d) and [Nginx beginners guide](https://nginx.org/en/docs/beginners_guide.html) |
| [docker-compose.yml](https://github.com/AykutSarac/jsoncrack.com/blob/main/docker-compose.yml) | A YAML configuration for Docker. Resources: [Docker Compose file reference](https://docs.docker.com/compose/compose-file/03-compose-file/) |
| [next-env.d.ts](https://github.com/AykutSarac/jsoncrack.com/blob/main/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](https://stackoverflow.com/questions/61420392/how-do-i-use-the-next-env-d-ts-file-in-next-js#:~:text=This%20file%20ensures%20Next.,you%20want%20in%20your%20code.) and [Next.js TypeScript configuration](https://nextjs.org/docs/pages/building-your-application/configuring/typescript) |
| [next.config.js](https://github.com/AykutSarac/jsoncrack.com/blob/main/next.config.js) | Next.js project configuration file. Resources: [Next.js configuration](https://nextjs.org/docs/pages/api-reference/next-config-js) |
| [package.json](https://github.com/AykutSarac/jsoncrack.com/blob/main/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