devhatt / devhatt/octopost

Preview Post mode Tiktok

Open
#555 2 comments 0 reactions 0 assignees View on GitHub
MVP
Dominant language
TypeScript
Stars
75
Forks
45
PR merge metrics
No merged PRs in 30d

Description

## Describe the feature

Nossa aplicação tem os previews que é o meio da pessoa ver como o post dela vai estar em certa rede social, nessa tarefa deverá ser feito o preview da rede social Instagram.

## Implementation Details

O componente deve ser exatamente igual a um post da rede social Instagram deverá conter o texto do post e o nick da conta.

Atenção: O componente deverá se comportar exatamente igual ao tipo de Preview selecionado, por exemplo, se selecionar o Preview de celular, o Preview deve estar do mesmo jeito de como tiver em um celular, como as mesmas medidas, formatações de texto e encaixe do layout. O componente deverá ser adaptativo, pois ele tem que estar com as medidas exatamente iguais ao Preview selecionado.

Deve se atentar que os arquivos de mídia, devem ir para o preview também, e ficar igualzinho ao post mode do TikTok.

A cor padrão do Preview deve ser a Branca, como mostra no visual concepts

## Visual Concepts

Você deverar fazer essa parte, porem igual ao do Instagram.
![image](https://github.com/devhatt/octopost/assets/134434652/2ada8a01-6c84-4e72-848f-dae7c2e57f38)

Assim:
![Design sem nome(12)](https://github.com/devhatt/octopost/assets/134434652/94fdbe89-4ddc-44bc-b4ab-79a16afebbe5)

Se atente a fazer o layout para cada Preview:
![Design sem nome(11)](https://github.com/devhatt/octopost/assets/134434652/b144ba57-9043-4454-8ee6-d23580e74085)

Contributor guide

Open the contributing guide

Research direction

Start by locating the existing TikTok post preview and the entry point that selects preview types, then compare its responsive sizing, text, account nickname, media handling, and white styling with the supplied Instagram visual concepts. Done means an Instagram preview matches each selected device layout and displays the post text, account nickname, and media correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.