plotwist-app / plotwist Goto Github PK

Implement Internationalization for Multi-language Support

Objective:

Enable multi-language support for the [Project Name] project using Next.js internationalization features.

Implementation Overview:

Key Steps:

Additional Information:

Resources:

• Minimal i18n routing and translations
• next-intl
• next-international
• next-i18n-router

Currently, in the details of a TV series or film, the only images shown are backdrop (landscape mode). This is currently configured in the code to work this way. You need to think of a way to show more than one image format.

https://github.com/status-451/tmdb-front-end/blob/fababddb270230396ab9eaa11c5359f45644bf8c/src/app/app/movies/%5Bid%5D/components/movie-images.tsx#L44-L48

In addition, actually the images just render is video aspect-ratio (9:16):

https://github.com/status-451/tmdb-front-end/blob/fababddb270230396ab9eaa11c5359f45644bf8c/src/app/app/movies/%5Bid%5D/components/movie-images.tsx#L13-L42

We need to change this, to render all the images that returned from request and render in different aspect-ratios, by the image type (logos, poster and backdrops).

const { backdrops, logos, poster } = await TMDB.tvShows.images(tvShowID)

To do this, we can make the following layout:

User Story:

As a Pro User
I want to clone other users' curated lists into my profile
so that I can explore new content and save time creating my own lists from scratch.

Acceptance Criteria:

1. Accessibility:
   • Pro users can view an option to clone a public or shared list owned by other users.
   • If a user attempts to clone their own list, an informative message should be displayed, stating it's already accessible.
2. Cloning Process:
   • Clicking the "Clone List" button triggers a confirmation dialog to verify the action.
   • Upon confirmation, the entire selected list is duplicated under the Pro user's account.
   • The cloned list retains all items from the original, maintaining the same order and categories.
3. Customization:
   • The newly cloned list can be edited, reordered, or renamed by the Pro user without affecting the original list.
4. Notification:
   • The original list owner should receive a notification that their list was cloned, unless the list was publicly available.
5. Limitations:
   • Cloning is only allowed on public or shared lists, not private ones.
6. Feedback and Errors:
   • Users receive a confirmation message once the list is successfully cloned.

Tasks:

1. Add a "Clone List" button next to eligible lists.
2. Implement a confirmation dialog for cloning actions.
3. Integrate notifications for list cloning events.
4. Ensure that newly cloned lists are editable by the Pro user.

Notes:

• This feature requires Pro subscription to incentivize upgrades.
• Analyze security implications to ensure only authorized lists can be cloned.

When you start the project, you can see this warning in the console.

Envoriment:
Node: v21.4.0
Os: Macos Sonomona 14.2
Config: ARM | Apple M3 Pro

A log with recent changes

https://vercel.com/changelog
https://linear.app/changelog

Exemplo: https://plotwist.app/pt-BR/people/2025252

TODO:

• Line-clamp 3 linhas
• Melhorar a exibição da listagem

1. It should be possible for the user to create a community
2. It should be possible for the user to join the existing community
3. It should be possible for the user to link tmdb items/collections to this community
4. It should be possible for the user to see the community members
5. it should be possible to list communities in a movie/tv series page

Weekly, according to the day chosen, receive recommendations based on the items on the lists

In public lists, we have to add a session to comment other people's lists.

Examples: title, description, canonical, openGraph

In this form, we need to put select input to change list visibility:

Options:

• Public
• Network
• Private

https://playwright.dev/

TMDB doc: https://developer.themoviedb.org/reference/discover-movie

Title: Refactor Database Query in React Component

Description: Currently, we are running a SQL query within a React component, which mixes responsibilities and makes the component less maintainable.

Suggested Solution: Create a separate service or utility function to handle the database query. This will separate concerns and make future changes to the query easier without affecting the component directly.

Tasks:

1. Create a Database Query Service: Develop a service or utility function that encapsulates the database query logic.

2. Update the Component: Refactor the React component to call the database query service instead of running the query directly.

