My portfolio website, I clone the UI/UX from Huy Nguyen (his user name in github is: by-huy)

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

A collection of my IT projects unified in one app using Docker & Docker Compose. Projects are auto-cloned from GitHub during build. The main homepage serves as a portfolio, showcasing projects with descriptions & links. Ideal for demonstrating skills, exploring technologies, and managing projects efficiently in a containerized setup.

# LIRI Bot ### Overview In this assignment, you will make LIRI. LIRI is like iPhone's SIRI. However, while SIRI is a Speech Interpretation and Recognition Interface, LIRI is a _Language_ Interpretation and Recognition Interface. LIRI will be a command line node app that takes in parameters and gives you back data. ### Before You Begin 1. LIRI will search Spotify for songs, Bands in Town for concerts, and OMDB for movies. 2. Make a new GitHub repository called liri-node-app and clone it to your computer. 3. To retrieve the data that will power this app, you'll need to send requests to the Bands in Town, Spotify and OMDB APIs. You'll find these Node packages crucial for your assignment. * [Node-Spotify-API](https://www.npmjs.com/package/node-spotify-api) * [Request](https://www.npmjs.com/package/request) * You'll use Request to grab data from the [OMDB API](http://www.omdbapi.com) and the [Bands In Town API](http://www.artists.bandsintown.com/bandsintown-api) * [Moment](https://www.npmjs.com/package/moment) * [DotEnv](https://www.npmjs.com/package/dotenv) ## Submission Guide Make sure you use the normal GitHub. Because this is a CLI App, there will be no need to deploy it to Heroku. This time, though, you need to include screenshots, a gif, and/or a video showing us that you got the app working with no bugs. You can include these screenshots or a link to a video in a `README.md` file. * Include screenshots (or a video) of typical user flows through your application (for the customer and if relevant the manager/supervisor). This includes views of the prompts and the responses after their selection (for the different selection options). * Include any other screenshots you deem necessary to help someone who has never been introduced to your application understand the purpose and function of it. This is how you will communicate to potential employers/other developers in the future what you built and why, and to show how it works. * Because screenshots (and well-written READMEs) are extremely important in the context of GitHub, this will be part of the grading. If you haven't written a markdown file yet, [click here for a rundown](https://guides.github.com/features/mastering-markdown/), or just take a look at the raw file of these instructions. ### Submission on BCS * Please submit the link to the Github Repository! ### Instructions 1. Navigate to the root of your project and run `npm init -y` &mdash; this will initialize a `package.json` file for your project. The `package.json` file is required for installing third party npm packages and saving their version numbers. If you fail to initialize a `package.json` file, it will be troublesome, and at times almost impossible for anyone else to run your code after cloning your project. 2. Make a `.gitignore` file and add the following lines to it. This will tell git not to track these files, and thus they won't be committed to Github. ``` node_modules .DS_Store .env ``` 3. Make a JavaScript file named `keys.js`. * Inside keys.js your file will look like this: ```js console.log('this is loaded'); exports.spotify = { id: process.env.SPOTIFY_ID, secret: process.env.SPOTIFY_SECRET }; ``` 4. Next, create a file named `.env`, add the following to it, replacing the values with your API keys (no quotes) once you have them: ```js # Spotify API keys SPOTIFY_ID=your-spotify-id SPOTIFY_SECRET=your-spotify-secret ``` * This file will be used by the `dotenv` package to set what are known as environment variables to the global `process.env` object in node. These are values that are meant to be specific to the computer that node is running on, and since we are gitignoring this file, they won't be pushed to github &mdash; keeping our API key information private. * If someone wanted to clone your app from github and run it themselves, they would need to supply their own `.env` file for it to work. 5. Make a file called `random.txt`. * Inside of `random.txt` put the following in with no extra characters or white space: * spotify-this-song,"I Want it That Way" 6. Make a JavaScript file named `liri.js`. 7. At the top of the `liri.js` file, add code to read and set any environment variables with the dotenv package: ```js require("dotenv").config(); ``` 8. Add the code required to import the `keys.js` file and store it in a variable. * You should then be able to access your keys information like so ```js var spotify = new Spotify(keys.spotify); ``` 9. Make it so liri.js can take in one of the following commands: * `concert-this` * `spotify-this-song` * `movie-this` * `do-what-it-says` ### What Each Command Should Do 1. `node liri.js concert-this <artist/band name here>` * This will search the Bands in Town Artist Events API (`"https://rest.bandsintown.com/artists/" + artist + "/events?app_id=codingbootcamp"`) for an artist and render the following information about each event to the terminal: * Name of the venue * Venue location * Date of the Event (use moment to format this as "MM/DD/YYYY") 2. `node liri.js spotify-this-song '<song name here>'` * This will show the following information about the song in your terminal/bash window * Artist(s) * The song's name * A preview link of the song from Spotify * The album that the song is from * If no song is provided then your program will default to "The Sign" by Ace of Base. * You will utilize the [node-spotify-api](https://www.npmjs.com/package/node-spotify-api) package in order to retrieve song information from the Spotify API. * The Spotify API requires you sign up as a developer to generate the necessary credentials. You can follow these steps in order to generate a **client id** and **client secret**: * Step One: Visit <https://developer.spotify.com/my-applications/#!/> * Step Two: Either login to your existing Spotify account or create a new one (a free account is fine) and log in. * Step Three: Once logged in, navigate to <https://developer.spotify.com/my-applications/#!/applications/create> to register a new application to be used with the Spotify API. You can fill in whatever you'd like for these fields. When finished, click the "complete" button. * Step Four: On the next screen, scroll down to where you see your client id and client secret. Copy these values down somewhere, you'll need them to use the Spotify API and the [node-spotify-api package](https://www.npmjs.com/package/node-spotify-api). 3. `node liri.js movie-this '<movie name here>'` * This will output the following information to your terminal/bash window: ``` * Title of the movie. * Year the movie came out. * IMDB Rating of the movie. * Rotten Tomatoes Rating of the movie. * Country where the movie was produced. * Language of the movie. * Plot of the movie. * Actors in the movie. ``` * If the user doesn't type a movie in, the program will output data for the movie 'Mr. Nobody.' * If you haven't watched "Mr. Nobody," then you should: <http://www.imdb.com/title/tt0485947/> * It's on Netflix! * You'll use the request package to retrieve data from the OMDB API. Like all of the in-class activities, the OMDB API requires an API key. You may use `trilogy`. 4. `node liri.js do-what-it-says` * Using the `fs` Node package, LIRI will take the text inside of random.txt and then use it to call one of LIRI's commands. * It should run `spotify-this-song` for "I Want it That Way," as follows the text in `random.txt`. * Edit the text in random.txt to test out the feature for movie-this and concert-this. ### BONUS * In addition to logging the data to your terminal/bash window, output the data to a .txt file called `log.txt`. * Make sure you append each command you run to the `log.txt` file. * Do not overwrite your file each time you run a command. ### Reminder: Submission on BCS * Please submit the link to the Github Repository! - - - ### Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Adding a README.md as well as adding this homework to your portfolio are required as well and more information can be found below. - - - ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) - - - ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. - - - ### One More Thing If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. **Good Luck!**

