Skip to content

MaeYoungPhan/MdBayGameReact

Repository files navigation

The Maryland Bay Game

The Official Chesapeake Bay Activity App for Fun From the Bridge to the Beach

Application Overview

Each year, thousands flock to Maryland’s eastern shore for vacation. The route from the Chesapeake Bay Bridge to the beach is scenic … and long. In the days before smartphones and tablets, the Maryland Bay Game, an activity book featuring games and trivia about the Chesapeake Bay watershed, was the answer to road trip boredom. The book was handed out at the toll booths, courtesy of the State of Maryland. The game lasted several years in the late 90’s and early 2000’s, before falling into oblivion.

Purpose

By re-creating key features of the original Maryland Bay Game, The Maryland Bay Game web application enables new generations of Maryland beach-goers to experience the fun and become lifelong protectors of one of America's most unique natural treasures.

The server is available here. This app was initially built in two weeks as a final project for my full-stack web dev program.

The Original Maryland Bay Game

Adapting the Bay Game for web use for me has been recreating a memory. I hope 90’s kids, especially those who grew up in DelMarVa, will find it awesomely nostalgic. To sum it up, it’s a whole vibe. As such, I tried to stay true to the OG 1997 activity book as much as possible. Here are some excerpts from that booklet for reference. (This explanation is also a little bit so you’re not like, “WTF. Is this comic sans?!” when you clone this masterpiece.)

Cover Page

Scavenger Hunt

Rivers and Streams

Features

  • Users can view the Scavenger Hunt page where they can find bay-related items they see along Route 50. Images can be reset for future play.
  • Users can use checkboxes to mark-off Rivers and Streams they find along Route 50.
  • Users can keep a Record of Trips. They can view, edit, and delete past trips, and add a new trip record.

Technologies Used

JavaScript React CSS3 HTML5 Bootstrap Adobe Photoshop Git GitHub

Installation

  1. Clone the application.
git clone git@github.com:MaeYoungPhan/MdBayGameReact.git
  1. Access and clone the server here.
  2. Run the server using the debugger or in the terminal.
  3. Launch the client
npm install
npm start

Note: The client runs on localhost:3000 while the server runs on localhost:8000

Planning

Wire Frame

ERD

Acknowledgements

🥔 The Django Taters for the debugger, troubleshooting, and emotional support. I love you guys.

🧙 James Linkous for the original responsive nav bar that ultimately helped me find the best solution for this project. Check out his Github for some true coding wizardry.

📚 Jo, Becky, and the Talbot County Free Library for finding the original activity book. Libraries are the best. Please support them. ♥️

🐐 Coach Steve, Sydney Dickson, Dakota Lambert and my colleagues in Cohort 60 for being badass human beings and teaching us to be developers.

Adapted for Web By

Maegan Phan

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published