This ASCII tree represents the project structure. Read through the comments to learn more about the walking-pal-web repo.
.
├── .docs #markdown files and assets used to write the documentation files
├── assets/ #assets used throughout walking-pal-web
│ ├── gif/
│ │ ├── some-gif.gif #gif, png, svg names must be in kebab-case
│ │ ├── index.ts #imports all the gif files in the `gif/` directory and exports them
│ │ └── ...(other gifs)
│ ├── png
│ └── svg
├── components/ #global components (used by more than one page)
│ ├── GlobalComponent1/
│ │ ├── GlobalComponent1.tsx #component file names are in PascalCase
│ │ ├── global-component1.module.scss #SCSS file names are in kebab-case
│ │ ├── index.ts #re-exports the React component from GlobalComponent1.tsx (along with any other accompanied exports)
│ │ └── componentUtility.ts #utility function used by the GlobalComponent1 React component
│ └── GlobalComponent2/
├── hooks/ #global custom hooks (used by more than one page)
│ └── useWindowResize.ts
├── pages/
│ ├── api/ #Nextjs API endpoints
│ │ ├── route1/ #route1 endpoint
│ │ │ └── index.pg.ts #route1 endpoint logic
│ │ ├── utils/ #miscellaneous utilities used by endpoints
│ │ └── index.pg.ts #root (/) endpoint handler
│ ├── page-name1/
│ │ ├── components/ #local components (used by PageName1 page only)
│ │ │ ├── LocalComponent1/
│ │ │ │ ├── LocalComponent1.tsx #component file names are in PascalCase
│ │ │ │ ├── local-component.module.scss #SCSS file names are in kebab-case
│ │ │ │ └── index.ts #re-exports the React component from LocalComponent.tsx
│ │ │ └── LocalComponent2/
│ │ ├── page-name1.module.scss #this single SCSS file is used by all local components in the page
│ │ ├── PageName1.tsx #PageName1 component
│ │ ├── index.pg.ts #re-exports PageName1 component as a "default export"
│ │ └── hooks/ #contains local custom hooks (used by PageName1 page only)
│ ├── page-name2/
│ ├── _app.pg.ts #walking-pal-web's root App component
│ ├── _document.pg.ts #ref- https://nextjs.org/docs/advanced-features/custom-document
│ ├── _global.scsss #contains global styles. (Rarely used)
│ └── 404.pg.ts #custom 404 error page
├── public/ #do not add or edit any files inside this
├── theme/
│ ├── WPThemeProvider.tsx #Theme Provider component
│ ├── theme.ts #generates themes for components. Strictly follow STYLE-GUIDE.md when editing this
│ └── index.ts #re-exports everything from WPThemeProvider.tsx
├── types/ #global TypeScript types
├── utils/ #miscellaneous utilities
├── .gitignore
└── package.jsonCredits: This ASCII tree was generated using tree.nathanfriend.io