# LIRI Bot ### Overview In this assignment, you will make LIRI. LIRI is like iPhone's SIRI. However, while SIRI is a Speech Interpretation and Recognition Interface, LIRI is a _Language_ Interpretation and Recognition Interface. LIRI will be a command line node app that takes in parameters and gives you back data. ### Before You Begin 1. LIRI will search Spotify for songs, Bands in Town for concerts, and OMDB for movies. 2. Make a new GitHub repository called liri-node-app and clone it to your computer. 3. To retrieve the data that will power this app, you'll need to send requests using the `axios` package to the Bands in Town, Spotify and OMDB APIs. You'll find these Node packages crucial for your assignment. * [Node-Spotify-API](https://www.npmjs.com/package/node-spotify-api) * [Axios](https://www.npmjs.com/package/axios) * You'll use Axios to grab data from the [OMDB API](http://www.omdbapi.com) and the [Bands In Town API](http://www.artists.bandsintown.com/bandsintown-api) * [Moment](https://www.npmjs.com/package/moment) * [DotEnv](https://www.npmjs.com/package/dotenv) ## Submission Guide Create and use a standard GitHub repository. As this is a CLI App, it cannot be deployed to GitHub pages or Heroku. This time you'll need to include screenshots, a GIF, and/or a video showing us that you have the app working with no bugs. You can include these screenshots/GIFs or a link to a video in a `README.md` file. In order to meet the Employer Competitive standards and be ready to show your application to employers, the `README.md` file should meet the following criteria: 1. Clearly state the problem the app is trying to solve (i.e. what is it doing and why) 2. Give a high-level overview of how the app is organized 3. Give start-to-finish instructions on how to run the app 4. Include screenshots, gifs or videos of the app functioning 5. Contain a link to a deployed version of the app 6. Clearly list the technologies used in the app 7. State your role in the app development Because screenshots (and well-written READMEs) are extremely important in the context of GitHub, this will be part of the grading in this assignment. If you haven't written a markdown file yet, [click here for a rundown](https://guides.github.com/features/mastering-markdown/), or just take a look at the raw file of these instructions. ### Commits Having an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code. * Committing often is a signal to employers that you are actively working on your code and learning. * We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it! * Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong. * Be clear and descriptive in your commit messaging. * When writing a commit message, avoid vague messages like "fixed." Be descriptive so that you and anyone else looking at your repository knows what happened with each commit. * We would like you to have well over 200 commits by graduation, so commit early and often! ### Submission on BCS * Please submit the link to the Github Repository! ### Instructions 1. Navigate to the root of your project and run `npm init -y` &mdash; this will initialize a `package.json` file for your project. The `package.json` file is required for installing third party npm packages and saving their version numbers. If you fail to initialize a `package.json` file, it will be troublesome, and at times almost impossible for anyone else to run your code after cloning your project. 2. Make a `.gitignore` file and add the following lines to it. This will tell git not to track these files, and thus they won't be committed to Github. ``` node_modules .DS_Store .env ``` 3. Make a JavaScript file named `keys.js`. * Inside keys.js your file will look like this: ```js console.log('this is loaded'); exports.spotify = { id: process.env.SPOTIFY_ID, secret: process.env.SPOTIFY_SECRET }; ``` 4. Next, create a file named `.env`, add the following to it, replacing the values with your API keys (no quotes) once you have them: ```js # Spotify API keys SPOTIFY_ID=your-spotify-id SPOTIFY_SECRET=your-spotify-secret ``` * This file will be used by the `dotenv` package to set what are known as environment variables to the global `process.env` object in node. These are values that are meant to be specific to the computer that node is running on, and since we are gitignoring this file, they won't be pushed to github &mdash; keeping our API key information private. * If someone wanted to clone your app from github and run it themselves, they would need to supply their own `.env` file for it to work. 5. Make a file called `random.txt`. * Inside of `random.txt` put the following in with no extra characters or white space: * spotify-this-song,"I Want it That Way" 6. Make a JavaScript file named `liri.js`. 7. At the top of the `liri.js` file, add code to read and set any environment variables with the dotenv package: ```js require("dotenv").config(); ``` 8. Add the code required to import the `keys.js` file and store it in a variable. ```js var keys = require("./keys.js"); ``` * You should then be able to access your keys information like so ```js var spotify = new Spotify(keys.spotify); ``` 9. Make it so liri.js can take in one of the following commands: * `concert-this` * `spotify-this-song` * `movie-this` * `do-what-it-says` ### What Each Command Should Do 1. `node liri.js concert-this <artist/band name here>` * This will search the Bands in Town Artist Events API (`"https://rest.bandsintown.com/artists/" + artist + "/events?app_id=codingbootcamp"`) for an artist and render the following information about each event to the terminal: * Name of the venue * Venue location * Date of the Event (use moment to format this as "MM/DD/YYYY") 2. `node liri.js spotify-this-song '<song name here>'` * This will show the following information about the song in your terminal/bash window * Artist(s) * The song's name * A preview link of the song from Spotify * The album that the song is from * If no song is provided then your program will default to "The Sign" by Ace of Base. * You will utilize the [node-spotify-api](https://www.npmjs.com/package/node-spotify-api) package in order to retrieve song information from the Spotify API. * The Spotify API requires you sign up as a developer to generate the necessary credentials. You can follow these steps in order to generate a **client id** and **client secret**: * Step One: Visit <https://developer.spotify.com/my-applications/#!/> * Step Two: Either login to your existing Spotify account or create a new one (a free account is fine) and log in. * Step Three: Once logged in, navigate to <https://developer.spotify.com/my-applications/#!/applications/create> to register a new application to be used with the Spotify API. You can fill in whatever you'd like for these fields. When finished, click the "complete" button. * Step Four: On the next screen, scroll down to where you see your client id and client secret. Copy these values down somewhere, you'll need them to use the Spotify API and the [node-spotify-api package](https://www.npmjs.com/package/node-spotify-api). 3. `node liri.js movie-this '<movie name here>'` * This will output the following information to your terminal/bash window: ``` * Title of the movie. * Year the movie came out. * IMDB Rating of the movie. * Rotten Tomatoes Rating of the movie. * Country where the movie was produced. * Language of the movie. * Plot of the movie. * Actors in the movie. ``` * If the user doesn't type a movie in, the program will output data for the movie 'Mr. Nobody.' * If you haven't watched "Mr. Nobody," then you should: <http://www.imdb.com/title/tt0485947/> * It's on Netflix! * You'll use the `axios` package to retrieve data from the OMDB API. Like all of the in-class activities, the OMDB API requires an API key. You may use `trilogy`. 4. `node liri.js do-what-it-says` * Using the `fs` Node package, LIRI will take the text inside of random.txt and then use it to call one of LIRI's commands. * It should run `spotify-this-song` for "I Want it That Way," as follows the text in `random.txt`. * Edit the text in random.txt to test out the feature for movie-this and concert-this. ### BONUS * In addition to logging the data to your terminal/bash window, output the data to a .txt file called `log.txt`. * Make sure you append each command you run to the `log.txt` file. * Do not overwrite your file each time you run a command. ### Reminder: Submission on BCS * Please submit the link to the Github Repository! - - - ### Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Adding a README.md as well as adding this homework to your portfolio are required as well and more information can be found below. - - - ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) - - - ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. - - - ### One More Thing If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. **Good Luck!**

