Platzi Master Frontend Test

Related tags

React react javascript stylus
Overview

frontend

React Curriculum vitae

Crear tu curriculum vitae en React, analiza la estructura propuesta e inspirate para mostrar tu información.

react-cv

Retos

  1. Crear los componentes del proyecto
  2. Añadir estilos
  3. Crear función getData.js
  4. Integrar API
  5. Personalizar API
  6. Documentar

Instalación

npm install

Ejecución

npm run start

Server

npm run server

Compilar

npm run build

Pruebas Unitarias

npm run test

ESlint

npm run lint

Enviar solución de reto

Debes de crear un "Fork" de este proyecto, revolver los problemas y crear un Pull Request hacia tu repositorio.

Contribuir

Si alguien quiere agregar o mejorar algo, lo invito a colaborar directamente en este repositorio: frontend

Licencia

frontend se lanza bajo la licencia MIT.

Comments
  • Reto Front-End

    Reto Front-End

    Sobre el reto:

    • Logré crear los compoenentes
    • Entedí como modificar el data.json
    • Añadí estilos básicos con tailwind (Los use a través de una pseudo CDN porque no logré integrarlo con un preprocesador)

    :/

    opened by mlopezdev 0
  • Platzi Master Challenge Solution - José Manuel Hernández Treviño

    Platzi Master Challenge Solution - José Manuel Hernández Treviño

    Here is my solution for this challenge. Step by step:

    • First of all, I created the components using React Hooks.
    • Then, I started with the styles. Even though I'm more familiar with Sass, Stylus' oficial documentation was really helpful and I could handle it. I decided to use modules (one for each component).
    • As for the API, I created the getData function and commented out the useEffect hook (left them just as references) and followed a different approach: I imported the JSON file directly into App.jsx and provided it throughout all components as props, so that all tests successfully passed.
    • Finally, I added comments where necessary and ran the linter.

    I want to thank you all in advance, I learned a lot while developing this project and I think that's the most important thing. Kind regards.

    screenshot

    opened by josehtrevino 0
  • Desafío frontend - Nicolas Jiménez.

    Desafío frontend - Nicolas Jiménez.

    Docs ( 🛣️ Mi experiencia con el desafío )

    Create the project components #1: Analyze the project and identify its structure
    When I looked closely at the structure of the project, I found it already had a previously elaborated structure, however a series of extra configurations and a couple of files are needed. I started this point by creating an index.js file in the root of the "components" folder so that from there a single import would be made and not "saturate" other files with the "dot hell". 😊👌

    Add styles #2: Create the styles to give it the desired design, keep the proposed structure. Use @Dribble for inspiration.
    ❌🙃 One of the main problems I had at the time of carrying out the project was thinking about a design, although I'm not so bad at it, it is a fact that I can spend hours just thinking about "-"hat colors I should to use?" (and so it was) I spent more of a morning creating a color palette and a design that I liked enough and that in turn did not break the scheme given at the beginning, since one of the challenges was to maintain the base structure.

    Fortunately, Google came to save the country and among many designs I chose to use an effect called "Glassmorphosm", all that remained was to think of some good colors (because at the beginning, the ones I had in mind were not bad ... but, maybe is not works here a prove. ) so I opted to use an Apple palette. Here was my inspiration.


    Create getData.js function #3: Create getData.js function to consume an API
    ❌🙃 Creating the function was one of the simplest parts of the test, however it is one thing to create it and another to make it work, since here I had the problem that Webpack was not willing to accept "sugar syntax" like async / await, And although it is true that I could have solved it using the already known "promises", I wanted to make use of these characteristics, for which I was forced to investigate how to adapt Webpack to these characteristics, it was not very difficult, but I did take longer than expected.

    Integrate API #4: Start the test server and integrate the proposed information into your application. 
    <npm run server>

    Integrating the api was simple, but what perhaps was not so simple was to think of an optimal way to distribute the information throughout the application without having to make more than one call to the api or "mess up" the code by creating more states of the necessary ones, for which it seemed convenient to use the api context that React provides, in this way I centralized the information at one point and then distributed.

    Custom API #5:Customize the data.json file in the root of the project with your information. If you deploy your own API in a cloud service it is a plus.
    Customizing the api was quick, but I did not like the idea of ​​having the file static, so I was forced to create a small server in Express and mount it in Heroku, I wanted to take that extra step. (I mounted the repo to GitLab, Why? Well, I don't like having my GitHub account untidy. Here is the code)

    Document #6:Create the necessary documentation for the application in the document of your Pull Request. Explain in detail the steps taken, describe what were your main blocks and your solutions.
    To document the project I chose to use "JsDoc" since it allows me to create the necessary comments for the code in a very simple way. Additionally, in the Readme.md I left this same section of steps, since it seemed more elegant to me.

    Upgrade [Bonus] #7: Please review the project and update to the latest versions of the project dependencies.
    To be honest this was the first thing I did before starting to go through the entire structure of the project, I went through the package.json to see what commands and settings they had available and then updated all the dependencies.

    opened by Nicolas-alt 0
  • Frontend challenge - Sergio Alonzo Piña

    Frontend challenge - Sergio Alonzo Piña

    Preview image

    Steps that i took to solve the challengue:

    1- make the components, add the layers and make the structure, i used material-ui library to make it easier. 2- make the getData function, i wanted to use axios but i did't make it work so i decided to use normal fetch function. 3- after the getData function i made some tests to see if all works, then i used propTypes to pass the API data to the components. 4- i added my own data in the json file. 5- i fixed some things that make bugs on the tests from jest and i updated the node modules. 6- more fixing and tests, to integrate server API and my app.

    the design was simple but according to the rules, i didn't have too much time to make it prettier, but it works

    opened by Spina7 0
  • Development: Prueba Técnica de platzi master

    Development: Prueba Técnica de platzi master

    Se completó con todos los requerimiento de la prueba técnica, esperaré su feedback para poder mejorar mis habilidades y enfrentarme a nuevos retos, muchas gracias.

    opened by sebasmoreno-dev 0
  • Adding Platzi Master Frontend by Irving Juárez

    Adding Platzi Master Frontend by Irving Juárez

    I deleted some dependencies because of my computer's memory and I explained why I couldn't resolve some challenges (mostly related to the unit testing), but the project itself runs properly

    opened by irvingvjuarez 0
Owner
Platzi Master
Platzi Master
Platzi Master
GitHub
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
The Project is a test that simulates a website of recipes for healthy foods. Inside it has a Registration and Login system.

GCB Test: Healthy Eating The Project is a test that simulates a website of recipes for healthy foods. Inside it has a Registration and Login system. C

Kayke Alves Fujinaka 8 Nov 20, 2022
UI for Keploy platform that does API testing by dependency mocking without writing any test cases.

Welcome to Keploy UI ?? About Us Keploy is a no-code API testing platform. Keploy automatically generates unit test cases with dependency mocks from A

Keploy Inc 23 Dec 28, 2022
Includes Redux-Saga. Works with movie test API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Daniyl 4 Oct 16, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 21.2k Dec 30, 2022
A graphical frontend for exploring your org-roam Zettelkasten

org-roam-ui: an org-roam frontend Org-Roam-UI is a frontend for exploring and interacting with your org-roam notes. Org-Roam-UI is meant a successor o

Org-roam 1.5k Jan 4, 2023
This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Unnati Bamania 22 Oct 5, 2022
An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

CRUD app with React and Firebase 9 An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) produc

