Code Monkey home page Code Monkey logo

devwit's Introduction

DevWit

a Turing mod 3 solo project

By: Lola Dolinsky

Table of Contents

Project Overview

This app was created with a specific audience in mind: Software Developers with a sense of humor who might consider a moonlight career in comedy! With this app, a user is greeted with a welcome message and description on the home page. The user can then navigate to a 'Get Some New Material' page where there are two options: One button generates one random programming joke; Another generates ten random programming jokes. The user can then choose to add a joke to their set. On clicking the 'My Set' tab, the user will see the jokes that they liked displayed. If the joke bombs, or maybe it seems less funny now... the user can remove it from their set.

Visit DevWit deployed site here

DevWit in Action:

DevWit-gif

Goals

  • Use the technology you’ve been working with over the course of the module to demonstrate mastery of the following:
    • React fundamentals
    • React Router
    • Asynchronous JavaScript
  • Integration and unit testing utilizing react-dom and Jest libraries
  • Work within constraints to deliver a unique product for an audience which helps them in some way
  • Utilize an API build an app that displays data relevant to a specific audience

Your applications should have the following core functionality: Display the data from the API in a way that applies directly to your audience Ability for users to store/manipulate the data displayed in the application, such as favoriting or adding to a list

Technologies And Tools

  • React (w/ hooks)
  • React Testing (with Jest)
  • Global state management w/ use-global-hook
  • React Router
  • JavaScript ES6
  • JSX
  • Circle CI
  • git version control
  • GitHub Project Board
  • Heroku
Setup
  • Click the Fork button on the top right-hand corner of this page
  • Clone the repository down and cd into the repo on your local machine by running:
  • Install the library dependencies by running:
    • npm install
  • To verify that it is setup correctly, run npm start in your terminal.
  • Go to http://localhost:3000/ and you should see the site.
  • Enter control + c in your terminal to stop the server at any time.
  • Run npm test to view passing unit and integration tests
  • Add your changes, push up to GitHub and submit a pull request

Challenges

  • Learning and implementing use-global-hook for state management of jokes displayed in My Set
  • Producing all app logic, API calls, testing suites, and styling in less than a week

Wins

  • Managing state via use-global-hook
  • Making API calls to a remote joke server
  • Passing, manipulating, and displaying data on the UI
  • 100% Lighthouse Accessibility score

Roadmap

With more time, I would like to enhance the UI/UX by:

  • Adding a "crickets/bomb" or "applause" button to indicate whether the joke was successful
  • Adding a form to joke cards so that user can write notes and/or edit
  • Enhance stylings
  • Link to external Express server so that original jokes can be edited by the user and saved

Project Managers

Leta Keane

Will Mitchell

Contributor

Lola Dolinsky

Lola Dolinsky

devwit's People

Contributors

lo-la-do-li avatar

Watchers

Chadrick Dickerson avatar  avatar

devwit's Issues

Add stylings

As a user,
I want to navigate to a page with clean styling and content.

Component/JokeCard

As a dev,
I should have a JokeCard component to display mock joke data
that corresponds to the properties of a joke object fetched from an API
so that I can set up my render.

Browser Router/set-up

As a user,
when I use the DevWit website,
I should be able to navigate to three different pages/views:
Home, Get Material, & Set,
and see the url in browser reflect my current page.

Components/Basic page setup

As a dev,
I should be able to view different components rendered
when I click on links indicating the page view
so that I know my router and imports are configured correctly.

Dataflow/PropTypes

As a dev,
I should specify/declare propTypes for the JokesContainer and JokeCard components
so that I will know what changes to make to my app
in case the API data structure changes.

GetMaterial/Add to MySet

As a user,
I should be able to browse through joke cards,
click an add button,
and view the added card when I navigate to My Set.

JokeData API

As a dev,
I should be able to make an API fetch request to the Official-Joke API,
and display fetched single random joke or 10 random jokes on the UI
so that I no longer need to use test data.

Component/JokesContainer

As a dev,
I should have a container component to map and display joke cards
that I can view and reuse to display filtered jokes.

MySet/Remove JokeCard

As a user,
I should be able to remove a joke card from My Set,
and see it disappear from the UI,
so that only jokes I like are included in the set.

Fix Bug/JokeCard Buttons

As a user,
I should only be able to add a joke to my set using the add button on the Get Material
and remove a joke from my set on the My Set page
and only see the/click the buttons that trigger each feature, respectively.

Testing Components

As a dev,
I should write tests for each component,
so that I know data is rendering correctly
and user events are firing appropriately.

Testing & Setup/mockData

As a dev,
I should have a mockData file that contains
an object with properties "joke, and jokes, and set",
so that I can set up my render and test my components
without making an API call.

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.