Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Restructure frontend files into component-based folders

See original GitHub issue


Currently, the frontend code of our app is organized in a way in which most components contain a single .tsx file with all of the component’s logic, styles, and rendered HTML markup in one place. The file structure is also organized in a way in which most components sit at the root of the dashboard or other subfolder preventing the components and their related files from being grouped in the most intuitive way.

As we begin to design out a new potential dashboard for the recommendations feature and further expand the app’s UI, we should refactor and organize our frontend in a way that groups a component and its related assets/subcomponents into a single folder for better navigation, organization of concerns, and maintainability.


├── __snapshots__
│   └── CarbonIntensityMap.test.tsx.snap
├── AWSMap.svg
├── AzureMap.svg
├── CarbonIntensityMap.test.tsx
├── CarbonIntensityMap.tsx
├── GCPMap.svg
├── index.ts
└── carbonIntensityStyles.ts


For each primary dashboard component, do the following:

  • Create a subfolder in /dashboard with the component names in uppercase format (i.e. dashboard/CarbonIntensityMap) to hold each of the component’s files and supporting assets
  • Move the primary component into that subfolder, and update import paths as necessary (IntelliJ or VSCode should do this for you)
  • Create an index.ts file to export the component as the directory’s default export (for easy imports)
  • Move test file of component into new subfolder
  • Identify any rendered subcomponents (i.e. ApexBarChart.ts) and move them as well as their test files into the subfolder (make sure imports and paths are updated)
  • Check for any remaining assets (images, specific helper files, etc) and move them into the new folder as well


  • Run Changesets, bump any packages that have been updated/changed
  • Did you make changes to the client, api or cli package? If so, considering updating the create-app templates.

Tech/Implementation Details

This could also be a good opportunity to identify and organize any reused subcomponents into a common folder.

Good resource, especially for index exporting:

  • The CarbonIntensityMap was created with this directory pattern in mind, so it can be a good reference for how each component directory should look.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7

github_iconTop GitHub Comments

dtoakleycommented, Jun 21, 2021

I’m not 100% sure I follow the reasoning behind 1, but maybe could we rename the directory to EmissionsOverTimeChart or EmissionsOverTimeCard as that is what the Line Chart is all about. CloudUsage is just to vague/broad – the whole front-end is about “Cloud Usage”. Hope that makes sense.

4upz-twcommented, Jun 21, 2021

That makes sense! I think we could definitely rename it to something better than Cloud Usage so we’ll make that change

Read more comments on GitHub >

github_iconTop Results From Across the Web

How you should structure a large frontend project to make ...
The first folder is api, where we create a code responsible for the application's API calls. Inside the folder, we divided the code...
Read more >
Demystifying the Folder Structure of a React App
In this format, you have a subfolder for every type of state. In each of these folders you have the respective actions ,reducers...
Read more >
How To Structure React Projects From Beginner To Advanced
The components folder in the simple folder structure is incredibly straightforward since it will contain every single component in your ...
Read more >
How to Organize a Large React Application and Make It ...
We've grouped components based on the areas of the application where they're used, along with a core folder for common components that are ......
Read more >
4 folder structures to organize your React & React Native ...
We analyze the 4 main folder structures to organize React projects: based on file type, feature based, Atomic Design and hexagonal ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found