meilisearch/demo-movies

Next.js app to find streaming platform to watch movies

Website | Roadmap | Meilisearch Cloud | Blog | Documentation | FAQ | Discord

⚡ A lightning-fast search engine that fits effortlessly into your apps, websites, and workflow 🔍

Meilisearch helps you shape a delightful search experience in a snap, offering features that work out-of-the-box to speed up your workflow.

🔥 Try it! 🔥

✨ Features

• Search-as-you-type: find search results in less than 50 milliseconds
• Typo tolerance: get relevant matches even when queries contain typos and misspellings
• Filtering and faceted search: enhance your users' search experience with custom filters and build a faceted search interface in a few lines of code
• Sorting: sort results based on price, date, or pretty much anything else your users need
• Synonym support: configure synonyms to include more relevant content in your search results
• Geosearch: filter and sort documents based on geographic data
• Extensive language support: search datasets in any language, with optimized support for Chinese, Japanese, Hebrew, and languages using the Latin alphabet
• Security management: control which users can access what data with API keys that allow fine-grained permissions handling
• Multi-Tenancy: personalize search results for any number of application tenants
• Highly Customizable: customize Meilisearch to your specific needs or use our out-of-the-box and hassle-free presets
• RESTful API: integrate Meilisearch in your technical stack with our plugins and SDKs
• Easy to install, deploy, and maintain

📖 Documentation

You can consult Meilisearch's documentation at https://www.meilisearch.com/docs.

🚀 Getting started

For basic instructions on how to set up Meilisearch, add documents to an index, and search for documents, take a look at our Quick Start guide.

⚡ Supercharge your Meilisearch experience

Say goodbye to server deployment and manual updates with Meilisearch Cloud. No credit card required.

🧰 SDKs & integration tools

Install one of our SDKs in your project for seamless integration between Meilisearch and your favorite language or framework!

Take a look at the complete Meilisearch integration list.

⚙️ Advanced usage

Experienced users will want to keep our API Reference close at hand.

We also offer a wide range of dedicated guides to all Meilisearch features, such as filtering, sorting, geosearch, API keys, and tenant tokens.

Finally, for more in-depth information, refer to our articles explaining fundamental Meilisearch concepts such as documents and indexes.

📊 Telemetry

Meilisearch collects anonymized data from users to help us improve our product. You can deactivate this whenever you want.

To request deletion of collected data, please write to us at [email protected]. Don't forget to include your Instance UID in the message, as this helps us quickly find and delete your data.

If you want to know more about the kind of data we collect and what we use it for, check the telemetry section of our documentation.

📫 Get in touch!

Meilisearch is a search engine created by Meili, a software development company based in France and with team members all over the world. Want to know more about us? Check out our blog!

🗞 Subscribe to our newsletter if you don't want to miss any updates! We promise we won't clutter your mailbox: we only send one edition every two months.

💌 Want to make a suggestion or give feedback? Here are some of the channels where you can reach us:

• For feature requests, please visit our product repository
• Found a bug? Open an issue!
• Want to be part of our Discord community? Join us!

Thank you for your support!

👩‍💻 Contributing

Meilisearch is, and will always be, open-source! If you want to contribute to the project, please take a look at our contribution guidelines.

📦 Versioning

Meilisearch releases and their associated binaries are available in this GitHub page.

The binaries are versioned following SemVer conventions. To know more, read our versioning policy.

Differently from the binaries, crates in this repository are not currently available on crates.io and do not follow SemVer conventions.

demo-movies's Issues

Modal Layout

Images are slow to appear

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

People

Props

- image
- name
- description

IconLink

Props

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

Remove color package

Conflict with Storybook.
Check that nothing is broken

Add Instant MeiliSearch & retrieve data from MeiliSearch

Add dark / light mode toggle in mobile

Update favicon

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

Add Github button somewhere

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

Clean theme

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

Images don't appear on Safari

The Poster aren't displayed on Safari :(

Add a People placeholder image

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

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.

Tag

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.

Create theme

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

Add Storybook

Display 24 movies instead of 20

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.

Setup dark mode

Add fonts

Modal

Typography

Props

- variant
- children (text)

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.

Searchbox

Add Modal tests

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

Add i18n

Remove pull request template

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

Update node version to 16

Reduce space between Informations and Cast

Space is too big, we can reduce it

Deploy to Vercel

Poster

Toggle

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.

Card

Add Tests

iconbutton

Props

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

L'ajouter dans la searchbox (clear)

Fix Storybook Dark Mode

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

Rating

Props

- rating

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

Integrate 404

Create Layout

Poster story is broken

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

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

Use next/images for poster

• lazy load