Giter Club home page Giter Club logo

dad-jokes's Introduction

Stretch Technology Group Project

The primary goal of this 'stretch' project was to engage in learning a new technology that was not directly taught to us in our classes at Turing. We were directed to choose a limited MVP, set our own learning goals, iterations, and deadlines. We needed to plan carefully, push ourselves, step out of our comfort zones, and self-direct. The project was built using React and React Router, and tested using React Testing Library, Jest, and Cypress. The MVP of our project is relatively simple, testing was our main focus. None of us had any previous knowledge of the Cypress testing framework, and by the end of the project we were able to construct a robust testing suite integrating Cypress for integration tests.

Project Description

The complete project spec and rubric can be found here.

Setup Instructions

  1. Fork this repository.
  2. Clone it down to your local machine with git clone <your SSH Key>.
  3. Change into your directory with
  4. Run npm install to compile the React application.
  5. Run npm install cypress --save-dev to install Cypress.
  6. Run npm start to see the app running locally.
  7. Run <your text editor> . to see the code in your text editor.
  8. Run npm test to see all of the tests running in your Terminal.
  9. Run npx cypress open to run all Cypress test.

User Experience

  • The user (Ideally a dad or enjoyer of 'dad jokes' who needs help with remembering a large backlog of corny setups and punchlines), should be immediately greeted by a 'dad joke,' randomly acquired from an API.
  • If the API is not available, the user should see an error message
  • If there is a joke, the user should be able to click the 'favorite' button to save it
  • The user should be able to click on the 'User Icon' button to go to their personal joke page
  • The user should be able to click on the 'Add a joke' button to go to the 'New joke' form
  • The user should not be able to click the 'submit' button on the 'New Joke' form unless there is something added to the Input field
  • After the user inputs a joke and clicks 'submit,' they should then be able to see their added joke when navigating to the personal joke page
  • After the user clicks 'favorite' on the home screen, they should be able to see the favorited joke on their personal joke page
  • The 'Return to Home' button should only appear when the user is not on the home page
  • The user should be routed to the 'Random Joke' page after clicking the 'Return to Home' button

The Working Application

Favorite-A-Joke Create-Own-Joke Cypress-Running

Learning Goals

  • Firm understanding of how to use Cypress
  • Become more comfortable with 'best use practices'
  • Gain a deeper understanding of React and React Router

Application

Should:

  • Have a home page that displays a random joke
  • Have a nav bar with buttons to see the form page and user page
  • Form page should have a working form that takes inputs and creates a card
  • User page should display all user created cards and users favorited cards

Programming Languages and Technology Used

  • React Library
  • React testing Library, Jest, and Cypress
  • SCSS
  • NPM to compile the application and run tests

Contributors

Creators/Owners

Project Managers

dad-jokes's People

Contributors

calebcyphers avatar jdxsmith avatar peytonjo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.