plotwist-app / plotwist Goto Github PK

A log with recent changes

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

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...

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'

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

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:

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

feature: Import animes from anime list

https://playwright.dev/

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

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

TODO:

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

Feature: Delete list with items

The problem:

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

Examples: title, description, canonical, openGraph

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)

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:

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

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

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

Options:

• Public
• Network
• Private