GitHub clone using REACT.JS . Search any user on github through this build. I recommend this build to have in your portfolio.

# All the News That's Fit to Scrape ### Overview In this assignment, you'll create a web app that lets users view and leave comments on the latest news. But you're not going to actually write any articles; instead, you'll flex your Mongoose and Cheerio muscles to scrape news from another site. ### Before You Begin 1. Create a GitHub repo for this assignment and clone it to your computer. Any name will do -- just make sure it's related to this project in some fashion. 2. Run `npm init`. When that's finished, install and save these npm packages: 1. express 2. express-handlebars 3. mongoose 4. cheerio 5. axios 3. **NOTE**: If you want to earn complete credit for your work, you must use all five of these packages in your assignment. 4. In order to deploy your project to Heroku, you must set up an mLab provision. mLab is remote MongoDB database that Heroku supports natively. Follow these steps to get it running: 5. Create a Heroku app in your project directory. 6. Run this command in your Terminal/Bash window: * `heroku addons:create mongolab` * This command will add the free mLab provision to your project. 7. When you go to connect your mongo database to mongoose, do so the following way: ```js // If deployed, use the deployed database. Otherwise use the local mongoHeadlines database var MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/mongoHeadlines"; mongoose.connect(MONGODB_URI); ``` * This code should connect mongoose to your remote mongolab database if deployed, but otherwise will connect to the local mongoHeadlines database on your computer. 8. [Watch this demo of a possible submission](https://youtu.be/4ltZr3VPmno). See the deployed demo application [here](http://nyt-mongo-scraper.herokuapp.com/). 9. Your site doesn't need to match the demo's style, but feel free to attempt something similar if you'd like. Otherwise, just be creative! ### Commits Having an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code. * Committing often is a signal to employers that you are actively working on your code and learning. * We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it! * Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong. * Be clear and descriptive in your commit messaging. * When writing a commit message, avoid vague messages like "fixed." Be descriptive so that you and anyone else looking at your repository knows what happened with each commit. * We would like you to have well over 200 commits by graduation, so commit early and often! ### Submission on BCS * **This assignment must be deployed.** * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! ## Instructions * Create an app that accomplishes the following: 1. Whenever a user visits your site, the app should scrape stories from a news outlet of your choice and display them for the user. Each scraped article should be saved to your application database. At a minimum, the app should scrape and display the following information for each article: * Headline - the title of the article * Summary - a short summary of the article * URL - the url to the original article * Feel free to add more content to your database (photos, bylines, and so on). 2. Users should also be able to leave comments on the articles displayed and revisit them later. The comments should be saved to the database as well and associated with their articles. Users should also be able to delete comments left on articles. All stored comments should be visible to every user. * Beyond these requirements, be creative and have fun with this! ### Tips * Go back to Saturday's activities if you need a refresher on how to partner one model with another. * Whenever you scrape a site for stories, make sure an article isn't already represented in your database before saving it; Do not save any duplicate entries. * Don't just clear out your database and populate it with scraped articles whenever a user accesses your site. * If your app deletes stories every time someone visits, your users won't be able to see any comments except the ones that they post. ### Helpful Links * [MongoDB Documentation](https://docs.mongodb.com/manual/) * [Mongoose Documentation](http://mongoosejs.com/docs/api.html) * [Cheerio Documentation](https://github.com/cheeriojs/cheerio) ### Reminder: Submission on BCS * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! --- ### Minimum Requirements * **This assignment must be deployed.** Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. --- ### Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while **Heroku is free**, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see [Heroku’s Account Verification Information](https://devcenter.heroku.com/articles/account-verification) for more details. --- ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) --- ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. --- ### One Last Thing If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. That goes threefold for this unit: MongoDB and Mongoose compose a challenging data management system. If there's anything you find confusing about these technologies, don't hesitate to speak with someone from the Boot Camp team. **Good Luck!**

# All the News That's Fit to Scrape ### Overview In this assignment, you'll create a web app that lets users view and leave comments on the latest news. But you're not going to actually write any articles; instead, you'll flex your Mongoose and Cheerio muscles to scrape news from another site. ### Before You Begin 1. Create a GitHub repo for this assignment and clone it to your computer. Any name will do -- just make sure it's related to this project in some fashion. 2. Run `npm init`. When that's finished, install and save these npm packages: 3. express 4. express-handlebars 5. mongoose 6. body-parser 7. cheerio 8. request 9. **NOTE**: If you want to earn complete credit for your work, you must use all six of these packages in your assignment. 10. In order to deploy your project to Heroku, you must set up an mLab provision. mLab is remote MongoDB database that Heroku supports natively. Follow these steps to get it running: 11. Create a Heroku app in your project directory. 12. Run this command in your Terminal/Bash window: * `heroku addons:create mongolab` * This command will add the free mLab provision to your project. 13. When you go to connect your mongo database to mongoose, do so the following way: ```js // If deployed, use the deployed database. Otherwise use the local mongoHeadlines database var MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/mongoHeadlines"; // Set mongoose to leverage built in JavaScript ES6 Promises // Connect to the Mongo DB mongoose.Promise = Promise; mongoose.connect(MONGODB_URI); ``` * This code should connect mongoose to your remote mongolab database if deployed, but otherwise will connect to the local mongoHeadlines database on your computer. 14. [Watch this demo of a possible submission](mongo-homework-demo.mov). See the deployed demo application [here](http://nyt-mongo-scraper.herokuapp.com/). 15. Your site doesn't need to match the demo's style, but feel free to attempt something similar if you'd like. Otherwise, just be creative! ### Submission on BCS * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! ## Instructions * Create an app that accomplishes the following: 1. Whenever a user visits your site, the app should scrape stories from a news outlet of your choice and display them for the user. Each scraped article should be saved to your application database. At a minimum, the app should scrape and display the following information for each article: * Headline - the title of the article * Summary - a short summary of the article * URL - the url to the original article * Feel free to add more content to your database (photos, bylines, and so on). 2. Users should also be able to leave comments on the articles displayed and revisit them later. The comments should be saved to the database as well and associated with their articles. Users should also be able to delete comments left on articles. All stored comments should be visible to every user. * Beyond these requirements, be creative and have fun with this! ### Tips * Go back to Saturday's activities if you need a refresher on how to partner one model with another. * Whenever you scrape a site for stories, make sure an article isn't already represented in your database before saving it; we don't want duplicates. * Don't just clear out your database and populate it with scraped articles whenever a user accesses your site. * If your app deletes stories every time someone visits, your users won't be able to see any comments except the ones that they post. ### Helpful Links * [MongoDB Documentation](https://docs.mongodb.com/manual/) * [Mongoose Documentation](http://mongoosejs.com/docs/api.html) * [Cheerio Documentation](https://github.com/cheeriojs/cheerio) ### Reminder: Submission on BCS * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! --- ### Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. --- ### Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while **Heroku is free**, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see [Heroku’s Account Verification Information](https://devcenter.heroku.com/articles/account-verification) for more details. --- ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) --- ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. --- ### One Last Thing If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. That goes threefold for this week: MongoDB and Mongoose compose a challenging data management system. If there's anything you find confusing about these technologies, don't hesitate to speak with someone from the Boot Camp team. **Good Luck!**

