ShayGali/zoo-website
react app with firebase and bootstrap
Zoo
This project was built as part of an react course.
We had to build a site that represents a zoo, with the option to add animals and edit the information about them.
The information is stored in a firebase firestore database.
The site is a responsive site built using bootstrap.
Tools
This project was bootstrapped with Create React App.
Pages
Home Page
The website home page.
| pc | phone |
|---|---|
![]() |
![]() |
Zoo Page
This page contains 3 buttons for select the type of the animal that the user can choose to see.
When he select a list of animals of the specified type will be shown.
The user can edit the animal data.
| description | pc | phone |
|---|---|---|
| on open | ![]() |
![]() |
| selected 1 | ![]() |
![]() |
| selected 2 | ![]() |
![]() |
Animal Page
When the user clicks on the view data buttons he will be navigate to this page.
He have the ability to edit the animal data. All changes will change immediately throughout the app and database.
| description | pc | phone |
|---|---|---|
| on open | ![]() |
![]() |
| edit | ![]() |
![]() |
Add Animal Page
The user have the ability to add a new animal to the zoo.
| pc | phone |
|---|---|
![]() |
![]() |
Firestore
The data in the firestore.














