Frontend Mentor - Entertainment web app solution

This is a solution to the Entertainment web app challenge on Frontend Mentor.

Table of contents

• Overview
  • Features
  • Screenshot
  • Link to live version
• My process
  • Built with
  • Goals
  • Tests

Overview

Features

• Connected to a database (Firabe)
• Possiblity to log in and sing in (with validation)
• Possibility for logged users to add / remove movies from Favorites
• Possibility to add user thumbnail
• Serach bar (used downshift.js)
• "Recommended for you" on the main page - every time you refresh it draws different videos
• Favorites page only for logged users
• Videos thumbnails are progressively loaded (used react-progressive-graceful-image)

Screenshot

Link to live version

• Live Site URL: Live site URL

My process

Built with

• HTML5 markup
• TailwindCSS
• React - JS library
• React Router
• Firebase
• Zustand
• Playwright
• Mobile-first workflow
• Atomic design methodology

Goals

While developing the project, I wanted to learn about and practice styling elements using TailwindCSS. Also, I emphasized the use of Atomic design methodology

Tests

Added some e2e basic tests using Playwright