feat: add new dependencies including bootstrap, react-bootstrap, tailwindcss, and supporting libs

[anyulled]

No description provided.

[gemini-code-assist]

Hello @anyulled, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

Hello team,

Gemini here with a summary of this pull request. This PR introduces several new UI libraries and their supporting dependencies to the project, specifically Bootstrap, React-Bootstrap, and Tailwind CSS. It also includes the necessary configuration files for Tailwind CSS (postcss.config.js, tailwind.config.js) and updates the Vite configuration.

Furthermore, this pull request refactors the existing Job Offers page implementation, replacing the old component with a new structure built using the newly added libraries. It introduces dedicated components for displaying company information, individual job offers, and filtering options. The PR also updates the site's data to enable the Job Offers section and populates it with initial job listings.

Overall, this is a significant change focused on modernizing the UI framework and implementing a new Job Offers feature.

Highlights

• New UI Libraries: Adds Bootstrap, React-Bootstrap, and Tailwind CSS as project dependencies to provide a more robust and flexible styling and component foundation.
• Job Offers Page Refactor: Replaces the previous Job Offers page implementation with new components (JobOffersList, CompanyCard, JobOfferCard, JobFilters) utilizing the new UI libraries for improved structure and functionality.
• Job Offers Data and Enabling: Includes actual job offer data and updates the 2025 data configuration to enable the Job Offers section in the navigation.
• Styling and Configuration: Adds necessary configuration files for PostCSS and Tailwind CSS and includes new styles in index.scss to support the new Job Offers components.

Changelog

Click here to see the changelog

• package-lock.json
  • Added numerous new dependencies including bootstrap, react-bootstrap, tailwindcss, autoprefixer, postcss, lucide-react, react-icons, and their transitive dependencies.
  • Removed the dev: true flag from the dequal dependency.
• package.json
  • Added direct dependencies for bootstrap, react-bootstrap, lucide-react, react-icons, autoprefixer, globals, postcss, and tailwindcss.
• postccs.config.js
  • Added a new file to configure PostCSS with tailwindcss and autoprefixer plugins.
• src/App.tsx
  • Removed import for the old JobOffers component (line 93).
  • Added import for the new JobOffersList component (line 103).
  • Updated the route for ROUTE_JOB_OFFERS to render the new JobOffersList component instead of the old JobOffers component (line 212).
• src/components/JobOffers/CompanyCard.tsx
  • Added a new component for displaying individual companies and their job offers using React-Bootstrap, Lucide icons, and Framer Motion.
• src/components/JobOffers/CompanyOffers.tsx
  • Updated import paths from relative to alias (@styles/colors, @types/jobOffers) (lines 2, 16).
  • Added @ts-expect-error comment to the @types/jobOffers import (line 15).
• src/components/JobOffers/JobFilters.tsx
  • Added a new component for filtering job offers by search term and location using React-Bootstrap, Lucide icons, and Framer Motion.
• src/components/JobOffers/JobOfferCard.tsx
  • Added a new component for displaying individual job offers using React-Bootstrap, Lucide icons, and Framer Motion.
• src/components/JobOffers/JobOffersList.tsx
  • Added a new component that orchestrates the display and filtering of job offers, replacing the functionality of the old JobOffers view.
  • Imports and uses CompanyCard and JobFilters.
• src/components/Navigation/NavigationData.ts
  • Added ROUTE_JOB_OFFERS to the import from @constants/routes (line 6).
  • Uncommented the 'JOB OFFERS' entry in navigationItems2025 to make it visible (line 26).
• src/data/2025.json
  • Changed jobOffers.enabled from false to true to activate the job offers section (line 21).
• src/index.scss
  • Imported Bootstrap CSS (line 4).
  • Added extensive new CSS rules for styling the job offers components, including cards, logos, badges, titles, and filters (lines 70-213).
• src/views/JobOffers/JobOffers.tsx
  • Updated various import paths from relative to alias (@constants/BreakPoints, @styles/colors, @assets/images, @components/SectionWrapper, @components/SectionTitle, @data/2024.json, @styles/JobOffers/JobOffers.Style, @components/JobOffers/CompanyOffers, @hooks/useDocumentTitleUpdate) (lines 1-20).
  • Removed the width prop from the MoreThanLessThan component (line 48). This file is no longer routed to in App.tsx.