Get started with your GitHub Pages portfolio by cloning this repo!

# All the News That's Fit to Scrape ### Overview In this assignment, you'll create a web app that lets users view and leave comments on the latest news. But you're not going to actually write any articles; instead, you'll flex your Mongoose and Cheerio muscles to scrape news from another site. ### Before You Begin 1. Create a GitHub repo for this assignment and clone it to your computer. Any name will do -- just make sure it's related to this project in some fashion. 2. Run `npm init`. When that's finished, install and save these npm packages: 1. express 2. express-handlebars 3. mongoose 4. cheerio 5. axios 3. **NOTE**: If you want to earn complete credit for your work, you must use all five of these packages in your assignment. 4. In order to deploy your project to Heroku, you must set up an mLab provision. mLab is remote MongoDB database that Heroku supports natively. Follow these steps to get it running: 5. Create a Heroku app in your project directory. 6. Run this command in your Terminal/Bash window: * `heroku addons:create mongolab` * This command will add the free mLab provision to your project. 7. When you go to connect your mongo database to mongoose, do so the following way: ```js // If deployed, use the deployed database. Otherwise use the local mongoHeadlines database var MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/mongoHeadlines"; mongoose.connect(MONGODB_URI); ``` * This code should connect mongoose to your remote mongolab database if deployed, but otherwise will connect to the local mongoHeadlines database on your computer. 8. [Watch this demo of a possible submission](https://youtu.be/4ltZr3VPmno). See the deployed demo application [here](http://nyt-mongo-scraper.herokuapp.com/). 9. Your site doesn't need to match the demo's style, but feel free to attempt something similar if you'd like. Otherwise, just be creative! ### Commits Having an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code. * Committing often is a signal to employers that you are actively working on your code and learning. * We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it! * Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong. * Be clear and descriptive in your commit messaging. * When writing a commit message, avoid vague messages like "fixed." Be descriptive so that you and anyone else looking at your repository knows what happened with each commit. * We would like you to have well over 200 commits by graduation, so commit early and often! ### Submission on BCS * **This assignment must be deployed.** * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! ## Instructions * Create an app that accomplishes the following: 1. Whenever a user visits your site, the app should scrape stories from a news outlet of your choice and display them for the user. Each scraped article should be saved to your application database. At a minimum, the app should scrape and display the following information for each article: * Headline - the title of the article * Summary - a short summary of the article * URL - the url to the original article * Feel free to add more content to your database (photos, bylines, and so on). 2. Users should also be able to leave comments on the articles displayed and revisit them later. The comments should be saved to the database as well and associated with their articles. Users should also be able to delete comments left on articles. All stored comments should be visible to every user. * Beyond these requirements, be creative and have fun with this! ### Tips * Go back to Saturday's activities if you need a refresher on how to partner one model with another. * Whenever you scrape a site for stories, make sure an article isn't already represented in your database before saving it; Do not save any duplicate entries. * Don't just clear out your database and populate it with scraped articles whenever a user accesses your site. * If your app deletes stories every time someone visits, your users won't be able to see any comments except the ones that they post. ### Helpful Links * [MongoDB Documentation](https://docs.mongodb.com/manual/) * [Mongoose Documentation](http://mongoosejs.com/docs/api.html) * [Cheerio Documentation](https://github.com/cheeriojs/cheerio) ### Reminder: Submission on BCS * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! --- ### Minimum Requirements * **This assignment must be deployed.** Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. --- ### Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while **Heroku is free**, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see [Heroku’s Account Verification Information](https://devcenter.heroku.com/articles/account-verification) for more details. --- ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) --- ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. --- ### One Last Thing If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. That goes threefold for this unit: MongoDB and Mongoose compose a challenging data management system. If there's anything you find confusing about these technologies, don't hesitate to speak with someone from the Boot Camp team. **Good Luck!**

My portfolio clone, contains all my info and all projects i have made and also my github stats.

This project features some of my github projects and is also a clone for the one-pager portfolio by wix.com

Check out my portfolio website on GitHub! Built with HTML, CSS, and JavaScript, it features a minimalist yet stunning UI/UX. Browse through my projects, explore my skills, and get to know me better. Clone the repository and customize it for your own portfolio. Let's connect and collaborate!

