This project is a coding challenge designed to assess technical skills in Ruby on Rails, front-end frameworks, and asynchronous form handling. The goal is to create a simple web form that allows users to input a dog breed and, upon submission, fetch and display an image of the specified breed from the Dog API.
- Objective
- Challenge Description
- Technologies Used
- Hosted App
- Setup Instructions
- Usage
- Deployment
- Improvement Areas
The objective of this coding challenge is to demonstrate proficiency in Ruby on Rails, front-end development using Bootstrap or Tailwind, and asynchronous form handling. The challenge provides an opportunity to showcase coding style, problem-solving skills, and the ability to integrate with external APIs.
Design a web form with the following features:
- A text input field labeled "Breed".
- A button to submit the form.
- On form submission, fetch an image of the specified dog breed from the Dog API.
- Display the fetched image and the breed name to the right of the form.
- Backend: Ruby on Rails
- Frontend: Tailwind, Hotwire
- API: Dog API
- Version Control: Git
- Hosting: Render
https://doggie-fb2k.onrender.com/
Please expect some delay in the initial response. As this is a free instance, it may spin down during periods of inactivity, potentially causing delays of 50 seconds or more for requests.
-
Install Ruby Follow the instructions to install Ruby 3.1.3: https://www.ruby-lang.org/en/documentation/installation/ You can use
Dockerfile
as well to build the environment. -
Clone the Repository:
git clone https://github.com/RajRoR/doggie.git cd doggie
-
Install Dependencies
bundle install
-
Start Server
./bin/dev
-
Access the Application: Open your browser and navigate to http://localhost:3000
-
Run RSpec Tests (optional)
rspec spec
- Enter the name of the dog breed in the "Breed" input field. E.g.: African, French Bulldog, Husky, etc.
- Click the "Surprise Me!" button.
- An image of the specified dog breed will be displayed to the right of the form, along with the breed name.
The CI/CD pipeline is set up for the repo. It verify each commit with various checks.
It automatically deploys whenever a new commit is pushed or merged into the main
branch.
- Better Responsive Design
- Fuzzy-Matching for Input
- Implement fuzzy-matching to make the system more intelligent and improve user experience.
- Beautify HTML Validation Messages
- Enhance HTML validation messages or replace them with custom designs.
- Dynamic Image Dimensions
- Handling of image dimensions, especially for images with non-standard dimensions.
- Introduce Database and Table for Breeds
- Create a database and table to store and query available breeds.
- Develop a rake task to fetch and store/update the table periodically or as needed using data from the Breeds List API.
- Add a cron job to run this rake task periodically.
- Use the breeds list data to validate input breed values before making the API call.
- Use Custom Validators, Concerns, etc.
- Higher Test Coverage