redxzeta / awesome-adoption Goto Github PK
View Code? Open in Web Editor NEWpet adoption near your area
Home Page: https://pawternityhub.netlify.app/
License: MIT License
pet adoption near your area
Home Page: https://pawternityhub.netlify.app/
License: MIT License
There are some files that contain inline style.
Would be better to organize it in css files.
The css file could be in the same folder where it is used unless there's a better suggestion.
May have to override the css from bootstrap
<Card style={{ width: "100%", paddingTop: 10 }}>
first paragraph has nested <p>
in Resources.js
separate them
Feel free to modify or update the paragraphs
Some Pets have multiple breeds and it creates a new line extending the height of the card.
Could have a Contributors section in the About Page and then have a link to this repo.
Anyone want to create a new logo for the site?
Replace PawHub in the Navigation bar with the logo
Add the logo to the site
create a new page that has a list of sites of donating to pet adoption places
Add <NavDropdown.Divider />
in the dropdown in the NavigationBar to separate All Pets
In the contributors page, some of them have a white background blending it in.
Add a black border around it or variety of colors
Info for adopting pets
Info about covid
Helpful links and styling the page if u can
Wondering what kind of backend should be implemented?
Purpose of it would be for users to sign up, login and share stories or favorite pets
Thinking of using Supabase, Express or Nest.
Any suggestions or ideas would be appreciated
Some of the Pets do not have images and and viewing their page bugs it out
If anyone wants to implementing some tests. I am not too familiar with it
Create a page for user login and user register page could include email, username, password.
If possible, add validation checks.
For the navigation bar, implement a drop down from react-bootstrap
, and then add links to login and register. The title could be Profile
Planning to implement supabase to handle the data.
Maybe store it in localstorage or something so there won't be in constant requests in App.js
?
Unless someone has a better solution
const [token, setToken] = useState("");
useEffect(() => {
axios
.post(
"https://api.petfinder.com/v2/oauth2/token",
`grant_type=client_credentials&client_id=${process.env.REACT_APP_PETFINDER_KEY}`
)
.then((response) => {
setToken(response.data.access_token);
})
.catch((error) => {
console.log(error);
});
}, []);
Migrate to Bootstrap 5 docs
"react-bootstrap": "^1.6.0",
"bootstrap": "^4.5.3",
"bootswatch": "^4.5.2",
these need updating
There might be some breaking changes and may need to update the code
I am not really familiar with testing.
If someone is up to implement it, go ahead
Home page seems lacking. Maybe add featured pets of the week or random pets.
Open to other features and feedback.
Feel free to remove the image and css if necessary
update pet state to const [pet, setPet] = useState({});
instead of ternary operator return pet ? ... : ..
line 37
use if
if pet is empty return the <Spinner />
if not return the petInfo <div className="petInfo">...
Clicking on a different pet type doesnt take u to the page and the link changes to http://localhost:3000/pets/pets/horse
Optimize the Resource page for best practices. Some of the code has <br>
tags or uses <b>
tags. Feel free to update the css and Resources.js
<br />
<br />
<b>
Pawternity Hub wants to help you stay safe and help you find a friend
that can keep you company during the pandemic
<br /> Check out the links below for more information about adoption
during Covid-19
</b>
<br />
If you know any more charities, feel free to add them to charities.json
. RIght now it is three.
Also taking suggestions to improve the site or add new features to the donate page
In PetType.js
, mouse hover over would transition to another image of the pet and then after returns to the original pet img.
Might also need to check if pet has more than one or none
Currently displays one page of pets
using this link https://api.petfinder.com/v2/animals?type=${type}&location=${zipCode}&limit=10&page=1
, in PetType.js
implement a next and previous button in PetType.js
to view the next page of pets
If we divide navbar with "logo" to left and menu to right I believe that is a good improvement.
Create an About page and put a link in the nav bar
Just put in lorem ipsum filler text and a filler image.
Add a 404 page when a user tries to enter a page that does not exist
and add an image of pets or something
put a button that helps users redirect to the home page, button redirect to /about
, and button for /pets
The site could use some more improvements so feel free to open a PR for anything that you think is an improvement or any issues that come up.
The goal is to make the website to have access to information on the pets to adopt.
The site could be accessed here: http://pawternityhub.tech/
Was trying to run the app in development mode so I could make changes. Then this compile error came up after doing yarn start
It can't be dismissed at the bottom it says so I can't make yarn ignore/dismiss this.
Revamping the home page
Two sections
section1 New background images of pets could be from free stock photo
Title and Adopt a buddy today could placed where you think looks best
section 2
would have the featured pet cards
implement a transition fade in
button to get another featured pets cards with another transition
Currently loads a blank before grabbin a data.
Was thinking of adding a spinner or loading before the data is fetched
Add some organizations or places to donate in charities.json
Feel free to create a pull request since there could be a lot of organizations or places
Update readme so beginners or newcomers clone project, set up a working environment, tips for new contributors, navigating through the project, links to bootstrap and react-bootstrap, mention each page has their own folder and anything you can think of
If there are any ideas you could think of, could make an issue or pr
due to the migration to using bootstrap 5, there were variable changes
in the about page, the github button needs fixing and would need to be change to use var(--bs-primary)
in the css
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.