# Node Express Handlebars ### Overview In this assignment, you'll create a burger logger with MySQL, Node, Express, Handlebars and a homemade ORM (yum!). Be sure to follow the MVC design pattern; use Node and MySQL to query and route data in your app, and Handlebars to generate your HTML. ### Read This When trying to connect remotely to your Heroku database on an open network such as a coffee shop, library, or even your University WiFi, it will be blocked. If you are experiencing a Heroku connection error, this could be why. ### Important * **This assignment must be deployed.** Be sure to utilize the [MYSQL Heroku Deployment Guide](../../03-Supplemental/MySQLHerokuDeploymentProcess.pdf) in order to deploy your assignment. ### Before You Begin * Eat-Da-Burger! is a restaurant app that lets users input the names of burgers they'd like to eat. * Whenever a user submits a burger's name, your app will display the burger on the left side of the page -- waiting to be devoured. * Each burger in the waiting area also has a `Devour it!` button. When the user clicks it, the burger will move to the right side of the page. * Your app will store every burger in a database, whether devoured or not. * [Check out this video of the app for a run-through of how it works](https://youtu.be/msvdn95x9OM). ### Commits Having an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code. * Committing often is a signal to employers that you are actively working on your code and learning. * We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it! * Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong. * Be clear and descriptive in your commit messaging. * When writing a commit message, avoid vague messages like "fixed." Be descriptive so that you and anyone else looking at your repository knows what happened with each commit. * We would like you to have well over 200 commits by graduation, so commit early and often! ### Submission on BCS * **This assignment must be deployed.** * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! ## Instructions #### App Setup 1. Create a GitHub repo called `burger` and clone it to your computer. 2. Make a package.json file by running `npm init` from the command line. 3. Install the Express npm package: `npm install express`. 4. Create a server.js file. 5. Install the Handlebars npm package: `npm install express-handlebars`. 6. Install MySQL npm package: `npm install mysql`. 7. Require the following npm packages inside of the server.js file: * express #### DB Setup 1. Inside your `burger` directory, create a folder named `db`. 2. In the `db` folder, create a file named `schema.sql`. Write SQL queries this file that do the following: * Create the `burgers_db`. * Switch to or use the `burgers_db`. * Create a `burgers` table with these fields: * **id**: an auto incrementing int that serves as the primary key. * **burger_name**: a string. * **devoured**: a boolean. 3. Still in the `db` folder, create a `seeds.sql` file. In this file, write insert queries to populate the `burgers` table with at least three entries. 4. Run the `schema.sql` and `seeds.sql` files into the mysql server from the command line 5. Now you're going to run these SQL files. * Make sure you're in the `db` folder of your app. * Start MySQL command line tool and login: `mysql -u root -p`. * With the `mysql>` command line tool running, enter the command `source schema.sql`. This will run your schema file and all of the queries in it -- in other words, you'll be creating your database. * Now insert the entries you defined in `seeds.sql` by running the file: `source seeds.sql`. * Close out of the MySQL command line tool: `exit`. #### Config Setup 1. Inside your `burger` directory, create a folder named `config`. 2. Create a `connection.js` file inside `config` directory. * Inside the `connection.js` file, setup the code to connect Node to MySQL. * Export the connection. 3. Create an `orm.js` file inside `config` directory. * Import (require) `connection.js` into `orm.js` * In the `orm.js` file, create the methods that will execute the necessary MySQL commands in the controllers. These are the methods you will need to use in order to retrieve and store data in your database. * `selectAll()` * `insertOne()` * `updateOne()` * Export the ORM object in `module.exports`. #### Model setup * Inside your `burger` directory, create a folder named `models`. * In `models`, make a `burger.js` file. * Inside `burger.js`, import `orm.js` into `burger.js` * Also inside `burger.js`, create the code that will call the ORM functions using burger specific input for the ORM. * Export at the end of the `burger.js` file. #### Controller setup 1. Inside your `burger` directory, create a folder named `controllers`. 2. In `controllers`, create the `burgers_controller.js` file. 3. Inside the `burgers_controller.js` file, import the following: * Express * `burger.js` 4. Create the `router` for the app, and export the `router` at the end of your file. #### View setup 1. Inside your `burger` directory, create a folder named `views`. * Create the `index.handlebars` file inside `views` directory. * Create the `layouts` directory inside `views` directory. * Create the `main.handlebars` file inside `layouts` directory. * Setup the `main.handlebars` file so it's able to be used by Handlebars. * Setup the `index.handlebars` to have the template that Handlebars can render onto. * Create a button in `index.handlebars` that will submit the user input into the database. #### Directory structure All the recommended files and directories from the steps above should look like the following structure: ``` . ├── config │   ├── connection.js │   └── orm.js │  ├── controllers │   └── burgers_controller.js │ ├── db │   ├── schema.sql │   └── seeds.sql │ ├── models │   └── burger.js │  ├── node_modules │  ├── package.json │ ├── public │   └── assets │      ├── css │      │   └── burger_style.css │      └── img │      └── burger.png │   │ ├── server.js │ └── views ├── index.handlebars └── layouts └── main.handlebars ``` ### Reminder: Submission on BCS * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! - - - ### Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. - - - ### Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while **Heroku is free**, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see [Heroku’s Account Verification Information](https://devcenter.heroku.com/articles/account-verification) for more details. - - - ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) - - - ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. - - - ### One More Thing This is a really tough homework assignment, but we want you to put in your best effort to finish it. If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. ### Reminder When trying to connect remotely to your Heroku database on an open network such as a coffee shop, library, or even your University WiFi, it will be blocked. If you are experiencing a Heroku connection error, this could be why. **Good Luck!**

