alexrobaina / frontend_petslove Goto Github PK

Hey, @alexrobaina! How are you?
I'm still need 2 PR to complete the hacktoberfest chalenge. Can you contribute with some think, for example, like a dependencies upgrade.
If you aceept, i will create a PR.
Thanks!

Steps to produce error

1. From root folder run --> yarn test src/tests/App.spec.tsx

2. You will see it failing with errors in GoogleAutocomplete component file.

To streamline the user interface and maintain a consistent look and feel across the application, we need to create a new reusable component, BasePhoneInput, for phone number input. This component will leverage the react-phone-input-2 library and should adhere to the styling of the existing BaseInput component.

Acceptance Criteria

• Develop a functional component named BasePhoneInput.
• Use react-phone-input-2 as the foundational library for the component.
• The component should have styling consistent with BaseInput.
• Ensure proper functionality and error handling of the phone input.
• Test the component to ensure that it meets the requirements and behaves as expected.

How to Test

• Use the component in various parts of the application.
• Ensure that the component behaves as expected and handles errors gracefully.
• Check the styling to confirm it aligns with BaseInput.
• Run the unit tests to validate the component's functionality.

To enhance user experience and handle errors gracefully, there is a need to implement a custom ErrorBoundary component in our ViteJS, React, and TailwindCSS application. This component will capture JavaScript errors anywhere in a component tree and log those errors, and display a fallback UI instead of crashing the component tree.

Acceptance Criteria

• Develop a class component named ErrorBoundary that utilizes the lifecycle method componentDidCatch to capture errors.
• Display a user-friendly error message and hint for developers when an error is captured.
• Style the fallback UI using TailwindCSS to maintain consistency with the rest of the application.
• Test the component with different types of errors to ensure it captures and displays

The goal of this issue is to verify and correct the translations.
In the folder public/locales/en and public/locales/es you can find the files translations.

Specially the translations of the landing page => en/landingpage.json - es/landingpage.json

Please if you find errors in other parts of the site you can send a PR ❤️ 😀

This issue needs to be divided into several issues. This text has the idea about Pets and blockchain.

Implementing a web3 solution for adopting pets using smart contracts and NFTs is an innovative idea. Here's a step-by-step guide on how to approach this:

Research & Planning:

Understand the needs and benefits: Why use blockchain for pet adoption? What value does it bring?
Determine the information that needs to be stored on the blockchain for both adopter and pet.
Choose a Blockchain Platform:

Ethereum is the most popular for NFTs and smart contracts, but other platforms like Binance Smart Chain, Flow, or Tezos might offer benefits like lower transaction fees.
Smart Contract Development:

Pet NFT

Create an NFT that represents each pet. This NFT can contain the pet's name, breed, age, health records, and a unique identifier.
Adoption Contract: Design a smart contract that facilitates the adoption process. This can handle the transfer of the pet's NFT from the shelter to the adopter and store details of the adopter.
Ensure that smart contracts are secure, and consider getting them audited.
Web3 Integration:

Use libraries like web3.js or ethers.js to integrate blockchain functionality into your web app.
Implement a wallet connection for adopters to interact with the blockchain. Popular options include MetaMask, WalletConnect, and Fortmatic.
User Experience (UX):

Ensure that the adoption process is user-friendly. Not all users will be familiar with blockchain or NFTs.
Provide clear instructions on how to connect a wallet, pay for adoption fees (if any), and receive the pet's NFT.
Storing Data:

Store only essential data on the blockchain due to cost and efficiency reasons. Consider using off-chain storage (like IPFS) for larger data like images or lengthy documents, and then referencing them in the smart contract or NFT metadata.
Transparency & Trust:

Clearly communicate the benefits of using blockchain for adoption, such as tamper-proof records and transparency.
Consider implementing a verification system for adopters to ensure genuine interest and capability to care for pets.
Legal & Ethical Considerations:

Ensure that the system complies with local laws and regulations.
Be transparent about how data is used and stored.
Maintenance & Support:

Regularly update the web app and smart contracts to accommodate changes in blockchain technology and user needs.
Provide support for users facing issues with the blockchain aspect of the adoption process.
Education:

Offer resources or tutorials on what NFTs are, how they represent pet ownership, and the benefits of decentralized pet adoption.
By integrating web3, smart contracts, and NFTs into the pet adoption process, you can offer a unique and transparent method for adopters to gain trust in the system and truly own a digital representation of their pet's data. However, always ensure that the technology serves the primary goal: facilitating the best interests of the pets and their new owners.

The goal of the task it is to make the input show the full address when the user select it.
When the user clicks on the address, the input does not autocomplete correctly, but if he does enter, it works.

Issue Description

• Whenever I am trying to do the testing, it is throwing errors regarding some missing modules.

Steps to reproduce

1. Run yarn run test
2. Wait for the test to finish with errors regarding missing modules

Probable cause

