Replace flickr with pexels #29577
Replace flickr with pexels #29577
Conversation
The old project_flickr_api.md will be moved to archive/ruby_on_rails/ folder Replace project flickr api with project pexel api Move the old lesson file to archive
github-actions
bot
added
Type: Chore
There was a problem hiding this comment.
Pull Request Overview
This PR replaces instructions for using the Flickr API with updated guidance for using the Pexels API in The Odin Project curriculum. Key changes include:
- Adding a new file (project_pexels_api.md) with assignment details for a Pexels-based Rails photo widget.
- Removing the outdated Flickr API instructions.
- Archiving the previous Flickr API lesson into a separate archive folder.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| ruby_on_rails/apis/project_pexels_api.md | Newly added instructions guide developers to use the Pexels API instead of Flickr. |
| ruby_on_rails/apis/project_flickr_api.md | Removed the old Flickr API instructions. |
| archive/ruby_on_rails/project_flickr_api.md | Archived the previous Flickr API lesson for historical reference. |
|
I just reached the flicker API lesson, got stuck, then went through the Pexel lesson you are proposing. Seemed to go pretty smooth (pictured below). Some small feedback : There was some friction trying to upload some random photos. They want a certain quality (and megapixel) and my photos were being rejected. I found an easy workaround is that instead of uploading photos, you can browse the front page and add some photos quickly to your collection by hovering your mouse over the photo and pressing the collect icon in the top right. A potential reword could be something like:
Ty @NikEmman for making this. Hope it gets reviewed soon 😄 |
There was a problem hiding this comment.
Thank you so much for taking this project on @NikEmman
It'll take me a bit to properly review this as I'd like to try the project for myself and see how it feels to work through it.
In the meantime, you can go ahead and fix the mdlint issues that are being flagged. If you don't know where to find them, click the "Files changed" tab at the top of the PR and scroll down and you'll see where our linter has pointed out a few things.
You can also learn how to run the linting tool locally by checking in the curriculum linting section of the contributing guide
|
@JoshDevHub Fixed the md lint issues. Thanks for your detailed answer, made it easy! |
There was a problem hiding this comment.
I think this is all really good. Just finished trying the project for myself, and it went really well.
Just have one adjustment I'm going to recommend to have Flickr completely yanked out of the curriculum, and I also think it's a good idea to implement the suggestion above from @quarrybreeze
Let me know if you have any questions.
| @@ -0,0 +1,24 @@ | |||
| ### Introduction | |||
|
|
|||
| Remember the warm-up in the previous project when you played with the Flickr API? Now it's time for you to actually use it. Huzzah! For that however, instead of Flickr, we will use another service, called Pexels. You'll create a basic photo widget that allows you to display photos from your Pexels gallery. We'll rely on a tutorial for much of the heavy lifting but the principles of what you do here will be repeatable for use with other APIs. | |||
There was a problem hiding this comment.
This warmup stuff using the Flickr API no longer makes sense to pursue. The previous lesson uses it as part 1 of the assignment, and again, users are going to be locked out of some of this functionality.
I kind of think we can just get rid of that warmup in the kittens project altogether, and then this opening paragraph would need adjusting to omit the references to it.
Let me know what you think.
There was a problem hiding this comment.
Apologies for the late reply. Away from home atm, will work on it upon return in 4 days or so. Your recommendations sound right, will provide the refactored version here, and if changes are accepted will also update the PR.
There was a problem hiding this comment.
@JoshDevHub On the subject of the reference to the previous lesson could be rephrased to something more generic, that can refer to the previous lesson regardless if it uses Flickr or is later refactored to something else. Maybe something along these lines
Currently in the PR:
-Remember the warm-up in the previous project when you played with the Flickr API? Now it's time for you to actually use it. Huzzah! For that however, instead of Flickr, we will use another service, called Pexels. You'll create a basic photo widget that allows you to display photos from your Pexels gallery. We'll rely on a tutorial for much of the heavy lifting but the principles of what you do here will be repeatable for use with other APIs.
After the review:
+Remember the warm-up in the previous project when you played with an API? Now it's time to actually use one. Huzzah! For that, we will use another service, called Pexels. You'll create a basic photo widget that allows you to display photos from your Pexels gallery. We'll rely on a tutorial for much of the heavy lifting but the principles of what you do here will be repeatable for use with other APIs.On @quarrybreeze 's suggestion we use it as he wrote it. (Thanks by the way!)
Currently in the PR:
-4. Upload a few photos to your account! Then add them to a collection. Select the created collection, the URL will look like ` https://www.pexels.com/collections/collectionTitle-collectionIDhere/`. An example would be `adkmjqz`. You'll need that later for some of the API methods.
After the review:
+ 4. Browse the website for some photos then add them to a collection (or upload your own!). Navigate to your created collection, and notice the URL will look like ` https://www.pexels.com/collections/collectionTitle-collectionIDhere/`. An example would be `adkmjqz`. You'll need that later for some of the API methods.As a final note, I'm also offering myself to re-write the previous lesson. Should I create an issue?
Please let me know your thoughts. Thanks for your time!
There was a problem hiding this comment.
Yes, you can create an issue for that!
…iculum into replace_flickr_with_pexels
There was a problem hiding this comment.
This looks pretty good to me. Great work 💪
Next steps:
- Fix the remaining lint issues. Again you can follow the process I outlined above. Unfortunately because this is your first (or one of your first?) contributions to the curriculum, CI doesn't run automatically (this is to prevent potential spam issues). So I have to run it manually for you each time I visit this PR. Anyways, just like before, if you click the "Files changed" tab at the top, you can see all the notes the linter has made by browsing through the changes. Most of them should be auto-fixable by the lint scripts (again, you can find information about these in the curriculum's contributing guide). The one that isn't is the accessible link text, which I've included a suggested wording change just below that you can accept.
- After doing the above, we'll need to make a PR to the main site repo. This will involve adding this new lesson to the fixture list for the Ruby on Rails course and removing the Flickr one. If you want to take this on yourself, you'll need to:
- set up the TOP app to run on your local machine. documentation for how to do that
- take the steps to add a new lesson to the curriculum. there's documentation for this as well
- and of course, you'll have to remove the old Flickr project, which will likely be easy to understand after doing the above two things, but feel free to ask any questions you may have about that.
If you don't feel comfortable setting up or working within the TOP app, that's completely fine, and I can do it myself or let someone else do it. Just let me know what you want to do.
| 3. You'll have to give them some basic information about your app. Fill the form and let them know how awesome your photo gallery app will be. Click "Generate API Key" to get a key generated for you. Copy it somewhere you can get to it later. You can find it again however, while logged in, by re-visiting ["Your API Key"](https://www.pexels.com/api/key/). | ||
| 4. Browse the website for some photos then add them to a collection (or upload your own!). Navigate to your created collection, and notice the URL will look like ` https://www.pexels.com/collections/collectionTitle-collectionIDhere/`. An example would be `adkmjqz`. You'll need that later for some of the API methods. | ||
| 5. Create a new Rails app and add a gem for the [Pexels API](https://www.google.com/search?q=pexels+api+gem). There are gems for pretty much every API out there. They will all require you to include your API keys and secret keys somehow. Look for gems that are maintained (have recent commits) and well-adopted (GitHub stars is one way to get a good gauge for how valuable a gem is). Alternatively, you can browse through [RubyGems](https://rubygems.org/) to see popular gems. | ||
| 6. One note is that it's not good practice to have your API key hard coded into your app because then it's hardly a secret, especially if you're pushing to GitHub. A better practice is to store the key in an [environment variable](http://railsapps.github.io/rails-environment-variables.html) or use a gem like [`figaro` (see docs)](https://github.com/laserlemon/figaro). You can use [`Rails credentials`(see this article)](https://web-crunch.com/posts/the-complete-guide-to-ruby-on-rails-encrypted-credentials) as well (although not mentioned in the article, the value of each key can also be accessed by chaining keys as methods as shown in the [Rails Guides](https://guides.rubyonrails.org/security.html#custom-credentials) examples). Environment variables allow you to push your key to your app directly from the command line when it fires up. Figaro operates under the same principle, though it helps you out by allowing you to store the keys in an actual file that just doesn't get committed with the rest of your code. Rails credentials encrypts the keys using the master key. Use one of these techniques unless you're a cowboy. |
There was a problem hiding this comment.
| 6. One note is that it's not good practice to have your API key hard coded into your app because then it's hardly a secret, especially if you're pushing to GitHub. A better practice is to store the key in an [environment variable](http://railsapps.github.io/rails-environment-variables.html) or use a gem like [`figaro` (see docs)](https://github.com/laserlemon/figaro). You can use [`Rails credentials`(see this article)](https://web-crunch.com/posts/the-complete-guide-to-ruby-on-rails-encrypted-credentials) as well (although not mentioned in the article, the value of each key can also be accessed by chaining keys as methods as shown in the [Rails Guides](https://guides.rubyonrails.org/security.html#custom-credentials) examples). Environment variables allow you to push your key to your app directly from the command line when it fires up. Figaro operates under the same principle, though it helps you out by allowing you to store the keys in an actual file that just doesn't get committed with the rest of your code. Rails credentials encrypts the keys using the master key. Use one of these techniques unless you're a cowboy. | |
| 6. One note is that it's not good practice to have your API key hard coded into your app because then it's hardly a secret, especially if you're pushing to GitHub. A better practice is to store the key in an [environment variable](http://railsapps.github.io/rails-environment-variables.html) or use a gem like [`figaro` (see docs)](https://github.com/laserlemon/figaro). You can use [`Rails credentials`(see this article)](https://web-crunch.com/posts/the-complete-guide-to-ruby-on-rails-encrypted-credentials) as well (although not mentioned in the article, the value of each key can also be accessed by chaining keys as methods as shown in the [Rails Guides](https://guides.rubyonrails.org/security.html#custom-credentials) examples). Environment variables allow you to push your key to your app directly from the command line when it fires up. Figaro operates under the same principle, though it helps you out by allowing you to store the keys in an actual file that just doesn't get committed with the rest of your code. Rails credentials encrypts the keys using the master key. Use one of these techniques unless you're a cowboy. |
| 6. One note is that it's not good practice to have your API key hard coded into your app because then it's hardly a secret, especially if you're pushing to GitHub. A better practice is to store the key in an [environment variable](http://railsapps.github.io/rails-environment-variables.html) or use a gem like [`figaro` (see docs)](https://github.com/laserlemon/figaro). You can use [`Rails credentials`(see this article)](https://web-crunch.com/posts/the-complete-guide-to-ruby-on-rails-encrypted-credentials) as well (although not mentioned in the article, the value of each key can also be accessed by chaining keys as methods as shown in the [Rails Guides](https://guides.rubyonrails.org/security.html#custom-credentials) examples). Environment variables allow you to push your key to your app directly from the command line when it fires up. Figaro operates under the same principle, though it helps you out by allowing you to store the keys in an actual file that just doesn't get committed with the rest of your code. Rails credentials encrypts the keys using the master key. Use one of these techniques unless you're a cowboy. | |
| 6. One note is that it's not good practice to have your API key hard coded into your app because then it's hardly a secret, especially if you're pushing to GitHub. A better practice is to store the key in an [environment variable](http://railsapps.github.io/rails-environment-variables.html) or use a gem like [`figaro` (see docs)](https://github.com/laserlemon/figaro). You can read the [Web Crunch article on Rails credentials](https://web-crunch.com/posts/the-complete-guide-to-ruby-on-rails-encrypted-credentials) as well (although not mentioned in the article, the value of each key can also be accessed by chaining keys as methods as shown in the [Rails Guides](https://guides.rubyonrails.org/security.html#custom-credentials) examples). Environment variables allow you to push your key to your app directly from the command line when it fires up. Figaro operates under the same principle, though it helps you out by allowing you to store the keys in an actual file that just doesn't get committed with the rest of your code. Rails credentials encrypts the keys using the master key. Use one of these techniques unless you're a cowboy. |
This is just a wording adjustment on the Web Crunch link to pass our accessibility audit. This isn't anything you did (the previous wording was incorrect), but yeah.
Basically the logic here is that link text that's like "this article" or "this post" have poor accessibility for users relying on screenreader software when browsing our lessons.
|
I think the linting issues are fixed. My bad, should have caught this earlier and not waste more of your time. I would like to try to do the full work and submit the PR to the main site repo, if that is OK with you. Would be a fool to pass on learning opportunities! Thanks once again for your thorough answers 👍 |
|
Thanks @NikEmman and @JoshDevHub for working on this issue. Its been there for such a long time and its great how its finally getting fixed! |
|
Are you still working on this one mate? |
Because
Many users have reported encountering issues with the Flickr API project within TheOdinProject curriculum. Specifically, problems include difficulties with signing in, logging in, and frequent "Account creation failed" errors.
This PR
Issue
Closes #28285
Additional Information
Pull Request Requirements
location of change: brief description of changeformat, e.g.Intro to HTML and CSS lesson: Fix link textBecausesection summarizes the reason for this PRThis PRsection has a bullet point list describing the changes in this PRIssuesection