Skip to content

A kid-friendly web application for learning about animals. Users can earn animal badges and earn points to level up their player status by answering questions about each animal.

Notifications You must be signed in to change notification settings

tmflower/critterclub

Repository files navigation

Critter Club

A kid-friendly web application for learning about animals, earning animal badges, and accumulating points to achieve higher status.

Table of Contents

Live site

🐞 🐸 🐷 Critter Club 🦉 🦊 🐙

To demo the site without setting up an account, you may use the demo account:

  • username: SadieCat
  • password: meow!345

Backend repo

All backend code has been moved into its own repo located at: Critter Club Backend

Introduction

Upon registering and logging in, the app welcomes the user to their personalized dashboard. The dashboard displays the user's current player level, determined by the number of points they've earned. Users will also see any badges they've earned, and options for viewing animal information by browsing, searching, or random selection.

Each animal informational page displays facts, videos, and photographs about the selected animal. Each page also offers the user the option to earn a badge for that animal and earn points toward leveling up by answering questions based on the facts provided. New users begin at the "Observer" level and attempt to earn their way up to "Zoologist". Users must register for an account and be logged in to access the app, and a parent account is required in order to register a user account.

Technologies

  • React 18.2.0
  • Node 16.17.1
  • Express 4.18.2
  • Postgres 14
  • MUI 5.11.2

APIs

  • Animals API
    • Used to access animal facts
  • Unsplash API
    • Used to access animal photos
  • Media API
    • Used to access codes for requesting preselected, kid-friendly images and videos

Launch Instructions

To install and run this project locally:

  1. Install postgres.
  2. Clone the repo: critter-club
  3. Use critter-club.sql to create and seed the database
  4. Navigate into each directory for frontend and backend, and run npm start:
    • Backend runs on port 3001
    • Frontend runs on port 3000
  5. To run tests: navigate into directory for frontend and backend, and run npm test

User Views

Landing page seen by all visitors, whether logged in or not:

landing

Signup page for parent:

parent page

User signup page:

signup

User login page:

signup

Views for logged-in users:

  • Dashboard:

dashboard

  • Browse:

browse

  • Search:

browse

  • Animal info before clicking on fact cards:

animal page with facts closed

  • Animal info with facts showing (user can toggle fact to open or close):

animal pages with facts showing

  • Challenge questions:

challenge

  • Challenge after submitting:

challenge completed

Mobile views:

  • Dashboard:

dashboard mobile

  • Animal:

animal mobile

  • Challenge:

challenge mobile

About the Developer

😊 Please visit my portfolio for more examples of my work.

About

A kid-friendly web application for learning about animals. Users can earn animal badges and earn points to level up their player status by answering questions about each animal.

Topics

Resources

Stars

Watchers

Forks