3. Testing: Create tests to ensure the database query service works correctly, and the component remains functional after refactoring.

Acceptance Criteria:

• The React component should no longer execute the SQL query directly.
• The existing functionality of the component should be preserved after the refactoring.
• Tests should be created or updated as needed and pass successfully.
• The refactoring should improve code readability and maintainability.

Additional Context: This change aims to enhance code organization and follow best practices by separating concerns in a React project.

Examples:

https://github.com/status-451/tmdb-front-end/blob/caab370962b53249ad59ea5c2232df7b658d2e11/src/app/app/components/reviews.tsx#L15C1-L25C5

Usar atributos hreflang: O atributo hreflang é uma solução recomendada pelo Google para páginas com conteúdo semelhante em diferentes idiomas. Ele informa ao Google que existem versões intencionais de uma página em vários idiomas, ajudando a direcionar o usuário para a versão da página no idioma mais adequado. Isso é feito incluindo um link rel="alternate" hreflang="x" na seção de suas páginas, onde "x" é o código do idioma adequado para essa versão da página.

Sitemaps separados por idioma: Considere criar sitemaps separados para cada idioma. Isso pode ajudar os motores de busca a entender melhor a organização do seu conteúdo e a identificar as versões de idioma das suas páginas mais facilmente. Informe todos esses sitemaps no seu arquivo robots.txt ou envie-os diretamente pelo Google Search Console.

import { NextApiRequest, NextApiResponse } from 'next'
import sitemap from '@/path/to/your/modified/sitemap/function'

// Esta função converte as rotas para o formato XML do sitemap
function toSitemapXml(routes) {
  const xml = `
  <?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${routes
      .map(route => `
        <url>
          <loc>${route.url}</loc>
          <lastmod>${route.lastModified}</lastmod>
        </url>
      `)
      .join('')}
  </urlset>
  `;
  return xml;
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const {
    query: { lang },
  } = req

  try {
    const routes = await sitemap(lang as string);
    const sitemapXml = toSitemapXml(routes);
    res.setHeader('Content-Type', 'application/xml');
    res.write(sitemapXml);
    res.end();
  } catch (e) {
    console.error(e);
    res.status(500).send('Internal Server Error');
  }
}

Problem: Following shadcn's examples, the components are pure and with only one file, but I think that with time and the growth of the project, it ends up becoming a bit polluted to leave the component files in a single folder.

And I think that if we write tests for the components, it will end up being a bit polluted, so I propose that we separate them, especially if they are related components.

Example:

🤢 Before	🤩 After

In index.ts file, we can export all the components from sidebar, to make the import more clear if was possible

export * from './sidebar'

export * from './sidebar-navigation'
export * from './sidebar-navigation-item'

export * from './sidebar-search'
export * from './sidebar-search-group'
export * from './sidebar-search-movie'
export * from './sidebar-search-person'
export * from './sidebar-search-provider'
export * from './sidebar-search-tv-show'

If we don't that, the import was that:

import { Sidebar } from './components/sidebar/sidebar'

But exporting all the items in the index, we keep everything in the same "context" :

import { Sidebar, SidebarSearch, ... } from './components/sidebar'

The problem:

We could translate the badges depending on current language.
In this image we have the badges "Acting" and "movie" and it comes directly from tmdb API, we could add a mapper to translate this using the JSON files...

on the list page, based on the items, be able to generate new recommendations to add to the list, using IA!

Feature: Delete list with items

Currently, if I want to add an item to the list, I search for the item, go to it, and select add it to my list, but we can make this more simplified. We can create a way for the user to search for items directly on the list page and the items that appear can be added to the list.

Something like recommended musics in spotify playlist:

I think we can make a request to the image url and check if it works, if does not, we can show a centered svg icon depending of the context...

Like a component to Handle Images

<ImageWrapper src={imageUrl} type="movie" />

Then the component should handle the type and the image request, if image does not load it should return a svg to replace the image, in this case would return a icon related to the type like "🎥" (just a suggestion on how to handle)

We could replace all the images in the project with this. (optional)