Entertainment App Built With Vue.js and Tailwind CSS

by Vue.js Examples

Entertainment App

Solution for a challenge from frontendmentor.io.

Demo | Solution | Challenge

Overview

Introduce your projects by taking a screenshot or a gif. Try to tell visitors a story about your project by answering:

  • What was your experience?
  • What have you learned/improved?
  • Your wisdom? ?

Built With

Features

This application/site was created as a submission to a Frontend Mentor challenge. The challenge was to build an application to complete the given user stories.

  • View the optimal layout for the app depending on their device’s screen size
  • See hover states for all interactive elements on the page
  • Navigate between Home, Movies, TV Series, and Bookmarked Shows pages
  • Add/Remove bookmarks from all movies and TV series
  • Search for relevant shows on all pages
  • Bonus: Build this project as a full-stack application
  • Bonus: If you’re building a full-stack app, we provide authentication screen (sign-up/login) designs if you’d like to create an auth flow

How To Use

To clone and run this application, you’ll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/HermanLD/FM-entertain-app

# Install dependencies
$ npm install

# Compiles and hot-reloads for development
$ npm run dev

# Compiles and minifies for production
$ npm run build

# Run your unit tests [Vitest](https://vitest.dev/)
$ npm run test:unit

# Run your unit tests [Vitest](https://vitest.dev/)
$ npm run build
$ npm run test:e2e

# Lint with [ESLint](https://eslint.org/)
$ npm run lint

Customize configuration

See Vite Configuration Reference.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Acknowledgements

Contact

GitHub

View Github