• src/views/JobOffers/JobsData.ts
  • Populated the jobOffers array with actual data for 'CAIXABANK TECH' and 'Snowflake' (lines 4-67).
• tailwind.config.js
  • Added a new file to configure Tailwind CSS content paths.
• vite.config.ts
  • Removed a comment from the base property (line 52).
  • Added lucide-react to optimizeDeps.exclude for Vite (line 64).

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

New libraries arrive,
Bootstrap, Tailwind, help us thrive.
Job offers now appear,
Making code much more clear.
A refactor, alive!

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[netlify]

✅ Deploy Preview for dev-bcn ready!

Name	Link
🔨 Latest commit	50aea2c
🔍 Latest deploy log	https://app.netlify.com/projects/dev-bcn/deploys/68359b700be08e0008a47d31
😎 Deploy Preview	https://deploy-preview-715--dev-bcn.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 44 Accessibility: 86 Best Practices: 92 SEO: 92 PWA: 90 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Code Review

This pull request introduces a significant enhancement by adding new dependencies like Bootstrap, React-Bootstrap, and Tailwind CSS, and completely revamping the Job Offers page. The new page, built with JobOffersList and supporting components, leverages these libraries along with lucide-react for icons and framer-motion for animations, offering a much-improved user experience with filtering and a modern UI.

While the new functionality is a great step forward, there are a few key areas to address:

1. Styling Strategy: The project now incorporates PrimeReact, Bootstrap (CSS + React-Bootstrap components), Tailwind CSS, and custom SCSS. It would be beneficial to clarify the strategy for using these different styling systems. This will help avoid potential bundle size increases, styling conflicts, inconsistent UI, and developer confusion. Consider outlining when to use Tailwind utility classes versus custom SCSS or Bootstrap components.
2. TypeScript Errors: There are several @ts-expect-error comments. These should be investigated and resolved to ensure type safety and catch potential bugs.
3. Icon Libraries: The project now includes both lucide-react and react-icons. Are both necessary? Consolidating to one could simplify dependencies.

Overall, this is a valuable addition. Addressing the points above will further improve the code quality and maintainability.

Summary of Findings

• TypeScript Error Suppressions: Multiple @ts-expect-error comments are present across the new Job Offer components. These should be investigated and resolved to ensure type safety.
• Image Error Handling: The onError handler for company logos in CompanyCard.tsx could lead to an infinite loop if the image source is broken. A proper fallback mechanism is needed.
• Incorrect Filtering Logic: The job offer filtering logic in JobOffersList.tsx uses the ?? operator incorrectly where || was likely intended, potentially leading to incorrect search results.
• Data Issues in JobsData.ts: Several URLs in JobsData.ts contain trailing newline characters (\n), and one job offer has an empty title. These should be corrected.
• Potential XSS Risk: Usage of dangerouslySetInnerHTML in JobOfferCard.tsx for rendering job descriptions. While the current data source is local, this pattern should be handled with care.
• Styling Strategy: The introduction of Bootstrap and TailwindCSS alongside existing PrimeReact and custom SCSS raises questions about the overall styling strategy. Clarification would be beneficial for consistency and maintainability.
• Alert Variant Typo: In JobOffersList.tsx, line 120, there's a typo in the Alert variant: info\ should be info. (Not commented inline due to severity settings).

Merge Readiness

This pull request introduces a significant and positive change to the Job Offers section. However, there are several high and medium severity issues identified, particularly concerning TypeScript error suppressions, image error handling, filtering logic, and data integrity.

I recommend addressing these issues, especially the high severity ones, before merging to ensure the stability and correctness of the new feature. A discussion on the overall styling strategy would also be valuable for the long-term health of the codebase.

As an AI, I am not authorized to approve pull requests. Please ensure these changes are reviewed and approved by other team members before merging.

[sonarqubecloud]

Quality Gate failed

Failed conditions
0.0% Coverage on New Code (required ≥ 75%)

See analysis details on SonarQube Cloud