Rodrigo Miranda

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

.editorconfig

@@ -5,7 +5,7 @@ charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 indent_style = space
-indent_size = 4
+indent_size = 2
 trim_trailing_whitespace = true
 
 [Makefile]

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+/*.js

.eslintrc.json

@@ -0,0 +1,32 @@
+
+
+{
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "node": true
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "extends": [
+    "prettier/prettier",
+    "plugin:react/recommended",
+    "standard",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "react/prop-types": "off",
+    "arrow-parens": [2, "as-needed"],
+    "no-useless-constructor": "off"
+  }
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+package-lock.json

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"tabWidth": 2,
+	"semi": true,
+	"singleQuote": true,
+	"arrowParens": "avoid"
+}

README.md

@@ -1,50 +1,111 @@
-# front-end-challenge
-
-> Desafio para os futuros front-end's do [@Personare](https://github.com/Personare)
-
-## Introdução
-
-A nossa Product Owner pensou em um produto fantástico para ser desenvolvido, e um dos desafios é criação de um jogo de Tarot.
-
-<br>
-
-**Então, essa é a sua missão!**
-
-Criar um jogo de Tarot, permitindo o sorteio de uma carta.
-
-E as especificações são:
-
-- Tela de apresentação exibindo todas as cartas com seu conteúdo visível, e com um botão para iniciar o jogo.
-- Ao clicar no botão, as cartas deverão ser viradas - escondendo o conteúdo - e embaralhadas.
-- Permitir que o usuário selecione apenas uma carta, clicando na mesma.
-- Apresentar a carta selecionada, o nome da carta e uma descrição. (a descrição pode ser um lorem ipsum)
-
-OBS: As imagens e nomes das cartas estão listadas no arquivo [`tarot.json`](tarot.json), esse arquivo deve ser consumido via _http request_. A propriedade `image` de cada carta deve ser concatenada com a propriedade `imagesUrl`, para obter o endereço final da imagem. Utilize o valor da propriedade `imageBackCard` para obter a imagem do fundo da carta.
-
-
-## Instruções
-
-1. Efetue o **fork** deste repositório e crie um branch com o seu nome. (ex: caue-alves).
-2. Após finalizar o desafio, crie um **Pull Request**.
-3. Aguarde algum contribuidor realizar o code review.
-
-
-## Pré-requisitos
-
-- Aplicação feita em React
-- Possuir testes
-- Gerar versão de produção
-- Criar micro commits ou commits por features
-	- Detalhar nos comentários dos commits as decisões tomadas.
-
-
-## Diferenciais
-
-- Boa documentação
-- Testes de componentes isolados
-
-## Dúvidas
-
-Se surgir alguma dúvida, consulte as [perguntas feitas anteriormente](https://github.com/Personare/front-end-challenge/labels/question).
-
-Caso não encontre a sua resposta, sinta-se à vontade para [abrir uma issue](https://github.com/Personare/front-end-challenge/issues/new) =]
+# Front-End-Challenge Personare
+
+## Application
+
+My version of [@Personare Front-End-Challenge](https://github.com/Personare/front-end-challenge). It's a simple Tarot game.
+
+[Link](https://front-end-challenge-personare.vercel.app) of application deployment at [Vercel](https://vercel.com)
+
+## Tecnologies
+
+- ✅ NextJS
+- ✅ ReactJS
+- ✅ Typescript
+- ✅ Styled-Components
+- ✅ Jest
+- ✅ React Testing Library
+- ✅ Eslint
+- ✅ Prettier
+
+## Directory Structure
+
+```shell
+├── src/
+│   ├── components/                 #Atomic design structure
+│   │   ├── atoms/
+│   │   │   ├── index.tsx
+│   │   │   ├── styles.ts
+│   │   │   ├── index.spec.tsx
+│   │   ├── molecules/
+│   │   ├── organisms/
+│   │   ├── templates/
+│   ├── data/                       #JSON data files
+│   │   ├── tarot.json
+│   ├── hooks/                      #Custom Hooks
+│   │   ├── useOnClickOutside.ts
+│   ├── pages/                      #NextJS page structure
+│   │   ├── api/
+│   │   │   ├── cards/
+│   │   │   │   ├── index.ts
+│   │   ├── _app.tsx
+│   │   ├── _document.tsx
+│   │   ├── index.tsx
+│   ├── styles/                     #Global styles configuration
+│   │   ├── global.ts
+│   │   ├── variables.ts
+│   ├── utils/                      #Util functions
+│   │   ├── shuffle.ts
+```
+
+## Setup
+
+```bash
+git clone https://github.com/rodrigo-miranda18/front-end-challenge-personare.git
+# or
+git clone [email protected]:rodrigo-miranda18/front-end-challenge-personare.git
+
+# Clone project
+```
+
+```bash
+cd front-end-challenge-personare && git checkout rodrigo-miranda
+
+# Go to project directory and switch branch
+```
+
+```bash
+npm install
+# or
+yarn
+
+# To download dependencies
+```
+
+```bash
+# Create a .env file in root of project and paste this environment variable
+
+BASE_URL=http://localhost:3000
+```
+
+```bash
+npm run build
+# or
+yarn build
+
+# To generate project build
+```
+
+```bash
+npm start
+# or
+yarn start
+
+# Now just access http://localhost:3000
+```
+
+```bash
+# To run tests:
+
+npm run test
+# or
+yarn test
+```
+
+## Related Links
+
+[Personare](https://www.personare.com.br) &nbsp;&nbsp;
+[Atomic Design](https://bradfrost.com/blog/post/atomic-web-design) &nbsp;&nbsp;
+[NextJS](https://nextjs.org) &nbsp;&nbsp;
+[Jest](https://jestjs.io) &nbsp;&nbsp;
+[React Testing Library](https://testing-library.com/docs/react-testing-library/intro) &nbsp;&nbsp;
+[Styled Components](https://styled-components.com)