Ana Vazquez - mini-Challenge 3

README.md

@@ -1,143 +1,70 @@
-# React Certification 2020
+# Getting Started with Create React App
 
-## Introduction
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-Thank you for participating in the React Certification 2020 course! Here you'll find instructions for completing your certification.
+## Available Scripts
 
-## The challenge
+In the project directory, you can run:
 
-The purpose of the challenge is for you to demonstrate your React skills. This is your chance to show off everything you've learned during the course and to earn your certification!!
+### `npm start`
 
-The idea is that you build and deliver a **whole** React application on your own. We don't want to limit you by providing some "fill in the blanks" exercises, but instead request you to build it from scratch! We hope you find this exercise challenging and engaging.
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The goal is to build a YouTube client app.
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
 
-We've created a demo application: https://react-certification-2020.netlify.app/
+### `npm test`
 
-> **NOTE:* Use `wizeline` as the username and `Rocks!` as the password to log in*
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-We won't share its source-code until after the certification is complete and all the participants deliver their own implementations (we don't want to bias your solution).
+### `npm run build`
 
-You should use this application just as a guide and as a trigger for your own ideas. It's not mandatory to reproduce the exact functionalities nor the same styling; this is **YOUR** project and you can be creative in the way you build it.
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
 
-### Requirements
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
 
-These are the main requirements we will evaluate from your deliverable:
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-- Use all that you've learned in the course:
-  - Functional Components
-    - React Hooks
-    - Custom Hooks
-  - State Management with React Context
-  - Styled Components
-  - React Router
-    - Public and private routes
-- Fetch results from YouTube API (keep reading for more details)
-  - Search videos by name
-- User Authentication (keep reading for more details)
-- Unit Tests Coverage (~70%)
+### `npm run eject`
 
-Try to keep the use of 3rd party libraries to the minimum, especially the ones related to the topics covered in the course.
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
 
-E.g., you can use some CSS framework (such as Bootstrap) if that makes you feel more comfortable and move faster, but we will still want you to develop and deliver meaningful styled-components.
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
 
-## Getting Started
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
-We have provided some general React boilerplate in this repository.
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-The provided codebase is not directly related to the challenge topic, but you can use it as a guide for structuring your application. Feel free to add, remove, or change anything if you consider it necessary.
+## Learn More
 