Overview In this assignment, you will make LIRI. LIRI is like iPhone's SIRI. However, while SIRI is a Speech Interpretation and Recognition Interface, LIRI is a Language Interpretation and Recognition Interface. LIRI will be a command line node app that takes in parameters and gives you back data. Before You Begin LIRI will search Spotify for songs, Bands in Town for concerts, and OMDB for movies. Make a new GitHub repository called liri-node-app and clone it to your computer. To retrieve the data that will power this app, you'll need to send requests to the Bands in Town, Spotify and OMDB APIs. You'll find these Node packages crucial for your assignment. Node-Spotify-API Request You'll use Request to grab data from the OMDB API and the Bands In Town API Moment DotEnv Submission Guide Make sure you use the normal GitHub. Because this is a CLI App, there will be no need to deploy it to Heroku. This time, though, you need to include screenshots, a gif, and/or a video showing us that you got the app working with no bugs. You can include these screenshots or a link to a video in a README.md file. Include screenshots (or a video) of typical user flows through your application (for the customer and if relevant the manager/supervisor). This includes views of the prompts and the responses after their selection (for the different selection options). Include any other screenshots you deem necessary to help someone who has never been introduced to your application understand the purpose and function of it. This is how you will communicate to potential employers/other developers in the future what you built and why, and to show how it works. Because screenshots (and well-written READMEs) are extremely important in the context of GitHub, this will be part of the grading. If you haven't written a markdown file yet, click here for a rundown, or just take a look at the raw file of these instructions. Submission on BCS Please submit the link to the Github Repository! Instructions Navigate to the root of your project and run npm init -y — this will initialize a package.json file for your project. The package.json file is required for installing third party npm packages and saving their version numbers. If you fail to initialize a package.json file, it will be troublesome, and at times almost impossible for anyone else to run your code after cloning your project. Make a .gitignore file and add the following lines to it. This will tell git not to track these files, and thus they won't be committed to Github. node_modules .DS_Store .env Make a JavaScript file named keys.js. Inside keys.js your file will look like this: console.log('this is loaded'); exports.spotify = { id: process.env.SPOTIFY_ID, secret: process.env.SPOTIFY_SECRET }; Next, create a file named .env, add the following to it, replacing the values with your API keys (no quotes) once you have them: # Spotify API keys SPOTIFY_ID=your-spotify-id SPOTIFY_SECRET=your-spotify-secret This file will be used by the dotenv package to set what are known as environment variables to the global process.env object in node. These are values that are meant to be specific to the computer that node is running on, and since we are gitignoring this file, they won't be pushed to github — keeping our API key information private. If someone wanted to clone your app from github and run it themselves, they would need to supply their own .env file for it to work. Make a file called random.txt. Inside of random.txt put the following in with no extra characters or white space: spotify-this-song,"I Want it That Way" Make a JavaScript file named liri.js. At the top of the liri.js file, add code to read and set any environment variables with the dotenv package: require("dotenv").config(); Add the code required to import the keys.js file and store it in a variable. You should then be able to access your keys information like so var spotify = new Spotify(keys.spotify); Make it so liri.js can take in one of the following commands: concert-this spotify-this-song movie-this do-what-it-says What Each Command Should Do node liri.js concert-this <artist/band name here> This will search the Bands in Town Artist Events API ("https://rest.bandsintown.com/artists/" + artist + "/events?app_id=codingbootcamp") for an artist and render the following information about each event to the terminal: Name of the venue Venue location Date of the Event (use moment to format this as "MM/DD/YYYY") node liri.js spotify-this-song '<song name here>' This will show the following information about the song in your terminal/bash window Artist(s) The song's name A preview link of the song from Spotify The album that the song is from If no song is provided then your program will default to "The Sign" by Ace of Base. You will utilize the node-spotify-api package in order to retrieve song information from the Spotify API. The Spotify API requires you sign up as a developer to generate the necessary credentials. You can follow these steps in order to generate a client id and client secret: Step One: Visit https://developer.spotify.com/my-applications/#!/ Step Two: Either login to your existing Spotify account or create a new one (a free account is fine) and log in. Step Three: Once logged in, navigate to https://developer.spotify.com/my-applications/#!/applications/create to register a new application to be used with the Spotify API. You can fill in whatever you'd like for these fields. When finished, click the "complete" button. Step Four: On the next screen, scroll down to where you see your client id and client secret. Copy these values down somewhere, you'll need them to use the Spotify API and the node-spotify-api package. node liri.js movie-this '<movie name here>' This will output the following information to your terminal/bash window: * Title of the movie. * Year the movie came out. * IMDB Rating of the movie. * Rotten Tomatoes Rating of the movie. * Country where the movie was produced. * Language of the movie. * Plot of the movie. * Actors in the movie. If the user doesn't type a movie in, the program will output data for the movie 'Mr. Nobody.' If you haven't watched "Mr. Nobody," then you should: http://www.imdb.com/title/tt0485947/ It's on Netflix! You'll use the request package to retrieve data from the OMDB API. Like all of the in-class activities, the OMDB API requires an API key. You may use trilogy. node liri.js do-what-it-says Using the fs Node package, LIRI will take the text inside of random.txt and then use it to call one of LIRI's commands. It should run spotify-this-song for "I Want it That Way," as follows the text in random.txt. Edit the text in random.txt to test out the feature for movie-this and my-tweets BONUS In addition to logging the data to your terminal/bash window, output the data to a .txt file called log.txt. Make sure you append each command you run to the log.txt file. Do not overwrite your file each time you run a command. Reminder: Submission on BCS Please submit the link to the Github Repository! Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Adding a README.md as well as adding this homework to your portfolio are required as well and more information can be found below. Create a README.md Add a README.md to your repository describing the project. Here are some resources for creating your README.md. Here are some resources to help you along the way: About READMEs Mastering Markdown Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. One More Thing If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. Good Luck!

This project is a simple portfolio website created using HTML and CSS, and it is deployed on Github Pages. You can use it as a template to create your own portfolio website by cloning the repository and customizing the HTML and CSS files.

LINKCONNECT simple Linktree Clone built using HTML, CSS, and JavaScript. This project allows you to create a personalized landing page where you can showcase all your important links (social media, portfolio, GitHub, contact, etc.) in one place.

Welcome to my GitHub portfolio! I'm a developer passionate about cybersecurity, IoT, AI, and web development. Explore my diverse projects and achievements, from cybersecurity solutions to web development creations like Amazon and Netflix clones. Let's connect and collaborate!

Github repository and page showcase personal portfolio website, including Netflix clone, weather app, and music genre classification. Also features mini projects and personal info. Includes source code, documentation, and live demos. Aims to highlight skills and experience for potential employers.

your own clone of the viral WORDLE game, entirely in Python, playable in the terminal! No libraries. No GUI. Just pure logic & fun. ✔ 5-letter word guessing game ✔ Green/Yellow/Gray style hints ✔ Random word selection ✔ Limited attempts (6 like real Wordle) ✔ Dictionary-based validation ✔ Perfect for GitHub + portfolio

