jsjoeio / mentored.dev

A gamified learning platform to help you become a web developer

mentored.dev

A gamified learning platform to help you become a web developer.

· Visit · Get in touch . Report Bug ·

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

This project uses yarn instead of npm. You can install it with Homebrew like so:

brew install yarn

Installing

After you've cloned the repo, running the following steps:

yarn

And then to start the project locally:

yarn dev

Then in your browser, navigate to http:localhost:8000/.

Running the tests

Currently, there are no tests 😱 but there will be in the future!

Deployment

CICD is currently set up with Netlify. When you submit a PR, Netlify App will deploy a preview and add a link in the PR. You should always PR into the staging branch which is our QA environment. Once it's approved, Netlify will deploy it to staging.mentored.dev.

When a new version is ready, you can submit a new PR to merge staging into master. This will deploy to the main URL for the app mentored.dev

Built With

• gatsby.js - The React web framework used
• TypeScript - "JavaScript that scales"
• ApolloClient - GraphQL client
• OneGraph - Used to integrate with GitHub OAuth
• styled-components - CSS-in-JS solution

Contributing

Please check the CONTRIBUTING.md for details.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

Distributed under the MIT License. See LICENSE for more information.

Acknowledgments

This project wouldn't be possible without these people and organizations

• Gatsby
• OneGraph
• @TejasQ
• Eric Matyas for music

Contributors

Thanks goes to these wonderful people (emoji key):

Prince Wilson 🐛	Bolaji Ayodeji 🐛	Andre Goncalves 🐛	Angie Jones 🐛	Jake Riordan 🐛	Tejas Kumar 💻 📦	Chris 🐛
Sean Grove 📦	benna100 ⚠️ 🐛 📓

This project follows the all-contributors specification. Contributions of any kind welcome!

mentored.dev's Issues

Add radio buttons for question

As a User, I should be able to use the arrow keys and enter to select a radio option.

Add funcitonality for Yes/No transitions, local keys and conclusion message + quiz results

#22 introduced some new features. Now, the user will have the ability to answer some 'Yes' 'No' questions which will change the next state.

You need to account for this.

There will also be a new type of message modification because there is now HAS_LOCAL_KEY which will grab information from another local file (js object or json). I'm thinking you'll have to create a function which takes in the state object then returns the modified message.

Oh and also the quiz answers:

• Handle Yes/No state transition
• Handle local keys with local object
• Write function to generate conclusion message + quiz results

Design: typewriting effect

Text should have a typewriting effect
react-typist

Add previous button

Similar to next, but going back

Add Key Terms Section to Lesson UI

• Add KEY_TERMS key which is an array of strings (we will add these to state and display on chalkboard)
• Display in section

Design: text and radio inputs

When asked for input, the inputs should be styled to match the style of the game.

Casing on answers

Converts strings to lowercase before submitting

Dialog: style & functionality

• Style with arrows
• Animate next arrow after stop talking
• Only show arrows after stop talking
• Add character title

Figure out typing animation

https://github.com/jstejada/react-typist

^ Might be the easiest solution

Design: create narrator

There should be a narrator character

Links for reference:

• Sid's blogpost on CSS animation in games
• Sid's pirate on Codepen

Add GraphQL Query to check for repo

Check if the user has a mentored-dev repo.

If they do, show success message.

If they don't, create one.

Write User Testing Guidelines

The plan is to send it to 5-10 people and get their feedback. The goal of this task is to write out guidelines for what they should test.

Design Dorms Map

The Dorms Map should look like the inside of a dorm building.

Maybe there are a few other places you can do in here...

Add intro to story and Adjust story dialog to fit box

The story could be updated a bit. It should give a short introduction about Professor character.

Also, remove the 'next' button at the very end.

Refactor OS Question to get it with JS

Diego said it's possible to get the User's OS with JavaScript

http://www.javascripter.net/faq/operatin.htm

Might be a good idea so then you can skip that question..

Add sound effects to Game

As a user, I should hear the Narrator talking and I should hear buttons clicks during the Game.

Add Functionality to add Visuals to Lessons

It would be great to fill the white space and use it to aid the lesson for the command line.

Maybe have a chalkboard, or white board, or screen where he can show things.

