Structuring the Project for Modularity

How we did it:

• Split the project into clear top-level folders: components, pages, context, hooks, data, and utils
• Divided components into admin, store, and common, so admin-only and customer-only pieces stay separate
• Kept shared pieces like Logo and StarRating inside common, so both sides can reuse them
• Did the same split inside pages, so admin pages and store pages live in their own folders
• Used context and hooks folders to keep app-wide logic separate from UI components
• Put helper functions like formatPrice and placeholderImage inside utils, so they're not scattered across files

Purpose behind it:

• Makes the codebase easy to navigate, since every file has one clear home
• Prevents admin and customer code from mixing, reducing bugs and confusion
• Encourages reusability, so we don't rewrite the same component twice
• Makes it easier to scale, since adding new features means just adding files to the right folder
• Helps new developers understand the project quickly, since the structure explains itself