-To get started, follow these steps:
-- Fork this project.
-- Create the YouTube API credential and configure the client SDK (more details below).
-- Commit periodically.
-- Have fun!
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
-### YouTube API
+To learn React, check out the [React documentation](https://reactjs.org/).
 
-In order to fetch videos from YouTube you need to create a new project using the Google console, and then create an API key for consuming the API.
+### Code Splitting
 
-**Step 1:** Follow the [YouTube API v3 getting-started guide](https://developers.google.com/youtube/v3/getting-started) to get your API credentials.
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
 
-> **NOTE:* You only need to complete the steps 1, 2 and 3 in the guide to get your API_KEY*
+### Analyzing the Bundle Size
 
-**Step 2:** After configuring the API key, you can read the [YouTube JavaScript client getting-started documentation](https://github.com/google/google-api-javascript-client/blob/master/docs/start.md) to get examples about how to consume the API.
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
 
+### Making a Progressive Web App
 
-### Authentication with Mocked Login
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
 
-Authentication is not directly covered on this course's topics; that's why we are not requesting you to integrate with a real authentication provider (such as Auth0, OAuth, etc.).
+### Advanced Configuration
 
-Instead, we want you to explore how to set up your application to handle this kind of requirement: sharing the logged-in user state, define public and private routes, display content based on the authenticated user, etc.
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
 
-You can use this mocked-login function in your application; just provide in the UI a way to capture the username and password values, and then handle the success and error cases (e.g. create a React Context to provide your logged-in user to the rest of the application).
+### Deployment
 
-```javascript
-// login.api.js
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
 
-const mockedUser = {
-  id: '123',
-  name: 'Wizeline',
-  avatarUrl: 'https://media.glassdoor.com/sqll/868055/wizeline-squarelogo-1473976610815.png',
-};
-
-export default async function loginApi(username, password) {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      if (username === 'wizeline' && password === 'Rocks!') {
-        return resolve(mockedUser);
-      }
-      return reject(new Error('Username or password invalid'));
-    }, 500);
-  });
-}
-```
-
-## Deliverables
-
-We provide the delivery dates so you can plan accordingly; please take this challenge seriously and try to make progress constantly.
-
-It’s worth mentioning that you’ll ONLY get feedback from the review team for your first deliverable, so you will have a chance to fix or improve the code based on our suggestions.
-
-For the final deliverable, we will provide some feedback to but there is no extra review date, so if you are struggling with something try to get some help beforehand with your peers or by using the academy-reactcert2020 slack channel.
-
-
-### First Deliverable (due September 28th 23:59PM)
-
-- Login
-  - Implement the Mocked Login and store the logged-in user in a global accessible Context.
-
-- Home View
-  - Search and display videos using Youtube API.
-
-- Video Details View
-  - Display the selected video and its information.
-  - Display a list of related videos.
-
-- Favorite Videos
-  - Allow users to mark videos as favorites.
-  - Display the favorite videos on a private route.
-  - Allow users to see the details of that video.
-
->**Important:* what’s listed in this deliverable is just for guidance and to help you distribute your workload; you can deliver more or fewer items if necessary.
-
-### Final Deliverable (due October 5th 23:59PM)
-
-- Finish any pending functionality or address any comment you receive from your previous deliverable.
-
-- Style your views using styled-components; use any 3rd party CSS framework if necessary.
-
-- Unit Testing
-  - Create tests for your application
-  - Coverage must be at least 70%
-
-
-## Submitting the deliverables
-
-For submitting your work, you should follow these steps:
-1. Create a pull request with your code, targeting the master branch of the repository [react-certification-2020](https://github.com/wizelineacademy/react-certification-2020).
-2. Deploy your application code to any hosting service (we suggest you use Netlify or any other free hosting provider you want to use like Firebase, etc.).
-3. Fill out this form and provide the requested information: https://forms.gle/ePnLR2xNVc3M1HLu8
-
-> **Important:* Don't forget to include any additional information that might be necessary for running your code (e.g. test user credentials, etc).
+### `npm run build` fails to minify
 
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

build/asset-manifest.json

@@ -0,0 +1,22 @@
+{
+  "files": {
+    "main.css": "/static/css/main.f7c7e819.chunk.css",
+    "main.js": "/static/js/main.fdd6e9ea.chunk.js",
+    "main.js.map": "/static/js/main.fdd6e9ea.chunk.js.map",
+    "runtime-main.js": "/static/js/runtime-main.c118debe.js",
+    "runtime-main.js.map": "/static/js/runtime-main.c118debe.js.map",
+    "static/js/2.574064c3.chunk.js": "/static/js/2.574064c3.chunk.js",
+    "static/js/2.574064c3.chunk.js.map": "/static/js/2.574064c3.chunk.js.map",
+    "static/js/3.65a78fbb.chunk.js": "/static/js/3.65a78fbb.chunk.js",
+    "static/js/3.65a78fbb.chunk.js.map": "/static/js/3.65a78fbb.chunk.js.map",
+    "index.html": "/index.html",
+    "static/css/main.f7c7e819.chunk.css.map": "/static/css/main.f7c7e819.chunk.css.map",
+    "static/js/2.574064c3.chunk.js.LICENSE.txt": "/static/js/2.574064c3.chunk.js.LICENSE.txt"
+  },
+  "entrypoints": [
+    "static/js/runtime-main.c118debe.js",
+    "static/js/2.574064c3.chunk.js",
+    "static/css/main.f7c7e819.chunk.css",
+    "static/js/main.fdd6e9ea.chunk.js"
+  ]
+}

build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.f7c7e819.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,a,i=t[0],c=t[1],l=t[2],f=0,p=[];f<i.length;f++)a=i[f],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(s&&s(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,i=1;i<r.length;i++){var c=r[i];0!==o[c]&&(n=!1)}n&&(u.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={1:0},u=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.e=function(e){var t=[],r=o[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=o[e]=[t,n]}));t.push(r[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"65a78fbb"}[e]+".chunk.js"}(e);var c=new Error;u=function(t){i.onerror=i.onload=null,clearTimeout(l);var r=o[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),u=t&&t.target&&t.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,r[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(t)},a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpchallenge-1-core-concepts-and-styling"]=this["webpackJsonpchallenge-1-core-concepts-and-styling"]||[],c=i.push.bind(i);i.push=t,i=i.slice();for(var l=0;l<i.length;l++)t(i[l]);var s=c;r()}([])</script><script src="/static/js/2.574064c3.chunk.js"></script><script src="/static/js/main.fdd6e9ea.chunk.js"></script></body></html>

build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

build/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: