/Frontend-Framework-Challenge

1 app, 1 day, 4 frameworks + vanilla js

Primary LanguageTypeScript

Frontend-Framework-Challenge

Requirements

  • Router : 2 pages, a home/index and a favorites page
  • Conditional rendering of navigation: while on home page display home or a logo, while on favorites pages, you must display favorites
  • The form must be used to trigger an api call
  • Conditional rendering of loading: display a loader while waiting for images
  • Conditional rendering of images: render images or "No results found"
  • Conditional rendering of favorites icon: if the image is favorited display a filled star, empty otherwise.
  • Add/remove favorites: ability to add/remove favorites by clicking on a star icon
  • Favorites Page : display favorites or "No favorites yet"
  • Favorites Page : ability to remove a favorited image

Rules

  • The challenge must be completed within 24 hours
  • You must use the html/css boilerplate provided
  • Vanilla js is mandatory, you can use any JS framework for the rest
  • You must use Skeleton and FontAwesome
  • For vanilla js , you cannot use modules or npm

Usage

Install the dependencies and devDependencies and start the server.

Svelte

$ cd svelte
$ npm i
$ npm run dev

Vue

$ cd vue3-composition-api
$ npm i
$ npm run serve

React

$ cd react-js
$ yarn install
$ yarn start

Angular

$ cd angular
$ npm i
$ ng serve