Júlio Bem 3 Sep 28, 2021
frontend-matong-admin

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 2 Dec 21, 2021
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Frontend Mentor - Job listings with filtering Front-end challenge focused on javascript logic, where a list of fictitious vacancies is presented and t

Rui Neto 11 Apr 13, 2022
A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell

Loggi Frontend Show & Tell - Animações com React Lottie A simple demo of React Lottie power to 1st Loggi Frontend Show & Tell This project was bootstr

Gabriel Barreto 2 Aug 4, 2022
Site para treinar minhas habilidades com o react no frontEnd (totalmente voltado para o aprendizado)

Tutorial Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you ca

Júlia de Melo Albuquerque 3 Jan 31, 2022
PokePoke - a frontend application that connects to a free API called PokeApi

PokePoke is a frontend application that connects to a free API called PokeApi, and facilitates the visualization and search of pokemon through a minimalist interface. This application was developed with the aim of putting into practice React concepts such as the use of Hooks, Custom Hooks and Context. In addition, the use of new technologies: Tailwinds as CSS Framework and Vite as a file packer, an alternative to WebPack.

@Encoding 24 Jul 28, 2022
Note Port is a frontend clone of Google Keep. It uses localstorage to save your notes!

Note Port About Note Port is a frontend clone of Google Keep. It uses localstorage to save your notes! Tech Stack React Screenshots Things I want to a

Mohit Dhatrak 3 Sep 10, 2022
💸 Use case style digital image marketplace like nft. I developed this system by gathering a lot of my frontend/backend knowledge

❗ WARNING This project is just an educational system, NOT a system made to carry out large transactions and with the same focus as nft. I developed th

Gabriel David 53 Aug 30, 2022
FrontEnd Master algorithms!

next-course-starter A NextJS starter to get you started creating educational materials using Markdown Get Started Set up Node.js v14+ Clone this repo

ThePrimeagen 112 Dec 18, 2022
Curso de ECMAScript 6+ en Platzi

Curso de ECMAScript 6+ JavaScript es el lenguaje más utilizado para desarrollo de aplicaciones web, principalmente en el frontend. Cada año, ECMA Inte

Edward Brito Diaz 3 Feb 12, 2022
Extensión para crear el icono y cover de un curso en Platzi para organizar la toma de apuntes en Notion

?? Platzi Cover Extensión para extraer el icono y cover de un curso en Platzi para organizar la toma de apuntes en Notion ?? Instalación Descargar el

Juan Galvis 7 Nov 15, 2021
This repo contains resources & practice of project and files , while learning to master JS

Resources to learn JavaScript and conquer the world? Tutorials and Books JavaScript For Cats (http://jsforcats.com/) is a dead simply introduction for

abdulkareem alabi 1 Jan 6, 2022
📗 A simple electron app to connect with Platzi and add a discord rich presence

Platzi - Discord Rich Presence RPC Electron Requirements Nodejs you can download the latest version -> here clone the repository like this -> git clon

Jonathan Dyallo 9 Oct 31, 2022