meilisearch/demo-movies

Next.js app to find streaming platform to watch movies

demo-movies's Issues

Add Instant MeiliSearch & retrieve data from MeiliSearch

Fix Storybook Dark Mode

Dark Mode isn't working well on Storybook (changing mode doesn't apply the theme colors).

Add Github button somewhere

Display 24 movies instead of 20

Poster story is broken

The Poster story isn't displaying well. The image needs height: 100% in order to display correctly.

Fix Safari style

Some styles may be broken on Safari, as the Toggle button.
We should check if other styles are impacted and fix them.

Add hover/focus state on some links

The links by MeiliSearch and github don't have any hover nor focus state.
For accessibility reasons, we should add them

People

Props

- image
- name
- description

Add fonts

Add Storybook

Add a People placeholder image

If there's no image to be found, the broken sign is appearing. Example with the movie Venom :

Create Layout

Deploy to Vercel

Fix people from previous modal being loaded briefly

By opening the modal, we can first see that the people from the previously opened modal appear.

Setup dark mode

Modal

Integrate 404

Rating

Props

- rating

Searchbox

Automate the extraction of the previous day updates in TMDB

Maybe we can use cron directly with Next JS.
https://medium.com/@dbredvick/how-to-create-a-cron-job-with-nextjs-and-now-159aa973c00e

Remove pull request template

As the repo is going to be public soon, we have to remove the empty pull_request_template.md

Clean theme

Some files inside the theme folder are unused. The folder should be cleaned :)

Tag

Images don't appear on Safari

The Poster aren't displayed on Safari :(

Reduce space between Informations and Cast

Space is too big, we can reduce it

Tab

Props

- tabs (array)

Update favicon resolution

The favicon of https://demo-movies-six.vercel.app/ looks a bit blurry, we should update it 😄

Here is a comparison between demo-movies and meilisearch cloud

Update node version to 16

Use next/images for poster

• lazy load

Typography

Props

- variant
- children (text)

Change width of requested images

The images are requested with a quality of 75, but their width is 2048, and the images takes time to be displayed.
We should see how we can change the requested image size with Next JS.

Toggle

Add Tests

Add i18n

Update favicon

The favicon is still the old Meilisearch logo, it has to be replaced by the new one

Remove color package

Conflict with Storybook.
Check that nothing is broken

Add Modal tests

Create theme

Images are slow to appear

Try to add sharp plugin as Next recommend it, to see if it fixes the problem

Change white mode (sun) icon

Currently, the Toggle has a yellow circle as a toggle to light mode icon:

This doesn't speak for itself, so we would like to update it. Here is the new icon:

It has to be placed inside the src/components/icons/svg folder, and then simply run the yarn icons command to transform the SVG into a React component.

iconbutton

Props

- children (icon)
- background (true/false)

L'ajouter dans la searchbox (clear)

Keep focus on current movie after modal closing

When we click on a movie, the modal opens. On close, the focus that was previously on the movie card is lost.
We should keep the focus on it for accessibility reasons.

Add dark / light mode toggle in mobile

Add MeiliSearch mention somewhere

Update licence file

There are 2 LICENCE files, we should remove one.
And the Copyright (c) 2020-2021 MeiliSearch should be replaced with Copyright (c) 2021-2022 Meili SAS

Poster

Dark / Light mode doesn't work well with System Preferences set to "auto"

On mac, inside the System Preferences, we can choose between "Dark", "Light", and "Auto".
By selecting one of light or dark, everything works as expected.
But by choosing "auto", the detection doesn't work well

IconLink

Props

- link (title, url)
- children (icon)

Modal Layout

Card