{ "name": "React Projects", "order": 15, "time": "200h", "challenges": [ { "id": "bd7157d8c242eddfaeb5bd13", "title": "Build a Markdown Previewer", "challengeSeed": [ "133315782" ], "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 interperate Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked", "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)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7156d8c242eddfaeb5bd13", "title": "Build a Camper Leaderboard", "challengeSeed": [ "133315782" ], "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/recent/:sortColumnName.", "Hint: To get the top 100 campers of all time: http://fcctop100.herokuapp.com/api/fccusers/alltime/:sortColumnName.", "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)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7155d8c242eddfaeb5bd13", "title": "Build a Recipe Box", "challengeSeed": [ "133315782" ], "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)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7154d8c242eddfaeb5bd13", "title": "Build the Conway Game of Life", "challengeSeed": [ "133315782" ], "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 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)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] }, { "id": "bd7153d8c242eddfaeb5bd13", "title": "Build a Roguelike Dungeon Crawler Game", "challengeSeed": [ "133315782" ], "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 space 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 is 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)." ], "type": "zipline", "challengeType": 3, "tests": [], "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [] } ] }