├── static ├── .gitkeep ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── animal-dose-logo.png ├── animal-dose-footer-logo.png ├── reset.css ├── lion_silhouette_left.svg ├── lion_silhouette_right.svg ├── lion_outline_animated.svg ├── lion_outline_right_animated.svg ├── tiger.svg ├── tiger_outline_animated.svg └── button_outline_animated.svg ├── cypress.json ├── config ├── prod.env.js ├── dev.env.js └── index.js ├── cypress ├── fixtures │ └── example.json ├── plugins │ └── index.js ├── integration │ ├── test-random-fact.js │ └── test-post-comment.js └── support │ ├── index.js │ └── commands.js ├── .editorconfig ├── .gitignore ├── .babelrc ├── .postcssrc.js ├── src ├── main.js ├── components │ ├── Footer.vue │ ├── CommentContainer.vue │ ├── Header.vue │ ├── AnimalCard.vue │ ├── UpdateModal.vue │ ├── NewCommentForm.vue │ ├── DeleteComment.vue │ ├── Donation.vue │ ├── ButtonContainer.vue │ └── UpdateComment.vue └── App.vue ├── index.html ├── LICENSE ├── package.json └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulhighum/Animal-Dose/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulhighum/Animal-Dose/HEAD/static/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulhighum/Animal-Dose/HEAD/static/favicon-32x32.png -------------------------------------------------------------------------------- /static/animal-dose-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulhighum/Animal-Dose/HEAD/static/animal-dose-logo.png -------------------------------------------------------------------------------- /static/animal-dose-footer-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulhighum/Animal-Dose/HEAD/static/animal-dose-footer-logo.png -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | .env 4 | /dist/ 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from "vue" 4 | import App from "./App" 5 | 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: "#app", 11 | components: { App }, 12 | template: "" 13 | }) 14 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animal Dose 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | } 18 | -------------------------------------------------------------------------------- /cypress/integration/test-random-fact.js: -------------------------------------------------------------------------------- 1 | describe("Random Animal Fact", function(){ 2 | it("Tests app grabs random fact", function(){ 3 | cy.visit("https://daily-animal-fact.firebaseapp.com/") 4 | cy 5 | .get("#AnimalCard") 6 | .find("h2") 7 | .should("exist") 8 | cy.get("#scientific-name").should("exist") 9 | cy 10 | .get("#AnimalCard") 11 | .find("img") 12 | .should("have.attr", "src") 13 | cy 14 | .get("#AnimalCard") 15 | .find("p") 16 | .eq(1) 17 | .then(($p) => { 18 | const fact = $p.text() 19 | console.log(fact, $p) 20 | cy.get("#new-fact").click() 21 | cy.get("#AnimalCard").find("p").eq(1).should("not.have.text", fact) 22 | }) 23 | 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Paul Highum 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /cypress/integration/test-post-comment.js: -------------------------------------------------------------------------------- 1 | describe("Random Animal Fact", function(){ 2 | it("Tests CRUD functionality.", function(){ 3 | cy.visit("https://daily-animal-fact.firebaseapp.com/") 4 | cy 5 | .get("#AnimalCard") 6 | .find("img") 7 | .should("have.attr", "src") 8 | cy.get("#ButtonContainer").find("button").eq(0).click() 9 | cy.get("#name").type("Amber") 10 | cy.get("#new-comment").type("Helps Paul all the time") 11 | cy.get("#submit").click() 12 | cy.wait(1000) 13 | cy.get("#CommentContainer").find("li").last().should("have.text", "Amber: Helps Paul all the time") 14 | cy.get("#update-comment").click() 15 | cy.get("#UpdateComment").find("li").last().find("input").click({force: true}) 16 | cy.get("#update-checked").click() 17 | cy.get("#new-comment").type(" and she loves this animal app.") 18 | cy.get("#submit-update").click() 19 | cy.wait(1000) 20 | cy.get("#delete-comment").click() 21 | cy.get("#DeleteComment").find("li").last().find("p").should("have.text", "Helps Paul all the time and she loves this animal app.") 22 | cy.get("#DeleteComment").find("li").last().find("input").click({force: true}) 23 | cy.get("#delete-checked").click() 24 | }) 25 | }) 26 | -------------------------------------------------------------------------------- /static/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /src/components/CommentContainer.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | 62 | -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 7 | 12 | 67 | -------------------------------------------------------------------------------- /src/components/AnimalCard.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "daily-animal-fact-frontend", 3 | "version": "1.0.0", 4 | "description": "The frontend for the daily animal fact app", 5 | "author": "Paul Highum ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "cypress": "^2.1.0", 14 | "dotenv": "^5.0.1", 15 | "npm": "^6.0.0", 16 | "stripe": "^5.5.0", 17 | "vue": "^2.5.2", 18 | "vue-stripe-elements": "^0.2.3" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^7.2.6", 22 | "babel-core": "^6.22.1", 23 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 24 | "babel-loader": "^7.1.4", 25 | "babel-plugin-syntax-jsx": "^6.18.0", 26 | "babel-plugin-transform-runtime": "^6.22.0", 27 | "babel-plugin-transform-vue-jsx": "^3.7.0", 28 | "babel-preset-env": "^1.3.2", 29 | "babel-preset-stage-2": "^6.22.0", 30 | "chalk": "^2.3.2", 31 | "copy-webpack-plugin": "^4.5.0", 32 | "css-loader": "^0.28.10", 33 | "extract-text-webpack-plugin": "^3.0.0", 34 | "file-loader": "^1.1.11", 35 | "friendly-errors-webpack-plugin": "^1.6.1", 36 | "html-webpack-plugin": "^2.30.1", 37 | "node-notifier": "^5.1.2", 38 | "optimize-css-assets-webpack-plugin": "^3.2.0", 39 | "ora": "^1.4.0", 40 | "portfinder": "^1.0.13", 41 | "postcss-import": "^11.1.0", 42 | "postcss-loader": "^2.1.1", 43 | "postcss-url": "^7.3.1", 44 | "rimraf": "^2.6.0", 45 | "semver": "^5.3.0", 46 | "shelljs": "^0.7.6", 47 | "uglifyjs-webpack-plugin": "^1.2.2", 48 | "url-loader": "^0.5.8", 49 | "vue-loader": "^13.3.0", 50 | "vue-style-loader": "^3.0.1", 51 | "vue-template-compiler": "^2.5.2", 52 | "webpack": "^3.11.0", 53 | "webpack-bundle-analyzer": "^2.11.1", 54 | "webpack-dev-server": "^2.11.2", 55 | "webpack-merge": "^4.1.2" 56 | }, 57 | "engines": { 58 | "node": ">= 6.0.0", 59 | "npm": ">= 3.0.0" 60 | }, 61 | "browserslist": [ 62 | "> 1%", 63 | "last 2 versions", 64 | "not ie <= 8" 65 | ] 66 | } 67 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![logo](./static/animal-dose-logo.png) 2 | 3 | screen shot 2018-02-27 at 2 41 05 pm 4 | 5 | ## App Description 6 | Welcome to Animal Dose, a Vue web app that displays random animals facts. Users can generate new facts, add comments, and make a donation. 7 | 8 | ## User Experience 9 | A user opens the web app and is presented with an animal name, animal scientific name, animal image, and a fact about that animal. If there are any comments associated with that animal they will display beneath the fact. The user has the ability to add a new comment, change a comment, and delete comment. The user can also make a donation. For a demo video please click [here](https://photos.app.goo.gl/NYflVME8ItgorpVn2) 10 | 11 | 12 | 13 | ## Installation Instructions 14 | Using the app does not require any installation, just visit https://daily-animal-fact.firebaseapp.com/. You are also free to use the source code for both the fronted of this app, located in this repository, and the backend of this app, located in the [backend repository](https://github.com/paulhighum/Daily-Animal-Fact-Backend). To install the backend please visit the other repository. To install the frontend please follow these installation instructions: 15 | 16 | Fork and clone this repository. 17 | 18 | Navigate into daily-animal-fact-frontend 19 | 20 | ### Build Setup 21 | 22 | ``` 23 | # install dependencies 24 | npm install 25 | 26 | # serve with hot reload at localhost:8080 27 | npm run dev 28 | 29 | # build for production with minification 30 | npm run build 31 | 32 | # build for production and view the bundle analyzer report 33 | npm run build --report 34 | ``` 35 | 36 | Vue: If you need help with Vue visit the [Vue docs](https://vuejs.org/v2/guide/). For a detailed explanation on how vue-cli works, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 37 | 38 | Stripe: In order to use the stripe functionality of this app you will need to create a stripe account [here](https://stripe.com/). From there you will need to click on your dashboard and then find your publishable key and secret key, which should be located under the API menu on the lift hand side. You will then need to include these keys in the code you cloned, the secret key goes in the backend .env file you will need to make and the publishable key goes in the frontend Donation component. You can find the stripe docs [here](https://stripe.com/docs) 39 | 40 | 41 | ## Technologies 42 | Vue.js, JavaScript, HTML, CSS, Stripe 43 | 44 | ## Author 45 | [Paul Highum](https://github.com/paulhighum) 46 | 47 | ## License 48 | MIT 49 | 50 | ![footer logo](./static/animal-dose-footer-logo.png) 51 | -------------------------------------------------------------------------------- /src/components/UpdateModal.vue: -------------------------------------------------------------------------------- 1 | 19 | 25 | 122 | -------------------------------------------------------------------------------- /src/components/NewCommentForm.vue: -------------------------------------------------------------------------------- 1 | 15 | 53 | 54 | 155 | -------------------------------------------------------------------------------- /static/lion_silhouette_left.svg: -------------------------------------------------------------------------------- 1 | lion_silhouette_left -------------------------------------------------------------------------------- /static/lion_silhouette_right.svg: -------------------------------------------------------------------------------- 1 | lion_silhouette_right -------------------------------------------------------------------------------- /src/components/DeleteComment.vue: -------------------------------------------------------------------------------- 1 | 21 | 55 | 197 | -------------------------------------------------------------------------------- /static/lion_outline_animated.svg: -------------------------------------------------------------------------------- 1 | lion_outline -------------------------------------------------------------------------------- /static/lion_outline_right_animated.svg: -------------------------------------------------------------------------------- 1 | lion_outline_right -------------------------------------------------------------------------------- /src/components/Donation.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 79 | 80 | 220 | -------------------------------------------------------------------------------- /src/components/ButtonContainer.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 102 | 178 | -------------------------------------------------------------------------------- /src/components/UpdateComment.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 95 | 96 | 238 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 125 | 126 | 263 | -------------------------------------------------------------------------------- /static/tiger.svg: -------------------------------------------------------------------------------- 1 | tiger -------------------------------------------------------------------------------- /static/tiger_outline_animated.svg: -------------------------------------------------------------------------------- 1 | tiger_outline -------------------------------------------------------------------------------- /static/button_outline_animated.svg: -------------------------------------------------------------------------------- 1 | button_outline --------------------------------------------------------------------------------