Project Structure

template-project/
├── public/                 # Static files
├── src/                    # Source code
│   ├── Components/         # Reusable UI components
│   │   ├── Buttons/       # Button components
│   │   ├── Carousel/      # Carousel components
│   │   ├── Drawer/        # Navigation drawer
│   │   ├── Error/         # Error handling components
│   │   ├── ForgotPassword/# Password recovery components
│   │   ├── Headings/      # Heading components
│   │   ├── InputField/    # Input field components
│   │   ├── Login/         # Login form components
│   │   ├── MaterialUISwitch/ # Theme switch component
│   │   ├── Profile/       # Profile related components
│   │   ├── ProtectedRoute/# Route protection components
│   │   ├── Settings/      # Settings components
│   │   ├── Signup/        # Signup form components
│   │   ├── SplashScreen/  # Loading screen components
│   │   └── Text/          # Text components
│   │
│   ├── Constants/         # Application constants and configurations
│   │   └── index.js       # API endpoints and menu configurations
│   │
│   ├── Firebase/         # Firebase configuration and utilities
│   │
│   ├── Redux/            # Redux store, slices, and actions
│   │   ├── authSlice.js  # Authentication state management
│   │   ├── profileSlice.js # Profile state management
│   │   ├── store.js      # Redux store configuration
│   │   ├── themeSlice.js # Theme state management
│   │   └── userSlice.js  # User state management
│   │
│   ├── Router/           # React Router configuration
│   │   └── router.jsx    # Route definitions
│   │
│   ├── Schemas/          # Form validation schemas
│   │
│   ├── Screens/          # Page components
│   │   ├── AuthPage/     # Authentication related screens
│   │   ├── Dashboard/    # Dashboard screen
│   │   ├── Post/         # Post related screens
│   │   ├── Profile/      # Profile related screens
│   │   ├── Search/       # Search functionality
│   │   └── Settings/     # Settings screen
│   │
│   ├── Utilities/        # Helper functions and utilities
│   │   ├── AuthHandler.js    # Authentication utilities
│   │   ├── custom.css        # Custom CSS styles
│   │   ├── helper.js         # General helper functions
│   │   ├── interactions.js   # User interaction utilities
│   │   ├── ProfileLoader.js  # Profile loading utilities
│   │   ├── request_wrapper.js # API request wrapper
│   │   └── themeHandler.js   # Theme management utilities
│   │
│   ├── App.jsx          # Root component
│   ├── index.css        # Global styles
│   └── main.jsx         # Application entry point
│
├── .env-sample          # Environment variables template
├── .gitignore          # Git ignore rules
├── eslint.config.js    # ESLint configuration
├── index.html          # HTML template
├── package.json        # Project dependencies and scripts
├── postcss.config.js   # PostCSS configuration
├── tailwind.config.js  # Tailwind CSS configuration
└── vite.config.js      # Vite configuration

Key Directories

Components

Contains reusable UI components used across different screens:

• Buttons: Custom button components
• Carousel: Image/Content carousel components
• Drawer: Navigation drawer component
• Error: Error handling and display components
• ForgotPassword: Password recovery flow components
• Headings: Typography heading components
• InputField: Form input components
• Login: Login form and related components
• MaterialUISwitch: Theme toggle switch component
• Profile: Profile-related components
• ProtectedRoute: Route protection components
• Settings: Settings page components
• Signup: Registration form components
• SplashScreen: Loading screen components
• Text: Text and typography components

Constants

Stores application-wide constants and configurations:

• index.js: Contains API endpoints, menu configurations, and other constants

Firebase

Contains Firebase configuration and related utilities for authentication and other Firebase services.

Redux

Manages application state using Redux Toolkit:

• authSlice.js: Authentication state management
• profileSlice.js: Profile state management
• store.js: Redux store configuration
• themeSlice.js: Theme state management
• userSlice.js: User state management

Router

Contains React Router configuration:

• router.jsx: Route definitions and navigation setup

Schemas

Contains Yup validation schemas for form validation.

Screens

Contains page-level components:

• AuthPage: Authentication related screens (login, signup)
• Dashboard: Main dashboard screen
• Post: Post creation and management
• Profile: User profile management
• Search: User search functionality
• Settings: Application settings

Utilities

Contains helper functions and utilities:

• AuthHandler.js: Authentication utilities
• custom.css: Custom CSS styles
• helper.js: General helper functions
• interactions.js: User interaction utilities
• ProfileLoader.js: Profile loading utilities
• request_wrapper.js: API request wrapper
• themeHandler.js: Theme management utilities

Configuration Files

• .env-sample: Template for environment variables
• eslint.config.js: ESLint configuration for code linting
• tailwind.config.js: Tailwind CSS configuration
• vite.config.js: Vite bundler configuration
• postcss.config.js: PostCSS configuration for CSS processing