A simple UI app that presents a visitor with an assembly of cards that contain a country each.
Cards include the countries flag, the capital's name in large font and a few country stats.
A visitor can see also a featured card on top - the first one in the collection by default. Clicking on a card features it.
A visitor can also find a large 'Shuffle' button in the center of the view. Clicking it shuffles the deck and displays the first card in the newly orderd list in the featured area.
A visitor can find a 'Details' link in each card at the button. Clicking it redirects to a card show page where the visitor can find more about the country.
A visitor can find at a card's show page:
- Country Name
- A randomly generated picture of the country
- Same country stats as in the small card
- Capital's current weather
- Country's map
A visitor can click 'Home' on the navigation bar and go back to the home page or refresh it if already there.
Visit the deployed app: explore-countries
To supply the card's show page with an image I used Pixabay's api. Pixabay doesn't allowed hot-linking so to use the images I had to store them on my own server.
I chose to use Active Storage to store the images in AWS S3. For this I had to first download the image from the url and then upload it to S3.
To use AWS S3 I installed the gem 'aws-sdk' and installed active storage in my app by running bin/rails active_storage:install and then the migrations. To download the image I used the gem 'down' which saves the image as a tempfile.
-
Ruby 3.0.0
-
Rails-6.1.3.2
Fork this Github repository: Cards_shuffler
Clone your 'Cards_shuffler' repository using SSH:
$ git clone git@github.com:Coding-Gymnasium/Cards_shuffler.git
In the command line run the following commands in order:
$ rails db:{create,migrate}$ rails generate rspec:install$ bundle exec figaro install$ bundle install$ yarn install
To run this app locally you would need to obtain api keys and add them to config/application.yml like in the following example:
WEATHER_API_KEY: <Your api key goes here without quotation marks>
Weather: Open Weather
Images: Pixabay
Countries: Rest Countries
Maps: MapQuest
We can check the test on the spec folder by running rspec
In the command line run
$ bundle exec rspec
All tests should be passing.
