Renata - Web Developer Challenge

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "ignorePatterns": ["dist", ".eslintrc.json"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-refresh"],
+  "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      {
+        "allowConstantExport": true
+      }
+    ],
+    "indent": ["error", 2],
+    "quotes": ["error", "single"],
+    "no-unused-vars": "warn",
+    "camelcase": "error",
+    "eqeqeq": "error",
+    "no-console": "warn",
+    "max-len": [
+      "error",
+      {
+        "code": 150
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+coverage/

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxSingleQuote": false
+}

README.md

@@ -1,30 +1,101 @@
-# web-developer-challenge
+# Projeto: WEB DEVELOPER CHALLENGE
 
-Olá!
+👋 Bem-vinda(o) ao meu projeto!
 
-Este desafio consiste em identificar seu conhecimento em desenvolvimento Web, portanto esperamos que você tente resolve-lo usando toda a sua capacidade e conhecimento da tecnologia.
+\_Projeto desenvolvido para o Desafio Técnico da Buildbox
 
-O Desafio é o seguinte:
+➡️ Acesse à aplicação por este link: [Projeto Web Developer Challenge](https://web-developer-challenge-ij1d.vercel.app/)
 
-Monte uma página utilizando React.js que contenha uma lista de posts com a possíbilidade de adicionar e remover. Cada post deve conter nome, mensagem e foto. Não é necessário fazer o Back-End, os dados podem estar apenas em tempo de execução no Front-End.
+### ➤ Contexto
 
-**Projetos que encontramos Typescript, Styled Compoments, Responsividade, terão pontos adicionais!**
+Este projeto consiste em uma aplicação front-end que exibe postagens através de um feed,
+permitindo o usuário criar seu próprio post e também visualizar os já existentes.
 
-Tente colocar ao máximo todos os recursos técnicos que você conhece, padrão de arquitetura, boas práticas de código, bibliotecas, etc.
+---
 
-Você deve fazer um Fork deste repositório e solicitar um Pull Request com seu nome, email e celular na descrição para nossa avaliação e contato.
+### ➤ Instalação
 
-Abaixo segue o link do XD com protótipo navegável para conhecer a dinâmica da interface e os dados para Logar no Zeplin para ter acesso ao Design com suas medidas.
+Pré-requisitos:
 
+- Ter instalado em sua máquina o Node e o Yarn
 
-## Interface XD
-https://adobe.ly/2BVcy5C
+No terminal da sua máquina digite a seguinte sequência de comandos:
 
-## Design - Zeplin
-https://app.zeplin.io/login
+     git clone [email protected]:renatapnunes/web-developer-challenge.git
+     cd web-developer-challenge
+     yarn install
+     yarn dev
 
-E-mail - [email protected]
+Após isso, você pode clicar no link que aparece no terminal, ou acessar diretamente no seu browser:
+`http://localhost:5173/`
 
-Senha - JhZ5dAPG
+---
 
-![footer](https://cdn-images-1.medium.com/max/2600/1*_DOHv30w-0eI-Ysz5U47Yg.png)
+### ➤ Aplicação
+
+![Aplicação](https://github.com/renatapnunes/web-developer-challenge/blob/main/public/aplicacao.gif)
+
+Na página principal da aplicação, que pode ser acessada pela rota "/" encontra-se um formulário, que permite que o usuário crie seus próprios posts.
+
+Nele é possível fazer o upload de um arquivo .png, .jpeg ou .jpg, que servirá como imagem de perfil quando a postagem for publicada. Caso não tenha gostado, é possível excluir a imagem e selecionar uma nova, quantas vezes quiser.
+Neste formulário o usuário também deve preencher seu nome e a mensagem que deseja postar, respeitando o limite de oitocentos caracteres. Só possível realizar a publicação com estas informações preenchidas, pois antes disso, o botão "Publicar" fica desabilitado.
+Existe também o botão "Descatar", que ao ser clicado, excluir a imagem selecionada e limpa os inputs de texto.
+Após realizar a publicação, o post aparece imediatamente no feed, exibido logo abaixo do formulário.
+
+![image](https://github.com/renatapnunes/web-developer-challenge/assets/82226758/8e05fa7e-42d6-4b5a-b282-d0c8bb260cd8)
+
+O feed exibe as postagens em formato de lista, começando sempre pelo mais recente. Cada post fica em uma espécie de card, exibindo a imagem do usuário, o texto e seu nome, indicando quem enviou aquele post.
+A postagem conta também, com um botão que permite excluí-la.
+
+Inicialmente o feed exibe no máximo três postagens, e caso ainda existam outras, um botão "Ver mais" é exibido, permitindo o usuário clicar e carregar mais posts. Isso pode ser feito até que todas as postagens tenham sido visualizadas.
+
+![image](https://github.com/renatapnunes/web-developer-challenge/assets/82226758/512fea23-1e54-4372-9b2e-021f86a8b3b0)
+
+Também foi criada uma página, que é exibida sempre que o usuário tentar acessar uma rota inexistente. Nela é exibido um link que redireciona para a página principal do site.
+
+Toda à aplicação é responsiva.
+
+![image](https://github.com/renatapnunes/web-developer-challenge/assets/82226758/2aabd2ee-6846-4e3a-9481-0f4da3144134)
+
+---
+
+### ➤ Tech stacks e dependências
+
+- Linguagem: **TypeScript**
+- Biblioteca: **React.js**
+- Gerenciador de estados: **Redux Toolkit**
+- Estilização: **Styled Components**
+
+Além disso:
+
+- **vite.js**: build tool para desenvolvimento front-end;
+- **react router dom**: gerenciamento de rotas;
+- **esLint**: detecção de problemas e padronização de estilo;
+- **prettier**: formatação do código;
+- **material-ui/icons**: biblioteca de ícones;
+
+---
+
+### ➤ Testes
+
+- **Jest**
+- **React Testing Library**
+
+Comando para rodar os testes:
+
+    yarn test
+
+Comando para visualizar a cobertura dos testes:
+
+    yarn coverage
+
+![image](https://github.com/renatapnunes/web-developer-challenge/assets/82226758/44053470-ce4a-416f-9649-24a378d74312)
+
+---
+
+### ➤ Meus contatos
+
+👉 [Linkedin](https://www.linkedin.com/in/renata-p-nunes/)
+
+Estou aberta a feedbacks sobre este projeto.
+Vou ficar muito feliz em aprender algo novo! 😄

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub"

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

babel.config.json

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": { "esmodules": true } }],
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap">
+    <title>Web Developer Challenge</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

jest.config.ts

@@ -0,0 +1,16 @@
+module.exports = {
+  testEnvironment: 'jest-environment-jsdom',
+  roots: ["<rootDir>/src/"],
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+  moduleNameMapper: {
+    "^.+\\.module\\.(css|sass|scss|less)$": "identity-obj-proxy",
+    "^.+\\.(css|sass|scss|less)$": "<rootDir>/__mocks__/styleMock.js",
+    "^.+\\.(jpg|jpeg|png|gif|webp|avif|svg|ttf|woff|woff2)$": `<rootDir>/__mocks__/fileMock.js`,
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageReporters: ['json', 'lcov', 'text', 'clover'],
+  verbose: true,
+  testTimeout: 30000,
+}

jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom"

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "web-developer-challenge",
+  "private": true,
+  "version": "0.0.0",
+  "type": "commonjs",
+  "scripts": {
+    "dev": "vite",
+    "test": "jest",
+    "coverage": "jest --coverage",
+    "build": "tsc -b && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/material": "^5.16.0",
+    "@reduxjs/toolkit": "^2.2.6",
+    "@testing-library/jest-dom": "^6.4.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
+    "react-router": "^6.24.1",
+    "react-router-dom": "^6.24.1",
+    "styled-components": "^6.1.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/dom": "^10.3.1",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "@types/testing-library__user-event": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "history": "^5.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "3.3.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1"
+  }
+}

src/App.tsx

@@ -0,0 +1,13 @@
+import Header from './components/Header'
+import Routes from './routes'
+
+const App = () => {
+  return (
+    <>
+      <Header />
+      <Routes />
+    </>
+  )
+}
+
+export default App