diff --git a/.eslintrc b/.eslintrc index 316d5e03..51807245 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,7 +5,9 @@ "node": true }, "extends": [ - "airbnb" + "airbnb", + "eslint:recommended", + "plugin:react/recommended" ], "globals": { "document": false, @@ -19,12 +21,18 @@ "expect": true, "sinon": true }, - "parser": "babel-eslint", + "parser": "@babel/eslint-parser", "plugins": [ "react", "jsx-a11y", "import" ], + "parserOptions": { + "requireConfigFile": false, + "ecmaFeatures": { + "jsx": true + } + }, "rules": { "react/jsx-filename-extension": 0, "array-bracket-spacing": 2, @@ -248,6 +256,12 @@ "jsx-a11y/no-noninteractive-element-interactions": 0, "jsx-a11y/media-has-caption": 0, "react/display-name": 0, + "react/function-component-definition": [ + 2, + { + "namedComponents": "arrow-function" + } + ], "react/jsx-boolean-value": 0, "react/jsx-closing-bracket-location": 2, "react/jsx-curly-spacing": [ @@ -272,8 +286,8 @@ "react/jsx-pascal-case": 2, "react/jsx-sort-prop-types": 0, "react/jsx-sort-props": 0, - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, + "react/jsx-uses-react": "error", + "react/jsx-uses-vars": "error", "react/no-did-mount-set-state": 2, "react/no-did-update-set-state": 2, "react/no-multi-comp": 0, @@ -331,4 +345,4 @@ "never" ] } -} \ No newline at end of file +} diff --git a/.gitignore b/.gitignore index 67045665..eae28330 100644 --- a/.gitignore +++ b/.gitignore @@ -34,9 +34,6 @@ bower_components # node-waf configuration .lock-wscript -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - # Dependency directories node_modules/ jspm_packages/ @@ -78,19 +75,12 @@ typings/ # Next.js build output .next -# Nuxt.js build / generate output -.nuxt -dist - # Gatsby files .cache/ # Comment in the public line in if your project uses Gatsby and *not* Next.js # https://nextjs.org/blog/next-9-1#public-directory-support # public -# vuepress build output -.vuepress/dist - # Serverless directories .serverless/ @@ -102,3 +92,5 @@ dist # TernJS port file .tern-port + +.vercel diff --git a/CV.png b/CV.png new file mode 100644 index 00000000..e456d5cd Binary files /dev/null and b/CV.png differ diff --git a/Documentation.txt b/Documentation.txt new file mode 100644 index 00000000..05f392ac --- /dev/null +++ b/Documentation.txt @@ -0,0 +1,30 @@ +Documentation: + +1) First I solved the dependancy problems by looking in the package.json file as when i tried to install it, everything failed. To solve it I did a binary fetch algorthm with the files and tested them, until I found the troubled ones. Then I looked for them and how to install it on the internet and solved it. +2) Then, I Created the skeleton in src/containers/App.jsx, very simple just to check te components. +3) Created all the files of the components just by copying and pasting them to see if they were all working properly. +4) Created the GetData API using fetch-then and working with the values. Playing with the values was the most difficult part for me and where I messed everything at the begeining. +5) after this I just started working with the values, the arrays, objects in order to show them in my app and I did a few things that worked for some variables and some didn´t, but I finished the App by doing it in that way, I also tried looking for ways to solve it on the internet, videos, stackoverflow, tutorials, and tried many ways, most of them failed. +6) after finishing those steps I added some basic CSS. I was more interested in making this whole thing work more than making it to look pretty. +7) I did my first commit, not to lose the changes. +8) I ran the tests and they failed, almost all. I also noticed by looking inside the test files and runing the tests that there was a directory missing, so I added the directory and file there. +9) I had a look back at the source code and correct some things with the getData function, I kept runing it but keep failing. +10) I started rechecking the components and I cleaned a bit all the mess I did while playing with the different kind of values handed in by the api. And I used the map method for everything as it was simpler but I had some cases it didn't work directly and there I got help from some friend and they told me to add the ternary comparator to check and the things started to work and to pass the tests. +11) I tried to deploy in github pages, in netlify but all attempts were worthless, I asked for help and my classmates helped me using vercel to deploy it. +12) I had to upload the github files there, set the configuration for the sistem to know were my files were and then deploy it. It took some time but finally worked. +13) After deploying I had quite a difficult time changing the localhost of the api to an actual valid ID as git were not taking my changes but that got solved too. + +CV Deployed=> https://react-eth-challenge-five-delta.vercel.app/ + +To run the page I just do: +1) GIT clone +2) I errase REACT and REACT-dom from the package.json +3) npm install +4) npm install react react-dom +5) npm run server +6) npm start +7) npm run test + +Images. +1) Tests working in "Test.png" +2) CV working in localhost "CV.png" diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 67105c53..e27cc9a7 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,16 +1,16 @@ ## DESCRIPTION -Solución al reto: +Solución al reto: Everything solved, ran test properly and deployed (https://react-eth-challenge-five-delta.vercel.app/) Nombre: -Usuario Platzi: +Usuario Platzi: crisme1989 ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema -- [ ] Quinto Problema -- [ ] Sexto Problema -- [ ] Septimo Problema +- [✓] Primer problema +- [✓] Segundo problema +- [✓] Tercer problema +- [✓] Cuarto Problema +- [✓] Quinto Problema +- [✓] Sexto Problema +- [✓] Septimo Problema diff --git a/Tests.png b/Tests.png new file mode 100644 index 00000000..934e2400 Binary files /dev/null and b/Tests.png differ diff --git a/build/assets/main.css b/build/assets/main.css new file mode 100644 index 00000000..95039889 --- /dev/null +++ b/build/assets/main.css @@ -0,0 +1,8 @@ +body{background-color:#4d5e6c;color:#d7e1ea} +header{display:flex;justify-content:center;padding:20px;background-color:#283a4f;color:#d7e1ea}header img{align-self:center;margin-right:5%;border-radius:50%;width:20%;height:20%;max-height:240px;max-width:240px}header .Header-title{font-size:2.4em}header .About-title{font-size:1.6em}header .About-item{font-size:1.2em;float:left}@media screen and (max-width:640px){.Header{flex-direction:column}.Header img{justify-self:center}} +.Profile-title{text-align:center;margin:40px;font-size:2em}.Profile-desc{display:block;font-size:1.2em;text-align:center;margin:auto} +.Experience-title{text-align:center;margin:40px;font-size:2em}.Experience-item{font-size:1.2em;text-align:center} +.Academic-title{text-align:center;margin:40px;font-size:2em}.Academic-item{display:block;font-size:1.2em;text-align:center;margin:auto} +.Skills-title{text-align:center;margin:40px;font-size:2em}.Skills-item{display:block;font-size:1.2em;text-align:center;margin:auto} +.Interest-title{text-align:center;margin:40px;font-size:2em}.Interest-item{display:block;font-size:1.2em;text-align:center;margin:auto} +.Languages-title{text-align:center;margin:40px;font-size:2em}.Languages-item{display:block;font-size:1.2em;text-align:center;margin:auto} diff --git a/build/bundle.js b/build/bundle.js new file mode 100644 index 00000000..3eec3cc6 --- /dev/null +++ b/build/bundle.js @@ -0,0 +1,2 @@ +/*! For license information please see bundle.js.LICENSE.txt */ +(()=>{"use strict";var e={448:(e,n,t)=>{var r=t(294),l=t(142);function a(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t