Link to Project Spec - Week long project: concept, design and architect in under 7 days.
Setup instructions | Technologies used | Overview | Organizational Tools | Examples | Learning Goals | Contributors | Future features | Reflections & Wins
- Fork this repo by clicking the
Forkbutton in the upper right of this page - Clone your new repo down to your local machine in your chosen directory
- Type
npm installinto the command line to install all dependencies - Type
npm startinto to the command line to start the React app. A browser window will appear running a local host url
Attention: The API that supported this application was recently made inaccessible. The new data being used for Shakesperean quotes is hardcoded data. Therefore the code you see in the src folder might not accurately reflect the code you see in the browser. This quick deployment is a short term fix.
- Doth Translate is an application inspired by my previous middle school students and my favorite unit- Shakespeare! Elizabethan English is not easy to interpret, but it sure is fun to try! With the help of Doth Translate, a teacher can get students excited about diving into a working with Shakespearean texts by introducing them to popular Shakespearean quotes. With this simple application, students can work independently, in pairs, or in groups to generate quotes by theme or by Shakespearean play and use the context clues provided on hover to work to create their own interpretations. Students can save their interpretations before they move to their next quote of choice, so that when teachers come around to check for understanding, saved interpretations will be viewable.
- Doth Translate allows a user to:
- Choose a quote category.
- Browse and choose quotes further broken down by play title or theme.
- Generate quotes from narrowed down selections by the click of a button. Don't like that a quote? Is one too difficult or just not interesting to you? Choose another.
- See context clues for words on hover: the definition will pop up in a tooltip allowing students to use those clues to help create their interpretations.
- Type and save your interpretation of the quote for later use.
- Allow students to review and edit eachother's interpretataion. Click the pencil to go back and edit a previously saved interpretation.
- Save quotes you'd like to come back to.
- Delete quotes that are clogging up your favorites.
- Coming Soon: Go back and edit your saved quotes.
- Give each student poster paper. Have them copy the quote from the application and define the words underlined in the sentence. Have students draw connections between the definitions and words in the sentence and use a concept web to interpret specific phrases in the sentence.
- Have a laptop set up at each desk. Generate a quote at each station. Play musical chairs (preferably to fit the times). Have students rotate around the room in partners to visit each station and take note of their translation, making sure to save the quote before moving to the next station. The next group should revisit the same quote to edit the interpretation - not changing but adding to the original quote.
- Couple with teacher pay teacher ideas to enhance a lesson: TPT Shakesperean Language Lesson Plans
- Use the application as a simple warm up or as practice when students finish an assignment early and are looking for something to do.
- Use this application solely for a lesson on context clues! TPT Context Clues Lesson Plans
- This application is built using functional components in React.
- Router is utilzed to allow a user to navigate back and forth between paths, and local storage is used to persist data, where applicable components use url query parameters on page load to match id in local storage to retrieve saved interpretations. The routing makes the application very dynamic. The route is created based first on either the theme or title category and then by the topic chosen. Then a random quote is fetched based on those two queries so users can filter down very specifically by theme topic or play title.
- MVP's user flows for both happy and sad paths are thoroughly tested using Cypress.
- Stephanie Magdic (Author) - Favorite Shakespeare Play: 'Midsummer Night's Dream'
- A user will be able to choose their reading level and get dictionary defintions and quotes leveled to their reading level.
- I would like to make this responsive to an ipad as well since many schools use ipads as opposed to laptops especially in grade 5.
- With more time, I plan to add PropTypes and a data cleaning function: I would like to filter thorugh my definition data and if a defintion is not found for a word, I would like to instead return null so that my component can read that prop. I would also like to provide multiple defintions per word if that word has more than one meaning.
- A user will be able to interpret a saved quote.
- I would like to further break down my components to handle a single responsibility. As functionality was added in a short amount of time, some components are larger than I would like.
- I would like to test my non-MVP user flows.
- Code Architecture: I would like to refactor the applications code so if follows purely functional programming principles.
- Wins:
- I was able to complete much more functionalty and build out far beyond my MVP than I had originally thought possible in just a week.
- I was able to conceptualize, plan, wireframe, test, and build the application in under 7 days, while building other applications required for the final assessment.
- I was able to consume two API endpoints to provide quotes and context clues to make this application more student friendly.
- I was able to learn and use a new npm package, react tooltip that allowed for a user friendly way to see context clues to help with interpretations.
- Reflections:
- The dictionary API I was originally using ran into an authentication error midway through the project. I had to find another API, subscribe and update my logic in my fetch requests.