• Project’s main requirements according to the assignment:

  • Showing the full list of movie records in a user friendly way
  • Each movie record has 5 field, using required field validation, min length validation and correct format for URLs
  • Each item can be opened in a new page where it can be edited and deleted
  • Uses veu.js and vuex
  • Routing is done via vue-router,
  • UI is built from scratch
  • Uses Tailwind for styling

• Extra features:

  • It’s fully responsive
  • Some basic UI components such as header, footer, hero image, etc are also implemented to provide a smoother look and feel from UI/UX perspective
  • Items can be listed based on the movie’s genre, via clicking on the respective link in the footer
  • In the “Add movie” page, if the user doesn't have an image URL in hand, they can click on the” Im feeling lucky” section and an automatic image will be used for that card. This saves the time for the user so they can take their time to find the most suitable image at their own pace.
  • Modals: The website displays a reusable modal every time the user prompts to delete an item. It also displays a proper message after the action has completed successfully.
  • Application is deployed in Netlify
  • Edit and Add are using the same component In order to increase efficiency and reusability

• For demo click Demo

• MIT

• Reach out to me at: [email protected]
• My portfolio: Gagik.me

yarn install

yarn serve

yarn build

yarn lint

See Configuration Reference.

• For creating random pictures I used Lorem Picsum