# All the News That's Fit to Scrape ### Overview In this assignment, you'll create a web app that lets users view and leave comments on the latest news. But you're not going to actually write any articles; instead, you'll flex your Mongoose and Cheerio muscles to scrape news from another site. ### Before You Begin 1. Create a GitHub repo for this assignment and clone it to your computer. Any name will do -- just make sure it's related to this project in some fashion. 2. Run `npm init`. When that's finished, install and save these npm packages: 3. express 4. express-handlebars 5. mongoose 6. body-parser 7. cheerio 8. request 9. **NOTE**: If you want to earn complete credit for your work, you must use all six of these packages in your assignment. 10. In order to deploy your project to Heroku, you must set up an mLab provision. mLab is remote MongoDB database that Heroku supports natively. Follow these steps to get it running: 11. Create a Heroku app in your project directory. 12. Run this command in your Terminal/Bash window: * `heroku addons:create mongolab` * This command will add the free mLab provision to your project. 13. When you go to connect your mongo database to mongoose, do so the following way: ```js // If deployed, use the deployed database. Otherwise use the local mongoHeadlines database var MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/mongoHeadlines"; // Set mongoose to leverage built in JavaScript ES6 Promises // Connect to the Mongo DB mongoose.Promise = Promise; mongoose.connect(MONGODB_URI); ``` * This code should connect mongoose to your remote mongolab database if deployed, but otherwise will connect to the local mongoHeadlines database on your computer. 14. [Watch this demo of a possible submission](mongo-homework-demo.mov). See the deployed demo application [here](http://nyt-mongo-scraper.herokuapp.com/). 15. Your site doesn't need to match the demo's style, but feel free to attempt something similar if you'd like. Otherwise, just be creative! ### Submission on BCS * Please submit both the deployed Github.io link to your homework AND the link to the Github Repository! ## Instructions * Create an app that accomplishes the following: 1. Whenever a user visits your site, the app should scrape stories from a news outlet of your choice and display them for the user. Each scraped article should be saved to your application database. At a minimum, the app should scrape and display the following information for each article: * Headline - the title of the article * Summary - a short summary of the article * URL - the url to the original article * Feel free to add more content to your database (photos, bylines, and so on). 2. Users should also be able to leave comments on the articles displayed and revisit them later. The comments should be saved to the database as well and associated with their articles. Users should also be able to delete comments left on articles. All stored comments should be visible to every user. * Beyond these requirements, be creative and have fun with this! ### Tips * Go back to Saturday's activities if you need a refresher on how to partner one model with another. * Whenever you scrape a site for stories, make sure an article isn't already represented in your database before saving it; we don't want duplicates. * Don't just clear out your database and populate it with scraped articles whenever a user accesses your site. * If your app deletes stories every time someone visits, your users won't be able to see any comments except the ones that they post. ### Helpful Links * [MongoDB Documentation](https://docs.mongodb.com/manual/) * [Mongoose Documentation](http://mongoosejs.com/docs/api.html) * [Cheerio Documentation](https://github.com/cheeriojs/cheerio) ### Reminder: Submission on BCS * Please submit both the deployed Github.io link to your homework AND the link to the Github Repository! --- ### Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. --- ### Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while **Heroku is free**, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see [Heroku’s Account Verification Information](https://devcenter.heroku.com/articles/account-verification) for more details. --- ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) --- ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. --- ### One Last Thing If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. That goes threefold for this week: MongoDB and Mongoose compose a challenging data management system. If there's anything you find confusing about these technologies, don't hesitate to speak with someone from the Bootcamp team. **Good Luck!**

Node Express Handlebars Overview In this assignment, you'll create a burger logger with MySQL, Node, Express, Handlebars and a homemade ORM (yum!). Be sure to follow the MVC design pattern; use Node and MySQL to query and route data in your app, and Handlebars to generate your HTML. Important Be sure to utilize the MYSQL Heroku Deployment Guide in order to deploy your assignment. Before You Begin Eat-Da-Burger! is a restaurant app that lets users input the names of burgers they'd like to eat. Whenever a user submits a burger's name, your app will display the burger on the left side of the page -- waiting to be devoured. Each burger in the waiting area also has a Devour it! button. When the user clicks it, the burger will move to the right side of the page. Your app will store every burger in a database, whether devoured or not. Check out this video of the app for a run-through of how it works. Submission on BCS Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! Instructions App Setup Create a GitHub repo called burger and clone it to your computer. Make a package.json file by running npm init from the command line. Install the Express npm package: npm install express. Create a server.js file. Install the Handlebars npm package: npm install express-handlebars. Install the body-parser npm package: npm install body-parser. Install MySQL npm package: npm install mysql. Require the following npm packages inside of the server.js file: express body-parser DB Setup Inside your burger directory, create a folder named db. In the db folder, create a file named schema.sql. Write SQL queries this file that do the following: Create the burgers_db. Switch to or use the burgers_db. Create a burgers table with these fields: id: an auto incrementing int that serves as the primary key. burger_name: a string. devoured: a boolean. Still in the db folder, create a seeds.sql file. In this file, write insert queries to populate the burgers table with at least three entries. Run the schema.sql and seeds.sql files into the mysql server from the command line Now you're going to run these SQL files. Make sure you're in the db folder of your app. Start MySQL command line tool and login: mysql -u root -p. With the mysql> command line tool running, enter the command source schema.sql. This will run your schema file and all of the queries in it -- in other words, you'll be creating your database. Now insert the entries you defined in seeds.sql by running the file: source seeds.sql. Close out of the MySQL command line tool: exit. Config Setup Inside your burger directory, create a folder named config. Create a connection.js file inside config directory. Inside the connection.js file, setup the code to connect Node to MySQL. Export the connection. Create an orm.js file inside config directory. Import (require) connection.js into orm.js In the orm.js file, create the methods that will execute the necessary MySQL commands in the controllers. These are the methods you will need to use in order to retrieve and store data in your database. selectAll() insertOne() updateOne() Export the ORM object in module.exports. Model setup Inside your burger directory, create a folder named models. In models, make a burger.js file. Inside burger.js, import orm.js into burger.js Also inside burger.js, create the code that will call the ORM functions using burger specific input for the ORM. Export at the end of the burger.js file. Controller setup Inside your burger directory, create a folder named controllers. In controllers, create the burgers_controller.js file. Inside the burgers_controller.js file, import the following: Express burger.js Create the router for the app, and export the router at the end of your file. View setup Inside your burger directory, create a folder named views. Create the index.handlebars file inside views directory. Create the layouts directory inside views directory. Create the main.handlebars file inside layouts directory. Setup the main.handlebars file so it's able to be used by Handlebars. Setup the index.handlebars to have the template that Handlebars can render onto. Create a button in index.handlebars that will submit the user input into the database. Directory structure All the recommended files and directories from the steps above should look like the following structure: . ├── config │   ├── connection.js │   └── orm.js │  ├── controllers │   └── burgers_controller.js │ ├── db │   ├── schema.sql │   └── seeds.sql │ ├── models │   └── burger.js │  ├── node_modules │  ├── package.json │ ├── public │   └── assets │      ├── css │      │   └── burger_style.css │      └── img │      └── burger.png │   │ ├── server.js │ └── views ├── index.handlebars └── layouts └── main.handlebars Reminder: Submission on BCS Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while Heroku is free, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see Heroku’s Account Verification Information for more details. Create a README.md Add a README.md to your repository describing the project. Here are some resources for creating your README.md. Here are some resources to help you along the way: About READMEs Mastering Markdown Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. One More Thing This is a really tough homework assignment, but we want you to put in your best effort to finish it. If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. Good Luck!

