Critter Club

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

Table of Contents

• Critter Club
  • Table of Contents
  • Live site
  • Backend repo
  • Introduction
  • Technologies
  • APIs
  • Launch Instructions
  • User Views
  • About the Developer

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:

Signup page for parent:

User signup page:

User login page:

Views for logged-in users:

• Dashboard:

• Browse:

• Search:

• Animal info before clicking on fact cards:

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

• Challenge questions:

• Challenge after submitting:

Mobile views:

• Dashboard:

• Animal:

• Challenge:

About the Developer

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