Giter Club home page Giter Club logo

bird-bird-999's Introduction


Introduce

bird-bird-999 is a website that provides a rich bird field guide and sound resources for Taiwan.
It also has a membership system that allows enthusiasts to upload bird photography and participate in the joy of bird-watching together!

image

image

Technologies

  • React
    • React Hooks
    • React Router
  • SVG
  • CSS Animation
  • fabric.js
  • canvas
  • html2canvas
  • webpack
  • Firebase
    • Firebase Authentication
    • Cloud Firestore (Firebase database)
    • Firebase Storage
    • Firebase Hosting
  • NPM
  • Babel
  • RESTfulAPI
  • Google API
    • GOOGLE MAPS API
    • GOOGLE Account Login
  • Python
    • Web scraping (using Beautiful Soup) - WIKI page picture
    • Integrating and comparing JSON, CSV, and API files
    • Object-oriented programming with Python classes

Test User

Features

season map search

Clicking on the map yields different search results based on the season. 四季 Recording 2023-03-09 at 00 15 14 RWD of map page: image

Top20 hotspot in a region

The rank of hotspot was base on numbers of bird spieces present in that area. TOP20

Real-time search bird-related data

keyword search bird-related data: 鳥搜尋

Periodic search for birdwatching attractions: 景點搜尋

bird surprise box

Randomly recommend a kind of bird ! 驚喜包

upload bird photo (member)

Only members can utilize this component, which is available on the Member page, bird page, and hotspot page. image

customize profile pictures with scaling and moving

換大頭

Switch effect of login and register

夜鷺大 夜鷺小

Database Design

  • bird data image
  • region and hotspot infomation image image
  • upload bird photo image

User and database Interaction Workflow

image

image

bird-bird-999's People

Contributors

zabeth16 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.