devhatt / devhatt/octopost

Preview Post mode Instagram

Open
#556 6 comments 0 reactions 0 assignees View on GitHub
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, a foto 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 Instagram.

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(8)](https://github.com/devhatt/octopost/assets/134434652/ce0d3ee0-681d-407c-87a7-e1205ca55640)

Se atente a fazer o layout para cada Preview:
![Design sem nome(7)](https://github.com/devhatt/octopost/assets/134434652/2c7e6577-c083-4bc4-96c7-de5216f12398)

Contributor guide

Open the contributing guide

Research direction

No source files or tests are named in the issue. Start by locating the existing preview components and how the selected preview type controls dimensions, then compare the Instagram visual concepts with current media handling; done means an Instagram-style preview shows the post text, account nickname, and media while adapting to each selected preview mode.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, react, sass, typescript
Domain
design, frontend, web-dev
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.