• Babel modules to specifically test typescript code are missing.

The goal of this issue is to create a step-by-step process to run the project in the local.

It's important to know that we use node v18

https://www.figma.com/file/MK1mSVutBHbVXEo4VyfzVf/Pets-love-system-design?type=design&node-id=3128%3A20436&mode=design&t=oHFPr01a3bDbZSyh-1

I want to deploy your site on vercel

The goal of this issue is add icon inside InputDate.jsx
Like this:

This is import icon that I could import in this component:
import { BiCalendarHeart } from 'react-icons/bi'

Maybe 20 size will look good but you can try other sizes . This is syntax for use icon:
<BiCalendarHeart size={20} />

To enhance UI modularization and reusability, there's a need to create a small, reusable component that will display an address or any other text along with an icon. The text needs to be a clickable link that redirects to a provided URL in a new tab. This component will receive the following props:

Icon
URL
Text

This is an example:

• Create a new functional component with a chosen name from the proposed component names or any suitable name.
• The component should receive props for Icon, URL, and Text.
• The Text should be a clickable link that opens the provided URL in a new tab.
• The component should be styled appropriately to match the existing UI.
• Write unit tests to ensure the component behaves as expected.
• Update documentation with the new component usage. (Check the route http://localhost:3000/ui)

How to Test

• Use the new component in a view with different sets of prop values.
• Ensure the component renders correctly and the link opens in a new tab.
• Ensure the unit tests pass.

Pet's Love

Our pet adoption project is dedicated to making a meaningful impact on animal welfare. We've set forth a mission with several vital objectives encompassing the empowerment of technology, community building, contribution to science, and promoting responsible adoption.

Why Sponsorship is Needed:

To fulfill our mission effectively, we need the support of sponsors like Google Cloud. While we've made significant strides in achieving our goals, we recognize the immense potential for growth and improvement. Sponsorship from Google Cloud is crucial to provide us with the specific resources and technical support required to scale our project to new heights.

Benefits to Google Cloud:

Sponsoring our project offers Google Cloud a unique opportunity to align with its corporate social responsibility goals. By supporting our initiative, Google Cloud can showcase its commitment to technology-driven positive social change. Sponsoring our pet adoption project can also bring positive publicity, demonstrating a genuine dedication to animal welfare and community engagement. Moreover, it provides access to a vibrant and growing community of users and developers who are passionate about our cause and increasingly rely on cloud services to support their efforts. Importantly, our app's integration with Google Maps ensures it operates seamlessly and effectively worldwide, making it a truly global initiative.

How the Community Benefits:

Google Cloud's sponsorship will benefit our pet adoption project's community and users. It will enable us to enhance the technology infrastructure that supports shelters, volunteers, veterinarians, and pet adopters. With Google Cloud's support, we can ensure that our platform remains robust, scalable, and secure, facilitating smoother pet management and care services for everyone involved. Additionally, it will allow us to continue contributing to data science and research, improving the health and well-being of pets through AI advancements. Users will have access to detailed medical records for each pet, providing accurate and comprehensive information to veterinarians, shelters, and adopters. Ultimately, Google Cloud's sponsorship fosters a culture of responsible adoption, educating the community and enabling the continuous tracking of a pet's well-being.

We invite our dedicated community members to discuss this issue and share their thoughts, ideas, and support. Your input is greatly appreciated in showing the community's enthusiasm and need for Google Cloud's sponsorship. Let's work together to make this partnership a reality! We also encourage our community to assist us in reaching out to Google Cloud or other potential sponsors who may share our vision for improving animal welfare through technology.

To standardize and make the text area input more reusable across our application, there is a requirement to create a new component named BaseTextArea. This component will be developed with reference to the existing BaseButton component located in src/components/BaseButton.

Acceptance Criteria

• Develop a functional component named BaseTextArea.
• The component should accept the following props:
• value: The value inside the textarea.
• handleChange: The function to be called when the value of the textarea changes.
• classname: The className to be applied to the textarea for styling.
• height: The height of the textarea.
• textHelper: Helper text to be displayed below the textarea.
• textError: Error text to be displayed if there is an error.
• The component should be well-styled, keeping consistency with the existing UI

How to Test

• Integrate the component in different parts of the application with varying prop values.
• Check whether all the props are working as expected.
• Check whether the handleChange is triggered on value change.
• Ensure that the unit tests cover all possible use cases and edge cases and they pass.

The goal of this task is to create a public route and create in folder container the component ASKS
for imported in app.js

<Route exact path={ASKS} component={Asks} />
The path is importer from file routing/routes

You can use the components already created for the construction of the Asks component like LayoutContainer and Title.
I attach the design of the new component.

https://xd.adobe.com/view/8eb0863c-52b8-4870-ab19-c274d3102462-dbe3/screen/bba018bf-56e1-4fa3-9188-c5e3523781f8

The goal of this issue is make upgrade profile pets in the file ProfilePets.jsx and profilePets.scss 😄

Here you can find the design:
https://xd.adobe.com/view/51f9ae70-f90b-44cf-af0c-48d69e8abed7-04aa/screen/2d5687c5-7fdf-47ad-a017-bc905f8931c7

Please, do not make change to the gallery. I have another issue in mind to improve it.

Thanks you 😄 🐱

Create a button for Edit pets in PetCard.

• [] Create button - please use the BaseButton and when the user clicks to redirect editPet/petId
  Like this:

• [] The button needs to hide when the user it's not the creator pet. Please add prop disabledActions type boolean in PetCard and check that with useSession from nextjs

To improve the user interface and the user experience on our platform, there is a requirement to develop a reusable gallery component using SwiperJS. This component should provide a seamless and responsive way to view a collection of images.

This component should receive the following props:

images: An array of image URLs to be displayed in the gallery.
thumbs: An array of thumbnail image URLs corresponding to the images in the gallery.

Acceptance Criteria

• Create a new functional component named SwiperGallery.
• The component should receive images and thumbs as props.
• The gallery should display the main images and a thumbnail navigation.
• Use SwiperJS to implement the gallery slider functionality.
• The component should be responsive and work smoothly on different screen sizes.
• Write unit tests to verify the component's functionality.
• Update the component documentation with usage examples and prop descriptions.

How to Test

Include the SwiperGallery component in a view with different sets of images and thumbs.
Verify that the gallery displays correctly and is responsive to different screen sizes.
Verify that the thumbnail navigation works correctly.
Ensure that the unit tests cover all component functionalities and they pass.

As part of our ongoing efforts to modularize the UI components, there is a requirement to create a new component named ContactCard. This component will be responsible for displaying user contact information such as Name, Role, and Avatar.

Suggested Implementation

<div class="flex w-full items-center justify-between space-x-6 p-6">
  <div class="flex-1 truncate">
    <div class="flex items-center space-x-3">
      <h3 class="truncate text-sm font-medium text-gray-900">Jane Cooper</h3>
      <span class="inline-flex flex-shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Admin</span>
    </div>
    <p class="mt-1 truncate text-sm text-gray-500">Regional Paradigm Technician</p>
  </div>
  <img class="h-10 w-10 flex-shrink-0 rounded-full bg-gray-300" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
</div>

###Acceptance Criteria
[] Create a new functional component named ContactCard
[] The component should have props for Name, Role, Avatar URL, and a Status (Admin/Regular User).
[] The component should match the visual style of the suggested implementation provided above.
[] Unit tests should be written to ensure the component behaves as expected.
[] Update documentation with the new component usage.

Additional Context

The proposed implementation is a mere suggestion and open for discussion. Please feel free to comment on the code and suggest improvements if needed. The goal is to have a component that is reusable, modular, and accessible.

How to Test

Once the component is developed, it should be tested using different sets of prop values to ensure it works as expected and does not break the existing UI.

The purpose of this task is that the input phone show the countries flags and the user select your country
I use this library https://www.npmjs.com/package/react-phone-input-2

I would try resolve bug first. xD

Please try in this file: FormRegister.jsx

The objective of this issue is to translate to portuguese

The translations are in the folder public/locales
To add portuguese you need create folder called pt and copy&paste the same files that are in any other language.

After this can change the files .json
Add list of the all files need change:

• common.json
• containerPetsCards.json
• createPet.json
• dashboard.json
• editPet.json
• editUser.json
• forgotPassword.json
• googleMapCard.json
• home.json
• landingPage.json
• medicalInformationCat.json
• medicalInformationDog.json
• navbar.json
• petsFilterForm.json
• profilePets.json
• resetPassword.json
• searchProtectionist.json
• searchVolunteers.json
• signIn.json
• socialMediaButtons.json
• whatsappMessage.json

La idea de esta Issue es traducir de español a ingles los siguientes archivos:
README.md y CONTRIBUTING.md

Steps to reproduce:-

1. Run the project by yarn dev.
2. Visit the url localhost:3000

You will see error for unresolved useModal file import pops up.

The file doesn't seems to exist in the hooks folder. Also, by looking at the current code it doesn't seems that the hook is being used anywhere inside App.tsx file apart from just initialization.

This issue aims to Create a profile user.
In Pet's Love, we have four kinds of users ADOPTER, VET, VOLUNTEER and SHELTER. This user page needs to work for all users.
It cannot be easy because the data between users' roles are similar.

https://www.figma.com/file/MK1mSVutBHbVXEo4VyfzVf/Pets-love-system-design?type=design&node-id=3128-20356&mode=design&t=xW1XQdtwFR1AWDUu-0

Please use the component in Pet Profile to build a user profile. In Figma, you can check the information that the profile needs to show. frontend_petsLove/src/pages/ProfilePetPage