# Node Express Handlebars ### Overview In this assignment, you'll create a burger logger with MySQL, Node, Express, Handlebars and a homemade ORM (yum!). Be sure to follow the MVC design pattern; use Node and MySQL to query and route data in your app, and Handlebars to generate your HTML. ### Read This When trying to connect remotely to your Heroku database on an open network such as a coffee shop, library, or even your University WiFi, it will be blocked. If you are experiencing a Heroku connection error, this could be why. ### Important * **This assignment must be deployed.** Be sure to utilize the [MYSQL Heroku Deployment Guide](../../03-Supplemental/MySQLHerokuDeploymentProcess.pdf) in order to deploy your assignment. ### Before You Begin * Eat-Da-Burger! is a restaurant app that lets users input the names of burgers they'd like to eat. * Whenever a user submits a burger's name, your app will display the burger on the left side of the page -- waiting to be devoured. * Each burger in the waiting area also has a `Devour it!` button. When the user clicks it, the burger will move to the right side of the page. * Your app will store every burger in a database, whether devoured or not. * [Check out this video of the app for a run-through of how it works](https://youtu.be/msvdn95x9OM). ### Commits Having an active and healthy commit history on GitHub is important for your future job search. It is also extremely important for making sure your work is saved in your repository. If something breaks, committing often ensures you are able to go back to a working version of your code. * Committing often is a signal to employers that you are actively working on your code and learning. * We use the mantra “commit early and often.” This means that when you write code that works, add it and commit it! * Numerous commits allow you to see how your app is progressing and give you a point to revert to if anything goes wrong. * Be clear and descriptive in your commit messaging. * When writing a commit message, avoid vague messages like "fixed." Be descriptive so that you and anyone else looking at your repository knows what happened with each commit. * We would like you to have well over 200 commits by graduation, so commit early and often! ### Submission on BCS * **This assignment must be deployed.** * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! ## Instructions #### App Setup 1. Create a GitHub repo called `burger` and clone it to your computer. 2. Make a package.json file by running `npm init` from the command line. 3. Install the Express npm package: `npm install express`. 4. Create a server.js file. 5. Install the Handlebars npm package: `npm install express-handlebars`. 6. Install MySQL npm package: `npm install mysql`. 7. Require the following npm packages inside of the server.js file: * express #### DB Setup 1. Inside your `burger` directory, create a folder named `db`. 2. In the `db` folder, create a file named `schema.sql`. Write SQL queries this file that do the following: * Create the `burgers_db`. * Switch to or use the `burgers_db`. * Create a `burgers` table with these fields: * **id**: an auto incrementing int that serves as the primary key. * **burger_name**: a string. * **devoured**: a boolean. 3. Still in the `db` folder, create a `seeds.sql` file. In this file, write insert queries to populate the `burgers` table with at least three entries. 4. Run the `schema.sql` and `seeds.sql` files into the mysql server from the command line 5. Now you're going to run these SQL files. * Make sure you're in the `db` folder of your app. * Start MySQL command line tool and login: `mysql -u root -p`. * With the `mysql>` command line tool running, enter the command `source schema.sql`. This will run your schema file and all of the queries in it -- in other words, you'll be creating your database. * Now insert the entries you defined in `seeds.sql` by running the file: `source seeds.sql`. * Close out of the MySQL command line tool: `exit`. #### Config Setup 1. Inside your `burger` directory, create a folder named `config`. 2. Create a `connection.js` file inside `config` directory. * Inside the `connection.js` file, setup the code to connect Node to MySQL. * Export the connection. 3. Create an `orm.js` file inside `config` directory. * Import (require) `connection.js` into `orm.js` * In the `orm.js` file, create the methods that will execute the necessary MySQL commands in the controllers. These are the methods you will need to use in order to retrieve and store data in your database. * `selectAll()` * `insertOne()` * `updateOne()` * Export the ORM object in `module.exports`. #### Model setup * Inside your `burger` directory, create a folder named `models`. * In `models`, make a `burger.js` file. * Inside `burger.js`, import `orm.js` into `burger.js` * Also inside `burger.js`, create the code that will call the ORM functions using burger specific input for the ORM. * Export at the end of the `burger.js` file. #### Controller setup 1. Inside your `burger` directory, create a folder named `controllers`. 2. In `controllers`, create the `burgers_controller.js` file. 3. Inside the `burgers_controller.js` file, import the following: * Express * `burger.js` 4. Create the `router` for the app, and export the `router` at the end of your file. #### View setup 1. Inside your `burger` directory, create a folder named `views`. * Create the `index.handlebars` file inside `views` directory. * Create the `layouts` directory inside `views` directory. * Create the `main.handlebars` file inside `layouts` directory. * Setup the `main.handlebars` file so it's able to be used by Handlebars. * Setup the `index.handlebars` to have the template that Handlebars can render onto. * Create a button in `index.handlebars` that will submit the user input into the database. #### Directory structure All the recommended files and directories from the steps above should look like the following structure: ``` . ├── config │   ├── connection.js │   └── orm.js │  ├── controllers │   └── burgers_controller.js │ ├── db │   ├── schema.sql │   └── seeds.sql │ ├── models │   └── burger.js │  ├── node_modules │  ├── package.json │ ├── public │   └── assets │      ├── css │      │   └── burger_style.css │      └── img │      └── burger.png │   │ ├── server.js │ └── views ├── index.handlebars └── layouts └── main.handlebars ``` ### Reminder: Submission on BCS * Please submit both the deployed Heroku link to your homework AND the link to the Github Repository! - - - ### Minimum Requirements Attempt to complete homework assignment as described in instructions. If unable to complete certain portions, please pseudocode these portions to describe what remains to be completed. Hosting on Heroku and adding a README.md are required for this homework. In addition, add this homework to your portfolio, more information can be found below. - - - ### Hosting on Heroku Now that we have a backend to our applications, we use Heroku for hosting. Please note that while **Heroku is free**, it will request credit card information if you have more than 5 applications at a time or are adding a database. Please see [Heroku’s Account Verification Information](https://devcenter.heroku.com/articles/account-verification) for more details. - - - ### Create a README.md Add a `README.md` to your repository describing the project. Here are some resources for creating your `README.md`. Here are some resources to help you along the way: * [About READMEs](https://help.github.com/articles/about-readmes/) * [Mastering Markdown](https://guides.github.com/features/mastering-markdown/) - - - ### Add To Your Portfolio After completing the homework please add the piece to your portfolio. Make sure to add a link to your updated portfolio in the comments section of your homework so the TAs can easily ensure you completed this step when they are grading the assignment. To receive an 'A' on any assignment, you must link to it from your portfolio. - - - ### One More Thing This is a really tough homework assignment, but we want you to put in your best effort to finish it. If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs. ### Reminder When trying to connect remotely to your Heroku database on an open network such as a coffee shop, library, or even your University WiFi, it will be blocked. If you are experiencing a Heroku connection error, this could be why. **Good Luck!**

No description available

No description available

Clone from https://github.com/hhhrrrttt222111/developer-portfolio

https://m-yaseen16.github.io/Simple-Portfolio-landing-Page-Clone/

git clone https://github.com/blockmate-io/public-nft-portfolio

Found on youtube tutorial. Clone from : https://github.com/judygab/web-dev-projects/tree/main/personal-portfolio

This repository is cloned from https://github.com/orderedlist/minimal. It contains code for my portfolio website.