DOKES

Abstract

Dokes is a dad joke application built utilizing React and Router, Cypress testing of DOM elements and content, as well as our new tools of MUI and GSAP we have decided to delve into for this project.

Goals and Objectives

• Build a React/ Router application to hone our skills
• Utilize Cypress for testing of our content and DOM items for happy and sad paths
• Research and Implement MUI library components and GSAP animations for our build to learn, apply and add to our skill list
• Refine our Git workflow and Agile practices
• Have fun fleshing out our own stories as developers

Technologies

Illustrations

Features

• App was built up using MUI components inside a React application frame
• A user can visit the page to see a random Dad Joke
• New jokes can be called with a button click
• Jokes can be saved to and deleted from their 'Pocket' page
• App background and developer info can be found on the About page
• Page breaks allow for consistency across multiple devices
• Fun GSAP animations
• A11y practices implemented for site content and navigation
• Deployed and accessible anywhere via surge.sh

Possible Future Extensions

• Local Storage
• User Logins
• Joke Ratings
• Joke Comments

Milestones

• After getting the hang of MUI and how easy it is to build consistent components we all feel that this is a tech that will be utilized moving forward on our projects.
• Our collaboration was solid. We were all able to help explain and understand what the others had been researching and building so that we could replicate each others work if we needed to do so.
• We each feel that we were able to get a very solid cursory understanding of our new technologies (MUI and GSAP), make growth in our core technologies (JS, React, Router, HTML and CSS) and gain a more thorough understanding of how to best utilize Cypress testing.

Challenges

• MUI and GSAP do not play well together. We found this is because of how MUI builds the components by making multiple children. Proper attention to selection was a big step in resolving these issues.
• We had very odd issues with our deployment on Surge. Apple devices would not render in our backgrounds which was also apparently due to where we originally placed them.
• GSAP has a very steep learning curve. This project was not really enough time to dig more into much more than simple uses for now.
• Construction with MUI was also challenging, but once we realized how MUI was rendering everything. Using the React dev tools extension was a huge stepping stone to understanding and applying MUI components properly.

Set Up

Deployed at dokes.surge.sh

Local Installation

1. Clone the repo

   git@github.com:thomedpete/Dokes.git

2. Enter the directory and install NPM packages

   npm install
   npm start

3. Enter the following url in your browser: http://localhost:3000/
4. Explore the website

Sources

• Dad Joke Generator
• Every Last Drop
• Canva

Contributors

• Ian McIntosh
• Thomas Peterson
• Matt Walter

Project Specs

• The project spec & rubric can be found here