{ "name": "React Projects", "order": 15, "time": "200 hours", "helpRoom": "HelpDataViz", "challenges": [ { "id": "bd7157d8c242eddfaeb5bd13", "title": "Build a Markdown Previewer", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/obYYqW.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use both Sass and React to build this project.", "User Story: I can type GitHub-flavored Markdown into a text area.", "User Story: I can see a preview of the output of my markdown that is updated as I type.", "Hint: You don't need to interpret Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked", "Note: If you want to use the React JSX syntax, you need to enable 'Babel' as a preprocessor", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "150324697" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Crea un visualizador de lenguaje de marcado (Markdown)", "descriptionEs": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/obYYqW.", "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.", "Rule #3: Debes utilizar ambos Sass y React para construir este proyecto.", "Historia de usuario: Puedo escribir lenguaje de marcado al estilo GitHub en un área de texto.", "Historia de usuario: Puedo tener una vista preliminar del resultado de mi marcado que se actualiza mientras escribo.", "Pista: No necesitas interpretar el lenguaje de marcado por tu cuenta - puedes importar la librería de marcado en el enlace siguiente: https://cdnjs.com/libraries/marked", "Nota: Si quieres utilizar la sintaxis de React JSX, necesitarás habilitar 'Babel' como un preprocesador", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ", "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], "isRequired": true }, { "id": "bd7156d8c242eddfaeb5bd13", "title": "Build a Camper Leaderboard", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/qbqqJm/.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use both Sass and React to build this project.", "User Story: I can see a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days.", "User Story: I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.", "User Story: I can toggle between sorting the list by how many bronwie points they've earned in the past 30 days and by how many brownie points they've earned total.", "Hint: To get the top 100 campers for the last 30 days: http://fcctop100.herokuapp.com/api/fccusers/top/recent.", "Hint: To get the top 100 campers of all time: http://fcctop100.herokuapp.com/api/fccusers/top/alltime.", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "150324694" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Crea un marcador para los campistas", "descriptionEs": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/qbqqJm/.", "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.", "Rule #3: Debes utilizar ambos Sass y React para construir este proyecto.", "Historia de usuario: Puedo ver un tablero con los campistas de Free Code Camp que han ganado más puntos de brownie en los últimos 30 días.", "Historia de usuario: Puedo ver cuántos puntos de brownie han ganado en los últimos 30 días, y cuántos han ganado en total.", "Historia de usuario: Puedo elegir entre dos formas de organizar la lista: 1) En base a cuántos puntos de brownie se han ganado en los últimos 30 días. 2) En base al número de puntos de brownie que han ganado en total.", "Pista: Para obtener los 100 mejores campistas para los últimos 30 días: http://fcctop100.herokuapp.com/api/fccusers/top/recent.", "Pista: Para obtener los 100 mejores campistas de toda la historia: http://fcctop100.herokuapp.com/api/fccusers/top/alltime.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ", "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], "isRequired": true }, { "id": "bd7155d8c242eddfaeb5bd13", "title": "Build a Recipe Box", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/LGbbqj.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use both Sass and React to build this project.", "User Story: I can create recipes that have names and ingredients.", "User Story: I can see an index view where the names of all the recipes are visible.", "User Story: I can click into any of those recipes to view it.", "User Story: I can edit these recipes.", "User Story: I can delete these recipes.", "User Story: All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "150324695" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Crea una caja de recetas", "descriptionEs": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/LGbbqj.", "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.", "Rule #3: Debes utilizar ambos Sass y React para construir este proyecto.", "Historia de usuario: Puedo crear recetas a las que les puedo poner un nombre y los ingredientes necesarios.", "Historia de usuario: Puedo ver un índice que contenga los nombres de todas las recetas.", "Historia de usuario: Puedo pulsar cualquiera de las recetas para verla.", "Historia de usuario: Puedo editar las recetas.", "Historia de usuario: Puedo eliminar las recetas.", "Historia de usuario: Las recetas que voy agregando deben guardarse en el almacenamiento local de mi navegador. Las recetas deben seguir allí si refresco la página.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ", "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], "isRequired": true }, { "id": "bd7154d8c242eddfaeb5bd13", "title": "Build the Game of Life", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/dGOOrZ.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use both Sass and React to build this project.", "User Story: When I first arrive at the game, it will randomly generate a board and start playing.", "User Story: I can start and stop the board.", "User Story: I can set up the board.", "User Story: I can clear the board.", "User Story: When I press start, the game will play out.", "User Story: Each time the board changes, I can see how many generations have gone by.", "Hint: Here's an explanation of Conway's Game of Life from John Conway himself: https://www.youtube.com/watch?v=E8kUJL04ELA", "Hint: Here's an overview of Conway's Game of Life with rules for your reference: https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "150324459" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Crea un Juego de la vida", "descriptionEs": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/dGOOrZ.", "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.", "Rule #3: Debes utilizar ambos Sass y React para construir este proyecto.", "Historia de usuario: La aplicación debe generar aleatoriamente un tablero y comenzar a jugar cuando entro al juego por primera vez.", "Historia de usuario: Puedo iniciar y detener el tablero.", "Historia de usuario: Puedo preparar el tablero.", "Historia de usuario: Puedo limpiar el tablero.", "Historia de usuario: El juego inicia cuando presiono un botón de inicio.", "Historia de usuario: Puedo ver cuántas generaciones han pasado cada vez que el tablero cambia.", "Pista: Puedes encontrar una explicación del Juego de la vida de Conway de parte del mismísimo John Conway aquí: https://www.youtube.com/watch?v=E8kUJL04ELA", "Pista: Puedes referirte al siguiente enlace para obtener información general acerca del Juego de la vida de Conway incluyendo las reglas del juego: https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ", "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], "isRequired": true }, { "id": "bd7153d8c242eddfaeb5bd13", "title": "Build a Roguelike Dungeon Crawler Game", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/dGOOEJ/.", "Rule #1: Don't look at the example project's code. Figure it out for yourself.", "Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "Rule #3: You must use both Sass and React to build this project.", "User Story: I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.", "User Story: All the items and enemies on the map are arranged at random.", "User Story: I can move throughout a map, discovering items.", "User Story: I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.", "User Story: Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.", "User Story: When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.", "User Story: When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.", "User Story: When I find and beat the boss, I win.", "User Story: The game should be challenging, but theoretically winnable.", "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ", "You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook)." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "150324693" ], "tests": [], "type": "zipline", "challengeType": 3, "nameEs": "Crea un juego de dragones al estilo Rogue", "descriptionEs": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: http://codepen.io/FreeCodeCamp/full/dGOOEJ/.", "Regla #1: No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.", "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.", "Rule #3: Debes utilizar ambos Sass y React para construir este proyecto.", "Historia de usuario: Tengo energía, nivel de habilidad y un arma. Puedo recoger un arma mejor. Puedo recoger ítems que recuperan mi energía.", "Historia de usuario: Todos los ítems y los enemigos en el mapa están colocados aleatoriamente.", "Historia de usuario: Puedo moverme a lo largo de un mapa y descubrir ítems.", "Historia de usuario: Puedo moverme hacia cualquier parte dentro de los límites del mapa, pero no puedo moverme sobre un enemigo hasta que lo haya vencido.", "Historia de usuario: Gran parte del mapa está escondido. Cuando doy un paso, todos los espacios que están a cierto número de espacios de distancia de mi son revelados.", "Historia de usuario: Cuando venzo un enemigo, este desaparece y yo gano puntos de experiencia (XP), lo que eventualmente me permite aumentar de nivel.", "Historia de usuario: Cuando peleo con un enemigo, tomamos turnos haciéndonos daño hasta que uno de los dos pierde. El daño que hago está basado en mi nivel de experiencia y en el arma que estoy utilizando. El enemigo hace daño basado en su nivel. El daño es aleatorio dentro de cierto márgen.", "Historia de usuario: Gano el juego cuando encuentre y venza al jefe.", "Historia de usuario: El juego debe representar un reto, pero ganar debe ser teóricamente posible.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ", "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro Cuarto de revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)." ], "isRequired": true } ] }