/choose-your-own-adventure

Primary LanguageJavaScript

Choose Your Own Adventure

Three-day In-Class Assignment Working with React & Redux for Epicodus, Week 19

By Patrick Osten, Garrett Dean Brown & Danielle Thompson

Project began 3.1.21. Last updated 3.4.21.

Get in Touch

Name Contact Info
danithompson74 at gmail.com LinkedIn
gman9mm at live.com LinkedIn
posten.coding at gmail.com LinkedIn

Known Bugs

No known bugs at this time.

Report bugs here. | Request features here.

Description

This application walks you through the various choices an Epicodus faces during any given day of class.

MVP Objectives

  • #ILoveBlob #BlobLife.

  • React.js front-end with a focus on animations & parallax scrolling with React-Spring

  • Hard-code back-end responses (prompts/choices)

  • Stretch goal: refactoring hard-coded responses, etc. with C# as back-end

  • Make sure that we systemize how hard coding, etc happens. (CRUD??) Start by setting up front end ...

  • with state(gameStarted: true/false, prompt, choices, turn(?)) --> React only, no Redux.

Things that are repeatable:

  • Form to make choices
  • Prompts
  • Parallax scroll with repeatable background/images

Shortened Storyline

Splash Page & Intro --> Billboard wakes up --> feeling ready for the day (sunrise png) --> starts coding but bugs (bugs) --> ask Shawn (Shawn avatar) --> you are the magic (magic images) --> keep trying to solve the problem (laptop) --> oops its whiteboarding (end day)

User Stories

# Stories
1 A user should be able to pull the pink button.
2 A user should be able to move the blue blob.
3 A user should be able to click the "Day in the Life" header away, and click it back into view.
4 A user should be able to scroll through the parallax components and see new images and storyline info come into view.
5 A user should be able to click the round buttons to scroll to the next story segment.

Story Board Flow Charts

Story Board

Stretch Goals

  • Take in a user's name with an input box to plug into the story line.
  • Find a way to add in a choose your own adventure element to the prompts and images that come into view - perhaps with multiple parallax pages per storyline or maybe using ternary conditionals to toggle between views.
  • Find a way to refactor the GameControl page & parallax to not be so dang wieldy.

Technologies Used

  • Homebrew
  • VS Code
  • Git & GitHub
  • ES6 JavaScript
  • JSX
  • React Framework v17.0
  • React-Spring v8.0
  • React-DOM v.17.0.1
  • React Bootstrap v1.5.0
  • @react-spring/addons v.9.0.0-beta.33
  • react-use-gesture
  • hooks: useState(), useSpring(), useGesture(), useTrail(), useDrag()
  • create-react-app
  • npm install --save-exact react-scripts@3.2.0
  • npm install react-spring
  • webpack v5.11.1
  • Babel
  • ESLint
  • npm
  • node.js v15.8.0
  • Unsplash

Setup/Installation Requirements

To access the live page visit this site.

Running the Project Locally
For Mac Users
  • Access Terminal in your Finder, and open a new window.
  • Install the package manager in the Terminal, Homebrew, on your device by entering this line of code: $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)".
  • Once homebrew is installed, install Git, a version control system for code writers, with this line of code: brew install git.
  • Now, install Node.js through Homebrew with the following command: brew install node.
  • Confirm that node and npm (Node's package manager that is automatically installed alongside Node) are on your working system with two command lines node -v & npm -v, respectively returning something resembling v14.5.0 & 6.14.5 (or higher).
For Windows Users
  • Open a new Command Prompt window by typing "Cmd" in your computer's search bar.
  • Determine whether you have 32-bit or 64-bit Windows by following these instructions.
  • Go to Git Bash, click on the "Download" button, and download the corresponding exe file from the Git for Windows site.
  • Follow the instructions in the set up menu.
  • Go to the Node.js website and download the appropriate source code for your Windows operating system.
Cloning the Project
  • Go to this GitHub repository and click the green 'Code' button.
  • Clone this application with the following command:git clone https://github.com/dani-t-codes/choose-your-own-adventure.git.
  • (Optional) If you would like to save your own copy to your GitHub account, click the "Fork" button in the upper right hand corner of the main repository page.
  • Open the project in the code editing application of your choice like VS Code.
Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.\

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

Additional Resources

Legal, or License

This software is licensed under the MIT License.

Copyright (c) 2021 Patrick Osten, Garrett Dean Brown & Danielle Thompson