Modernize the UI stack by migrating from React-Bootstrap/CSS to shadcn/ui and Tailwind CSS

[nathanncrt]

As a developer, I want to modernize the UI stack using shadcn/ui and Tailwind CSS, so that the application becomes more flexible, maintainable, and visually consistent.

Context / Problem

This proposal is a personal improvement idea and is not directly based on course requirements.

Currently, the project uses React-Bootstrap and custom CSS:

• The interface feels not very modern
• Customization of components can be complex and inconsistent
• Developer experience (DX) is limited when trying to adapt or scale the design
• Mixing Bootstrap and custom CSS can lead to UI inconsistencies

Proposed Solution

Adopt a modern UI approach using shadcn/ui and Tailwind CSS:

• Use Tailwind CSS for utility-first styling and better control over design
• Use shadcn/ui components, which are directly added into the codebase (not just imported as a library)
• Customize components freely since they are part of the project code
• Replace progressively existing Bootstrap components (buttons, forms, modals, etc.)

Advantages of this approach:

• More modern and clean UI
• Better developer experience (faster styling, easier customization)
• Full control over components (no dependency on rigid library styles)
• Improved consistency across the application
• Easier to maintain and scale design system

This migration can be done progressively, starting with the most used components.

Documentation:

• https://ui.shadcn.com/docs