Skip to content

EmilFattakhov/WayHome

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

WayHome

WayHome is a Full Stack Web Application which helps owners find their lost pets. It's a user friendly application with ability to create a lost or found pet advertisement, track lost pet movement, easily connect to a person who has seen or found your pet. Application is built using ReactJS at the frontend and Ruby on Rails, Google Maps API and EmailJS and PostgreSQL DB at the backend. All the styles are custom-made CSS.

I made a video about the application, you can watch it on Vimeo instead of looking at screenshots and code https://vimeo.com/470348098

Let's take a look at the main page. First of all, we can sign in or sign up by clicking buttons accordingly at the navigation bar

MainPage

We can create a new account by filling name, email, password, confirming password and adding an avatar image

SignUp Form

We have succesfully created the account, all the user information is now stored at the PostgreSQL DB and local cookie has the session information. At the main page we can see all the pets, pets pictures are interactive and can be scrolled without opening a new page. Each of the pets can have one of three flags: "Scout Way Home" means that the pet is lost, "Returned Home" means that the pet if found way home and "In a Foster Home" means that the pet has been picked up by the volunteers.

LoggedIn MainPage

We can create a new AD by pressing "Create new ad" at the top pf the page, and new form will appear, where you can type all the parameters of the pet, like breed, colour, type, description, time lost, upload some pictures and most importantly, you can point to the location where it was lost on the main and the address will be determined automatically.

NewPet Form Point at the map

Or if you found a pet on the street you can click "I've found someone's pet" and be taken to a search component of the application. Here you can search through all the pets by typing colour, breed or animal type to see if the ad already exists.

Search Component

You can click on the pet's name and be taken to the main page of the animal, where you can see all the information and pictures in precise. Every user can create dofferent comments on the page as well as see the location where the pet was lost and spotted by other people by taking a look at the map.

Pet Main Ad Pet Main Ad2

If you've seen tht pet, you can click I've seen (name) button and point to the location where you've seen the animal on the map, and new spot will be added. It will be helpful for pet owner and searching volunteers to know where the animal was! Or if you found a pet you can press the button "I've found (petname)" and contact a person directly. Person will be automatically notified by the email containin the message and email which user can use to get back to you.

Contact User

Lastly,you can easily create a lost pet leaflet, save it as a PDF file and print it out to put on the streets. Application has a form which you can fill and get the file all ready in just a couple of clicks!

Contact User Contact User

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published