assignment.md

Internship interview assignment - Bold Care

Find below the requirements for the internship assignment. Reach out to mohit@boldcare.in if you have any questions.

Figma link

Pages

• Home Page
• Facts Page
• Generator Page

APIs Used

• Cataas API
• Meow API

App Overview

• Top Bar: top bar consists of links(Home, generator, fact) and Logo(on clicking on logo route to home). Top Bar is sticky(i.e. it should be shown even if the user scrolls down)
• Footer: footer consists of links(Home, generator, fact), Logo(on clicking on logo route to home) and contact details. Footer is at the end of the page.

Home Page

url: /

• On Page load a cat image with message - "Welcome to cat generator is loaded"(Using the Cataas API).
• On clicking the "Get New" button, a new image with "Welcome to cat generator is loaded" if added below the latest image.
• eg: get new button is clicked thrice, so 3 new images are generated.

  [img1]
  [img2]
  [img3]
  [img4]
  [button]
  

Facts Page

url: /facts

• On page load fetch a random cat fact from Meow API and use the Cataas API to generate a random cat image with the fact as the text.
• On clicking the "Generate fact" button, fetch a new fact and create a new random image with the fact as the text on the image.
• new images are appended to the page in a similar fashion as the main page

Generator Page

url: /generator

• Page has a form with the fields:
  • tag: tag of the cat image(select field). Options:
    • cute
    • ugly
    • big
    • small
    • white
    • black
  • message: message to be shown on the image(text field)
• Validate form
  • message must be a string with minimum length 3 and maximum length 30
  • tag must be non-empty
• On submitting form append a new image using the url - /cat/:tag/says/:text where tag is tag field in the form and text is message field in the form.
• Append images in a similar fashion as the above 2 pages. No inital image on page load.

Tips

• Append all calls to Cataas API with ?v=random_number where random_number is a randomly generated number. This will prevent caching of images when you generate a new image.
• Check out some tutorials about how to implement figma designs in html-css.
• You are free to add some UI elements that might help improve the design of the website.

Tech Stack

• Use react
• Any styling library or vanilla css allowed
• No class based components. Only functional components allowed.

Evaluation

Evaluation will be divided into 2 components:

• functional: did the coder implement all functional requirements and pages correctly.
• ui: how accurately did the coder implement the UI. Is the website responsive?

Try to make the website responsive. Only the desktop view is given

Submission guidelines

• Create a new private github repo and add mohit.y242@gmail.com to the repo.