Entertainment App
Solution for a challenge from frontendmentor.io.
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
- Vitest Unit Testing
- Cypress E2E Testing
- A Complete Guide to Flexbox -by CSS-Tricks
- What the Flexbox!? -Course by Wes Bos
- Frontend Mentor
Contact
- Website Portfolio
- GitHub @HermanLD
- Twitter @DardonHerman
- Linkedin herman-dardon