Template for a project using react + tailwindcss + typescript
├── public
│ ├── index.html
│ ├── manifest.json
│ └── assets
│ ├── images
│ └── icons
├── src
│ ├── index.tsx
│ ├── App.tsx
│ ├── components
│ │ ├── Header
│ │ ├── Footer
│ │ ├── Article
│ │ └── SideBar
│ ├── pages
│ │ ├── Home
│ │ ├── About
│ │ ├── Contact
│ │ └── Articles
│ ├── hooks
│ ├── utils
│ ├── styles
│ │ ├── tailwind.css
│ │ └── index.css
│ ├── tests
│ ├── types
│ ├── services
│ └── store
├── package.json
├── tsconfig.json
└── README.md
public folder: This folder contains files that will be directly accessible by your web server. It includes your index.html, assets like images and icons.
src folder: This is where your React code lives. It contains the main index.tsx and App.tsx files.
components folder: This is where you keep your reusable components.
pages folder: Contains all the different pages of your application.
hooks folder: If you're using custom hooks, you'd store them here.
utils folder: This is for utility functions that are used throughout your app.
styles folder: Contains all the CSS and styling related files.
tests folder: Contains all testing related files.
types folder: For TypeScript types, interfaces, and type-related utility functions.
services folder: This is where you'd put any code that interacts with external services.
store folder: Contains all state management related files (if you're using Redux or a similar library).