{ "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: https://codepen.io/FreeCodeCamp/full/JXrLLE/.", "Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "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 by sharing it with your friends on Facebook." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "giTx33ggIno" ], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Crea un visualizador de lenguaje de marcado (Markdown)", "description": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: https://codepen.io/FreeCodeCamp/full/JXrLLE/.", "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)." ] }, "ru": { "title": "Создайте предпросмотрщик языка разметки Markdown", "description": [ "Задание: Создайте приложение CodePen.io, функционал которого схож с этим: https://codepen.io/FreeCodeCamp/full/JXrLLE/.", "Правило #1: Не подсматривайте код приложения-примера. Напишите его самостоятельно.", "Правило #2: Приложение должно удовлетворять нижеприведённым пользовательским историям. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.", "Правило #3: Для создания этого проекта вы должны использовать Sass и React.", "Пользовательская история: Я могу использовать язык разметки в стиле GitHub в текстовом поле.", "Пользовательская история: Я могу видеть предварительный просмотр вывода моей разметки по мере ввода текста.", "Подсказка: Вам не нужно интерпретировать разметку самостоятельно - вы можете импортировать библиотеку Marked для этого: https://cdnjs.com/libraries/marked", "Заметка: Если вы хотите использовать синтаксис React JSX, вам понадобится задействовать 'Babel' в качестве препроцессора.", "Если что-то не получается, не забывайте пользоваться методом Читай-Ищи-Спрашивай.", "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.", "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." ] } } }, { "id": "bd7156d8c242eddfaeb5bd13", "title": "Build a Camper Leaderboard", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/eZGMjp/.", "Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "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 brownie 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: https://fcctop100.herokuapp.com/api/fccusers/top/recent.", "Hint: To get the top 100 campers of all time: https://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 by sharing it with your friends on Facebook." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "LJQcFNo_-QY" ], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Crea un marcador para los campistas", "description": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: https://codepen.io/FreeCodeCamp/full/eZGMjp/.", "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: https://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)." ] }, "ru": { "title": "Создайте таблицу Кемперов-Лидеров", "description": [ "Задание: Создайте приложение CodePen.io, функционал которого схож с этим: https://codepen.io/FreeCodeCamp/full/eZGMjp/.", "Правило #1: Не подсматривайте код приложения-примера. Напишите его самостоятельно.", "Правило #2: Приложение должно удовлетворять нижеприведённым пользовательским историям. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.", "Правило #3: Для создания этого проекта вы должны использовать Sass и React.", "Пользовательская история: Я могу видеть таблицу кемперов Free Code Camp, которые получили наибольшее количество очков за последние 30 дней.", "Пользовательская история: Я могу видеть сколько очков они получили за последние 30 дней, и сколько они получили их всего.", "Пользовательская история: Я могу отсортировать список по количеству очков, которые они получили за последние 30 дней, и по общему количеству полученных очков.", "Подсказка: Ссылка на топ 100 кемперов за последние 30 дней в формате JSON: https://fcctop100.herokuapp.com/api/fccusers/top/recent.", "Подсказка: Ссылка на топ 100 кемперов за все время в формате JSON: http://fcctop100.herokuapp.com/api/fccusers/top/alltime.", "Если что-то не получается, не забывайте пользоваться методом Читай-Ищи-Спрашивай.", "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.", "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." ] } } }, { "id": "bd7155d8c242eddfaeb5bd13", "title": "Build a Recipe Box", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/xVXWag/.", "Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "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.", "Hint: You should prefix your local storage keys on CodePen, i.e. _username_recipes", "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 by sharing it with your friends on Facebook." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "6tZ4c-Bxstg" ], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Crea una caja de recetas", "description": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: https://codepen.io/FreeCodeCamp/full/xVXWag/.", "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)." ] }, "ru": { "title": "Создайте хранилище рецептов", "description": [ "Задание: Создайте приложение CodePen.io, функционал которого схож с этим: https://codepen.io/FreeCodeCamp/full/xVXWag/.", "Правило #1: Не подсматривайте код приложения-примера. Напишите его самостоятельно.", "Правило #2: Приложение должно удовлетворять нижеприведённым пользовательским историям. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.", "Правило #3: Для создания этого проекта вы должны использовать Sass и React.", "Пользовательская история: Я могу создавать рецепты, содержащие название и ингредиенты.", "Пользовательская история: Я могу просмотреть корневой вид, на котором видны все рецепты.", "Пользовательская история: Я могу нажать на имя каждого из рецептов для просмотра содержимого.", "Пользовательская история: Я могу отредактировать эти рецепты.", "Пользовательская история: Я могу удалить эти рецепты.", "Пользовательская история: Все новые рецепты, которые я добавил, сохранены в локальном хранилище моего браузера. Если я обновлю страницу, эти рецепты будут всё ещё там.", "Если что-то не получается, не забывайте пользоваться методом Читай-Ищи-Спрашивай.", "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.", "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." ] } } }, { "id": "bd7154d8c242eddfaeb5bd13", "title": "Build the Game of Life", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/reGdqx/.", "Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "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 by sharing it with your friends on Facebook." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "5Ajcjs3OmjA" ], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Crea un Juego de la vida", "description": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: https://codepen.io/FreeCodeCamp/full/reGdqx/.", "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)." ] }, "ru": { "title": "Создайте игру \"Жизнь\"", "description": [ "Задание: Создайте приложение CodePen.io, функционал которого схож с этим: https://codepen.io/FreeCodeCamp/full/reGdqx/.", "Правило #1: Не подсматривайте код приложения-примера. Напишите его самостоятельно.", "Правило #2: Приложение должно удовлетворять нижеприведённым пользовательским историям. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.", "Правило #3: Для создания этого проекта вы должны использовать Sass и React.", "Пользовательская история: Когда я впервые запускаю игру, она генерирует доску случайным образом и начинает игру.", "Пользовательская история: Я могу запустить и остановить игру.", "Пользовательская история: Я могу настроить доску.", "Пользовательская история: Я могу очистить доску.", "Пользовательская история: Когда я нажимаю начать, игра начинает воспроизведение.", "Пользовательская история: Каждый раз, когда доска меняется, я могу видеть сколько поколений прошло.", "Подсказка: Вот объяснение игры \"Жизнь\" от её создателя Джона Конвея: https://www.youtube.com/watch?v=E8kUJL04ELA", "Подсказка: Вот обзор правил игры \"Жизнь\" для вашего сведения: https://ru.wikipedia.org/wiki/Жизнь_(игра)", "Если что-то не получается, не забывайте пользоваться методом Читай-Ищи-Спрашивай.", "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.", "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." ] } } }, { "id": "bd7153d8c242eddfaeb5bd13", "title": "Build a Roguelike Dungeon Crawler Game", "description": [ "Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/PNJRyd/.", "Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.", "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 by sharing it with your friends on Facebook." ], "releasedOn": "January 1, 2016", "challengeSeed": [ "BwyKI9iePUQ" ], "tests": [], "type": "zipline", "isRequired": true, "challengeType": 3, "translations": { "es": { "title": "Crea un juego de dragones al estilo Rogue", "description": [ "Objetivo: Construye una aplicación en CodePen.io que funcione de forma similar al siguiente ejemplo: https://codepen.io/FreeCodeCamp/full/PNJRyd/.", "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)." ] }, "ru": { "title": "Создайте Roguelike-подобную игру Подземелье", "description": [ "Задание: Создайте приложение CodePen.io, функционал которого схож с этим: https://codepen.io/FreeCodeCamp/full/PNJRyd/.", "Правило #1: Не подсматривайте код приложения-примера. Напишите его самостоятельно.", "Правило #2: Приложение должно удовлетворять нижеприведённым пользовательским историям. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.", "Правило #3: Для создания этого проекта вы должны использовать Sass и React.", "Пользовательская история: У меня есть жизни, уровень и оружие. Я могу подобрать оружие получше. Я могу подобрать очки здоровья.", "Пользовательская история: Все предметы и враги располагаются на карте случайным образом.", "Пользовательская история: Я могу передвигаться по карте, обнаруживая новые предметы.", "Пользовательская история: Я могу двигаться куда угодно в рамках карты, но не могу продвинуться дальше врага, пока он не будет побежден.", "Пользовательская история: Большая часть карты скрыта. Когда я делаю шаг, все клетки в определенном количестве клеток от меня становятся видимы.", "Пользовательская история: Когда я побеждаю врага, враг исчезает, а я получаю очки опыта (XP), что увеличивает мой уровень.", "Пользовательская история: Когда я веду бой с врагом, мы поочередно наносим друг-другу повреждения, до тех пор пока кто-нибудь не победит. Я наношу повреждения, которые зависят от моего уровня и моего оружия. Враг наносит повреждения, которые зависят от его уровня. Значение повреждений распределено случайным образом в некотором диапазоне.", "Пользовательская история: Когад я нахожу и побеждаю босса, я выигрываю игру.", "Пользовательская история: Игра должна быть интересной и достаточно сложной, но теоретически проходимой.", "Если что-то не получается, не забывайте пользоваться методом Читай-Ищи-Спрашивай.", "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.", "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем чате для рассмотрения кода. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook." ] } } } ] }