236 lines
24 KiB
JSON
236 lines
24 KiB
JSON
{
|
||
"name": "Full Stack JavaScript Projects",
|
||
"order": 20,
|
||
"time": "300h",
|
||
"challenges": [
|
||
{
|
||
"id": "bd7158d8c443eddfaeb5bcef",
|
||
"title": "Get Set for Basejumps",
|
||
"challengeSeed": ["128451852"],
|
||
"description": [
|
||
"<span class='text-info'>Objective:</span> Get the MEAN stack running on Cloud 9, push your code to GitHub, and deploy it to Heroku.",
|
||
"We'll build our Basejumps on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
|
||
"If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
|
||
"Now let's get your development environment ready for a new Angular-Fullstack application provided by Yeoman.",
|
||
"Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
|
||
"Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
|
||
"Give your workspace a name and an optional description.",
|
||
"Choose Node.js in the selection area below the name field.",
|
||
"Click the \"Create workspace\" button.",
|
||
"Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
|
||
"Never run this command on your local machine. But in your Cloud 9 terminal window, run: <code>rm -rf * && echo \"export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/v0.10.35/lib/node_modules\" >> ~/.bashrc && source ~/.bashrc && npm install -g yo grunt grunt-cli generator-angular-fullstack && yo angular-fullstack</code>",
|
||
"Yeoman will prompt you to answer some questions. Answer them like this:",
|
||
"What would you like to write scripts with? <span class='text-success'>JavaScript</span>",
|
||
"What would you like to write markup with? <span class='text-success'>HTML</span>",
|
||
"What would you like to write stylesheets with? <span class='text-success'>CSS</span>",
|
||
"What Angular router would you like to use? <span class='text-success'>ngRoute</span>",
|
||
"Would you like to include Bootstrap? <span class='text-success'>Yes</span>",
|
||
"Would you like to include UI Bootstrap? <span class='text-success'>Yes</span>",
|
||
"Would you like to use MongoDB with Mongoose for data modeling? <span class='text-success'>Yes</span>",
|
||
"Would you scaffold out an authentication boilerplate? <span class='text-success'>Yes</span>",
|
||
"Would you like to include additional oAuth strategies? <span class='text-success'>Twitter</span>",
|
||
"Would you like to use socket.io? <span class='text-success'>No</span>",
|
||
"May bower anonymously report usage statistics to improve the tool over time? (Y/n) <span class='text-success'>Y</span>",
|
||
"You may get an error similar to <code> ERR! EEXIST, open ‘/home/ubuntu/.npm</code>. This is caused when Cloud9 runs out of memory and kills an install. If you get this, simply re-run this process with the command <code>yo angular-fullstack</code>. You will then be asked a few questions regarding the re-install. Answer them as follows:",
|
||
"Existing .yo-rc configuration found, would you like to use it? (Y/n) <span class='text-success'>Y</span>",
|
||
"Overwrite client/favicon.ico? (Ynaxdh) <span class='text-success'>Y</span>",
|
||
"To finish the installation run the commands: <code>bower install && npm install</code>",
|
||
"To start MongoDB, run the following commands in your terminal: <code>mkdir data && echo 'mongod --bind_ip=$IP --dbpath=data --nojournal --rest \"$@\"' > mongod && chmod a+x mongod && ./mongod</code>",
|
||
"You will want to open up a new terminal to work from by clicking on the + icon and select New Terminal",
|
||
"Start the application by running the following command in your new terminal window: <code>grunt serve</code>",
|
||
"Wait for the following message to appear: <code>xdg-open: no method available for opening 'http://localhost:8080' </code>. Now you can open the internal Cloud9 browser. To launch the browser select Preview in the toolbar then select the dropdown option Preview Running Application.",
|
||
"Turn the folder in which your application is running into a Git repository by running the following commands: <code>git init && git add . && git commit -am 'initial commit'</code>.",
|
||
"Now we need to add your GitHub SSH key to c9.io. Click the \"Add-on Services\" button in the lower left of your C9 dashboard. Click \"activate\" next to the GitHub icon.",
|
||
"A pop up will appear. Allow access to your account.",
|
||
"While still on the dashboard, under “Account Settings”, click the link for \"Show your SSH key\". Copy the key to you clipboard.",
|
||
"Sign in to <a href='http://github.com' target='_blank'>http://github.com</a> and navigate to the GitHub SSH settings page. Click the \"Add SSH Key\". Give your key the title \"cloud 9\". Paste your SSH Key into the \"Key\" box, then click \"Add Key\".",
|
||
"Create a new GitHub repository by and clicking on the + button next to your username in the upper-right hand side of your screen, then selecting \"New Repository\".",
|
||
"Enter a project name, then click the \"Create Repository\" button.",
|
||
"Find the \"...or push an existing repository from the command line\" section and click the Copy to Clipboard button beside it.",
|
||
"Paste the commands from your clipboard into the Cloud9 terminal prompt. This will push your changes to your repository on Cloud 9 up to GitHub.",
|
||
"Check back on your GitHub profile to verify the changes were successfully pushed up to GitHub.",
|
||
"Now let's push your code to Heroku. If you don't already have a Heroku account, create one at <a href='http://heroku.com' target='_blank'>http://heroku.com</a>. You shouldn't be charged for anything, but you will need to add your credit card information to your Heroku before you will be able to use Heroku's free MongoLab add on.",
|
||
"Before you publish to Heroku, you should free up as much memory as possible on Cloud9. In each of the Cloud9 terminal prompt tabs where MongoDB and Grunt are running, press the <code>control + c</code> hotkey to shut down these processes.",
|
||
"Run the following command in a Cloud9 terminal prompt tab: <code>npm install grunt-contrib-imagemin --save-dev && npm install --save-dev && heroku login</code>. At this point, the terminal will prompt you to log in to Heroku from the command line.",
|
||
"Now run <code>yo angular-fullstack:heroku</code>. You can choose a name for your Heroku project, or Heroku will create a random one for you. You can choose whether you want to deploy to servers the US or the EU.",
|
||
"Set the config flag for your Heroku environment and add MongoLab for your MongoDB instance by running the following command: <code>cd ~/workspace/dist && heroku config:set NODE_ENV=production && heroku addons:add mongolab</code>.",
|
||
"As you build your app, you should frequently commit changes to your codebase. Make sure you're in the <code>~/workspace</code> directory by running <code>cd ~/workspace</code>. Then you can use this code to stage the changes to your changes and commit them: <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a short summary of the changes you made to your code, such as \"added a records controller and corresponding routes\".",
|
||
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
|
||
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
|
||
"Now you're ready to move on to your first Basejump. Click the \"I've completed this challenge\" and move on."
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 2,
|
||
"tests": []
|
||
},
|
||
{
|
||
"id": "bd7158d8c443eddfaeb5bdef",
|
||
"title": "Build a Voting App",
|
||
"challengeSeed": ["133315786"],
|
||
"description": [
|
||
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://votingapp.herokuapp.com/' target='_blank'>http://votingapp.herokuapp.com/</a> and deploy it to Heroku.",
|
||
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
|
||
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
|
||
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
|
||
"Here are the specific User Stories you should implement for this Basejump:",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can keep my polls and come back later to access them.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can share my polls with my friends.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can see the aggregate results of my polls.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can delete polls that I decide I don't want anymore.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can create a poll with any number of possible items.",
|
||
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated or authenticated user, I can see and vote on everyone's polls.",
|
||
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)",
|
||
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I don't like the options on a poll, I can create a new option.",
|
||
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
|
||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
|
||
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
||
],
|
||
"type": "basejump",
|
||
"challengeType": 4,
|
||
"tests": [],
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bd7158d8c443eddfaeb5bdff",
|
||
"title": "Build a Nightlife Coordination App",
|
||
"challengeSeed": ["133315781"],
|
||
"description": [
|
||
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://whatsgoinontonight.herokuapp.com/' target='_blank'>http://whatsgoinontonight.herokuapp.com/</a> and deploy it to Heroku.",
|
||
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
|
||
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
|
||
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
|
||
"Here are the specific User Stories you should implement for this Basejump:",
|
||
"<span class='text-info'>User Story:</span> As an unauthenticated user, I can view all bars in my area.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can add myself to a bar to indicate I am going there tonight.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can remove myself from a bar if I no longer want to go there.",
|
||
"<span class='text-info'>Bonus User Story:</span> As an unauthenticated user, when I login I should not have to search again.",
|
||
"<span class='text-info'>Hint:</span> Try using the <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>Yelp API</a> to find venues in the cities your users search for.",
|
||
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
|
||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
|
||
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
||
],
|
||
"type": "basejump",
|
||
"challengeType": 4,
|
||
"tests": [],
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bd7158d8c443eddfaeb5bd0e",
|
||
"title": "Chart the Stock Market",
|
||
"challengeSeed": ["133315787"],
|
||
"description": [
|
||
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://stockstream.herokuapp.com/' target='_blank'>http://stockstream.herokuapp.com/</a> and deploy it to Heroku.",
|
||
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
|
||
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
|
||
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
|
||
"Here are the specific User Stories you should implement for this Basejump:",
|
||
"<span class='text-info'>User Story:</span> As a user, I can view a graph displaying the recent trend lines for each added stock.",
|
||
"<span class='text-info'>User Story:</span> As a user, I can add new stocks by their symbol name.",
|
||
"<span class='text-info'>User Story:</span> As a user, I can remove stocks.",
|
||
"<span class='text-info'>Bonus User Story:</span> As a user, I can see changes in real-time when any other user adds or removes a stock.",
|
||
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
|
||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
|
||
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
||
],
|
||
"type": "basejump",
|
||
"challengeType": 4,
|
||
"tests": [],
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bd7158d8c443eddfaeb5bd0f",
|
||
"title": "Manage a Book Trading Club",
|
||
"challengeSeed": ["133316032"],
|
||
"description": [
|
||
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> and deploy it to Heroku.",
|
||
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
|
||
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
|
||
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
|
||
"Here are the specific User Stories you should implement for this Basejump:",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can view all books posted by every user.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can add a new book.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can update my settings to store my full name, city, and state.",
|
||
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, I can propose a trade and wait for the other user to accept the trade.",
|
||
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
|
||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
|
||
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
||
],
|
||
"type": "basejump",
|
||
"challengeType": 4,
|
||
"tests": [],
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bd7158d8c443eddfaeb5bdee",
|
||
"title": "Build a Pinterest Clone",
|
||
"challengeSeed": ["133315784"],
|
||
"description": [
|
||
"<span class='text-info'>Objective:</span> Build a full stack JavaScript app that successfully reverse-engineers this: <a href='http://stark-lowlands-3680.herokuapp.com/' target='_blank'>http://stark-lowlands-3680.herokuapp.com/</a> and deploy it to Heroku.",
|
||
"Note that for each Basejump, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-basejumps'>http://freecodecamp.com/challenges/get-set-for-basejumps</a>.",
|
||
"As you build your app, you should frequently commit changes to your codebase. You can do this by running <code>git commit -am \"your commit message\"</code>. Note that you should replace \"your commit message\" with a brief summary of the changes you made to your code.",
|
||
"You can push these new commits to GitHub by running <code>git push origin master</code>, and to Heroku by running <code>grunt --force && grunt buildcontrol:heroku</code>.",
|
||
"Here are the specific User Stories you should implement for this Basejump:",
|
||
"<span class='text-info'>User Story:</span> As an unauthenticated user, I can login with Twitter.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can link to images.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can delete images that I've linked to.",
|
||
"<span class='text-info'>User Story:</span> As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.",
|
||
"<span class='text-info'>User Story:</span> As an unauthenticated user, I can browse other users' walls of images.",
|
||
"<span class='text-info'>Bonus User Story:</span> As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)",
|
||
"<span class='text-info'>Hint:</span> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.",
|
||
"If you need further guidance on using Yeoman Angular-Fullstack Generator, check out: <a href='https://github.com/clnhll/guidetobasejumps' target='_blank'>https://github.com/clnhll/guidetobasejumps</a>.",
|
||
"Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku. If you pair programmed with a friend, enter his or her Free Code Camp username as well so that you both get credit for completing it.",
|
||
"If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project. <br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20PASTE_YOUR_CODEPEN_URL_HERE%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
|
||
],
|
||
"type": "basejump",
|
||
"challengeType": 4,
|
||
"tests": [],
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
}
|
||
]
|
||
}
|