Project Structure
After creating a new project from the strudel-kit code, you will have the basic scaffolding for a STRUDEL-powered React app.
The app comes pre-baked with all libraries in the STRUDEL Tech Stack, all the Task Flow templates currently available, a set of custom components that are used across the app, and some handy development and CI tools.
There are quite a few directories and files that are part of the project structure. These handle things such as pages, shared components, routing, configurations, and continuous integration. Below is a breakdown of the project structure:
├── .github # GitHub actions and templates
├── .husky # Pre-commit hook to run before "git commit"
├── cypress # End-to-end testing
├── docs # Docs app, can be deleted or replaced with your own docs
├── public # Static files e.g. images, data, favicon
├── src
│ ├── components # Components that are shared across the app
│ ├── context # State variables and actions shared across the app
│ ├── hooks # Custom React functions for data fetching and more
│ ├── pages # File-based router entry point (TanStack Router)
│ │ ├── compare-data # Task Flow template (/compare-data page)
│ │ ├── contribute-data # Task Flow template (/contribute-data page)
│ │ ├── explore-data # Task Flow template (/explore-data page)
│ │ ├── monitor-activities # Task Flow template (/monitor-activites page)
│ │ ├── playground # Playground template (/playground page)
│ │ ├── run-computation # Task Flow template (/run-computation page)
│ │ ├── search-data-repositories # Task Flow template (/search-data-repositories page)
│ │ ├── __root.tsx # Wrapper component for all pages
│ │ └── index.tsx # Home page (/ page)
│ ├── types # TypeScript definitions used across the app
│ ├── utils # Utility functions used across the app
│ ├── App.tsx # Top-level app component
│ ├── declarations.d.ts # Type extensions for MUI
│ ├── index.css # Base CSS styles
│ ├── main.tsx # App entry point
│ ├── routeTree.gen.ts # Auto-generated route tree by TanStack Router (do not edit manually)
│ ├── theme.tsx # Full MUI theme configuration
│ └── vite-env.d.ts
├── .eslintrc.json # ESLint configuration
├── .gitignore # Files for git to ignore
├── .lintstagedrc.json # Linstaged configuration (executed on precommit)
├── .prettierrc.json # Prettier configuration for code formatting
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── COPYRIGHT.md
├── LICENSE
├── README.md
├── cypress.config.ts # Testing configuration
├── index.html # HTML entry point
├── package-lock.json # Full dependency list
├── package.json # Dependencies and project metadata
├── tsconfig.json # TypeScript configuration
├── tsconfig.node.json # Vite-level TypeScript configuration
├── tsr.config.json # TanStack Router configuration
└── vite.config.ts # Vite configuration
The primary areas for customization purposes are src/pages and src/components. The src/pages directory contains all of the unique pages and routing structure in the app. Each Task Flow template is a top-level directory in src/pages. To see a breakdown of a specific Task Flow, go to its page in the docs under the "Task Flows" section.
You can also customize the global theme in src/theme.tsx. This uses the MUI theme object to make app-wide style adjustments. See MUI's theme documentation.