05.Project_Structure

📂 Project Structure

Understanding the file organization of Canvas Celebration.

CanvasCelebration/
│── public/                          # Static assets (icons, images, etc.)
│   ├── fireworks-icon.svg           # Project logo/icon
│
│── src/                              # Main source directory
│   ├── assets/                       # Images, icons, and media files
│   │   ├── canvascelebration-readme-preview.png  # ReadMe preview image
│   │
│   ├── components/                   # React UI components
│   │   ├── ColorPicker.jsx           # Color selection UI
│   │   ├── ErrorPage.jsx             # Error page handling
│   │   ├── FireworksCanvas.jsx       # Main fireworks animation logic
│   │   ├── FireworksDisplay.jsx      # Fireworks screen
│   │   ├── Home.jsx                  # Homepage UI
│   │   ├── StyleSelector.jsx         # Firework style options
│   │   ├── ThemeToggle.jsx           # Light/Dark mode toggle
│   │
│   ├── constants/                    # Constant values
│   │   ├── FireworkStyles.js         # Predefined fireworks styles
│   │
│   ├── hooks/                        # Custom React hooks
│   │   ├── UseWindowDimensions.js    # Hook for responsive layout
│   │
│   ├── models/                       # Data models
│   │   ├── Firework.js               # Firework object structure
│   │   ├── Particle.js               # Particle system logic
│   │
│   ├── store/                        # Redux store configuration
│   │   ├── FireWorksSlice.js         # Fireworks Redux slice
│   │   ├── Store.js                   # Store setup
│   │   ├── ThemeSlice.js             # Theme state management
│   │
│   ├── utils/                        # Utility functions
│   │   ├── Colors.js                 # Color utility functions
│   │   ├── Responsive.js             # Responsive helper functions
│   │
│   ├── App.jsx                        # Main application component
│   ├── index.css                      # Global styles
│   ├── main.jsx                        # React DOM rendering entry
│
│── .gitignore                         # Git ignored files
│── eslint.config.js                    # ESLint configuration
│── index.html                          # Root HTML file
│── LICENSE                             # License details
│── package.json                        # Dependencies & scripts
│── package-lock.json                   # Dependency lock file
│── postcss.config.js                    # PostCSS configuration
│── README.md                           # Project documentation
│── SECURITY.md                         # Security policy

➡ Check out: Contributing Guide to collaborate.