Redesign Frontend with Multi-Page Structure and Improved Navigation

[mouli86]

What was changed?
The front end of the application was redesigned to transition from a single-page application into a multi-page structure for better usability and interactivity. New components were added, and existing components were updated to support this change. React Router was integrated to enable navigation between the newly created pages. Additionally, styling improvements were made with new CSS files for modularity and a polished user interface.

Why was it changed?
The single-page structure was cluttered, making the application less user-friendly. By splitting functionalities into separate pages, the application is now more organized and easier to navigate. Adding a Home page provides an introduction to the application, while the About Us page offers details about the developers and SLU OSS.

How was it changed?

1. Routing and Navigation:

   • Added React Router in App.tsx to enable seamless navigation between pages: Home, CustomExamSheetComponent, FileUploadComponent, and AboutUs.

2. Home Page:

   • Created Home.tsx for the Home page and styled it with a new home.css file.

3. Custom Sheet Generation Page:

   • Updated the existing CustomExamSheetComponent.tsx to fit the new page design and made styling updates in App.css.

4. Sheet Upload Page:

   • Updated the existing FileUploadComponent.tsx to accommodate the new multi-page structure and made styling changes in App.css.

5. About Us Page:

   • Added a new AboutUs.tsx component to provide details about the developers and organization, with plans to expand it in the future.

6. Header:

   • Created Header.tsx for a navigation bar that allows users to switch between pages.
   • Styled the navigation bar with header.css and added functionality to highlight the current page.

7. Footer:

   • Created Footer.tsx and styled it with footer.css to provide a consistent footer on all pages.

8. Styling Enhancements:

   • Updated App.css with new styles for components like .scanComponent and .formComponent.
   • Added modular CSS files (header.css, footer.css, and home.css) for better maintainability.

9. Dependency Updates:

   • Added react-router-dom to project dependencies for routing functionality. Updated the Dockerfile to ensure dependencies are correctly installed.

[mouli86]