Watch TypeScript Course

https://egghead.io/courses/up-and-running-with-typescript

Design: Dashboard

After a user logs into the app, what will they see?

Add questions to story to test user knowledge

As a User, I should be able to answer questions to show I completed the lesson.

Quiz input validation not working?

"When I choose windows > yes and go on without filling in any of the answers to the questions and then all the way backwards I'm starting from the end of the quiz as if every answer was correct"

Wrong answer breaks dialog box

Also, when you get a wrong answer the back arrow button is not within the container box as the text takes up the space and pushes the arrow down.

Persist Login

If I login with OneGraph, the auth token should be stored in localstorage so that if I refresh the page, I don't have to login again.

Check Answer Key

It seems like some of the answers are not working as expected...Could be a good case for a unit test 😉

Add all theme colors

Currently, only some colors are in the project. To complete this, all colors must be in the lightTheme and the darkTheme.

Fix Mobile View

Currently, the map and the sidebar lay on top of each other on Mobile. Ideally, the map would be constrained and the Sidebar would be at the bottom or a slide out menu from the right.

Create input field

User should see input field when asked for data.

Create text container

Currently, there is no container for the text

Update README

It should be completed filled out. Maybe add some color to it like emojis, or pictures.

Inspiration: https://github.com/withspectrum/spectrum

Add contributors table: https://github.com/all-contributors/all-contributors

TODO

• Update todo areas
• Add contributors table
• Add images/emojis

Add lesson to story object

As a User, I should be asked to open my Terminal/Command Line depending on my OS.

Design Lesson UI

Add User Authentication

As a user, I should be able to log into the app using GitHub.

Thinking onegraph-auth might be the solution:
https://www.onegraph.com/docs/logging_users_in_and_out.html

Add TypeScript checking

https://www.arden.nl/setting-up-a-gatsby-js-starter-with-type-script-es-lint-prettier-and-pre-commit-hooks

May cause a bunch of errors in the beginning FYI

Add Lesson Overlay

Ideally, when you click on a lesson, it should open up as an overlay (similar to Duolingo) where there's dialog and you can walk through the lesson.

Press 'Enter' to enter game

As a User, I should be able to enter the game by clicking or pressing Enter.

Design: Map Layout

Ideally, it should look like Duolingo's or like Pokemon's.

Add multi-map functionality

Currently, there is only one map. However, we need to add functionality so that when you click on a building or location, it opens a new map within the same window.

Hide input until typing is finished

It seems a bit strange to show the input before the narrator is done speaking.

Ideally, this input will dissolve into the dialog (i.e. opactiy 0 to opactiy 1)

Update README

This important because other people will see this now that it's public.

Design Professor's Map

The Professor's Map should look like the inside of a nice house. Maybe here you can chat with the professor, change what he looks like to make him a her or whatever you need.

Add cursor hand for buttons you can click

Arrow buttons (next/previous)

Add Unit Testing

Add jest and react-testing-library to the project so that we can write tests.

Ideally, add a script in the CI pipeline that runs the tests. I think you might be able to do this with Netlify. (yaml file)?

Fix react-keyframes in project

You can use the package now.

Design: dialog text

Dialog text should show up in a box like Pokemon

Create Radio buttons for option

Use should see radio buttons when asked a question which has one answer.

Design: Landing Page/Login Screen

Right now, it's just a button but it should be more welcoming and fun 😄

Check <AudioPlayer /> Hooks

Running into some issues.

Not sure what it is. Could be the conditional or me breaking the rules of hooks somehow. I'll need to look into this later.

Use arrow keys to navigate scene

As a User, I should be able to navigate to the next scene by pressing the right arrow key or clicking.

Design Ritchie Hall Map

The Ritchie Hall Map should look like the inside of an academic building.

Refactor state machine

I don't think I should be trying to store data in my state machine...at least, it's causing me a bunch of issues.

Instead, let's refactor things to useState since I only have two properties: name and os

I'll need to also modify the story.tsx to not have VALUE and instead have some Boolean that indicates HAS_INPUT or something. Also need to use some templating syntax inside the messages.

Then some sort of key that says, "Hey you need to modify MESSAGE", like HAS_VAR or something. and then VAR_NAME, to grab it from state...