feat/refactor: Move App Design to Atomic React System Design

[shravan20]

TLDR; Transitioning to an Atomic React System Design methodology 
will optimize the development process, enhance UI consistency, and 
promote best practices in frontend architecture. This feature request 
aims to elevate the design quality and maintainability of the FOSSTrak 
application, benefiting both developers and end-users.

Feature Description

The feature request proposes transitioning the design of the FOSSTrak application to an Atomic React System Design methodology.

Use Case

Implementing an Atomic React System Design approach will enhance the scalability, maintainability, and reusability of the application's UI components. This structured design system will facilitate efficient development and consistent UI across the application.

Proposed Solution

1. Define Atomic Design Principles: Establish clear guidelines for atomic design principles, including atoms, molecules, organisms, templates, and pages.
2. Component Architecture: Organize React components based on atomic design principles, ensuring each component's scope and purpose align with atomic design concepts.
3. Style Guide Implementation: Create a comprehensive style guide to document component usage, variations, and guidelines for consistent design implementation.
4. Component Reusability: Encourage component reusability by designing self-contained and modular components that can be easily integrated into various parts of the application.
5. Integration with Development Workflow: Integrate Atomic React System Design into the development workflow, ensuring seamless collaboration and adherence to design standards.

Alternatives Considered

The design methodologies such as Tailwind CSS were considered. However, Tailwind CSS with Atomic React System Design was chosen for its emphasis on modular, scalable, and reusable components, which aligns well with the needs of the FOSSTrak application.

Dependencies

This feature request may depend on:

• Familiarity with React development.
• Integration of design tools and libraries supporting atomic design principles.

[shravan20]

Note: This task can be further broken down into smaller bits and pieces where we segregate all the atoms and later move on them as molecules, organisms, and templates.

PS: Multiple people can work on smaller bits, and attach those PRs with this issue.