https://github.com/shaygali/zoo-website

react app with firebase and bootstrap
https://github.com/shaygali/zoo-website

bootstrap course-assignment firebase firestore netlify react react-router reactjs

Last synced: 2 months ago
JSON representation

react app with firebase and bootstrap

• Host: GitHub
• URL: https://github.com/shaygali/zoo-website
• Owner: ShayGali
• Created: 2022-06-29T13:05:09.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-29T12:43:46.000Z (over 2 years ago)
• Last Synced: 2025-01-13T08:46:15.143Z (4 months ago)
• Topics: bootstrap, course-assignment, firebase, firestore, netlify, react, react-router, reactjs
• Language: JavaScript
• Homepage: https://zoo-websize.netlify.app/
• Size: 4.48 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Zoo

[Link to netlify page](https://zoo-websize.netlify.app/)

[![Netlify Status](https://api.netlify.com/api/v1/badges/a7a9afb0-c388-4d56-9d62-53ef1d439cdb/deploy-status)](https://app.netlify.com/sites/zoo-websize/deploys)

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

![React.js](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![React_Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

![Firebase](https://img.shields.io/badge/firebase%20-%23039BE5.svg?&style=for-the-badge&logo=firebase)

![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)

![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)

[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FShayGali%2Fzoo-website&count_bg=%2379C83D&title_bg=%23555555&icon=react.svg&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Pages

###  Home Page

The website home page.

pc | phone

:-:|:-:

![Home page](./pages%20images/pc/home%20page.png)|![Home page](./pages%20images/phone/home%20page.jpg)

###  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|![Zoo page on open](./pages%20images/pc/zoo-on%20open.png)|![Zoo page on open](./pages%20images/phone/zoo-on%20open.jpg)

selected 1|![Zoo page on select](./pages%20images/pc/zoo-selected.png)|![Zoo page on select](./pages%20images/phone/zoo-selected.jpg)

selected 2|![Zoo page on select](./pages%20images/pc/zoo-selected2.png)|![Zoo page on select](./pages%20images/phone/zoo-selected2.jpg)

###  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|![Animal page on open](./pages%20images/pc/animal%20page.png)|![Animal page on open](./pages%20images/phone/animal%20page.jpg)

edit|![Animal page edit](./pages%20images/pc/animal%20page%20-edit.png)|![Animal page edit](./pages%20images/phone/animal%20page%20-edit.jpg)

###  Add Animal Page

The user have the ability to add a new animal to the zoo.

pc | phone

:-:|:-:

![Add Animal page](./pages%20images/pc/add%20animal.png)|![Add Animal page](./pages%20images/phone/add%20animal.jpg)

###  Firestore

The data in the firestore.

![Firestore](./pages%20images/firestore.png)