Trilha Impulse

Projeto   |    Tecnologias   |    Layout   |   

FeedGet

Projeto desenvolvido para coletar feedbacks de suas aplicações. O projeto coleta feedback do usuário sobre problemas, dão sugestões de ideias e outros. Projeto realizado na Next Level Week #8 @Rocketseat.

Funcionalidades

• Coleta de feedbacks
• Captura de tela automático
• Tipos de feedback (Problema, Ideia, Outro)
• App responsivo com acessibilidade

Milha Extra🔥

Desafios

GERAL:
    ✔ - Documentar bem o projeto
    ✖ - Completar os desafios

DESKTOP:
    ✔ - NO AR (Online / Vercel)
    ✖ - SEO:
        ✖ - Texto para <noscript />
        ✖ - Shortcut icon
        ✖ - Meta tags:
            ✖ - Facebook (og:~)
            ✖ - Twitter (twitter:~)
    ✖ - Melhorar o estilo:
        ✔ - Mobile First
        ✔ - Responsividade
        ✔ - Design
        ✖ - Trocar o tema da aplicação:
            ✖ - Light
            ✔ - Dark
            ✖ - Imagens adaptadas para o 'light e dark'
        ✖ - Animações (framer-motion)
        ✖ - Cores:
            ✖ - Seleção do mouse (:selection)
            ✖ - Adaptadas para daltônicos
    ✔ - Acessibilidade:
        ✔ - Navegação por TAB / SHIFT+TAB
        ✔ - Texto alternativo em imagens
        ✔ - Texto descritivo em title e area-label
    ✔ - Componentes:
        ✔ - Widget
            ✔ - WidgetForm
                ✔ - FeedbackTypeStep
                ✔ - FeedbackContentStep
                    ✔ - ScreenshotButton
                ✔ - FeedbackSuccessStep

MOBILE:
    ✖ - NO AR (Online / Apple Store && Google Play)
    ✖ - Melhorar o estilo:
        ✖ - Design
        ✖ - Trocar o tema da aplicação:
            ✔ - Light
            ✖ - Dark
            ✖ - Imagens adaptadas para o 'light e dark'
        ✖ - Animações (framer-motion)
        ✖ - Cores:
            ✖ - Adaptadas para daltônicos
    ✔ - Componentes:
        ✔ - Widget
            ✔ - Options
            ✔ - Form
                ✔ - ScreenshotButton
            ✔ - Success

NODE:
    ✖ - NO AR (Online / Heroku)
    ✔ - ORM (Prisma)
    ✔ - Testes (Jest)
    ✖ - Banco de dados:
        ✔ - SQLite *Banco atual*
        ✖ - Migrar banco de dados de 'SQLite' para 'PostgreSQL ou MongoDB'

Tecnologias 🚀

Esse projeto foi desenvolvido com as seguintes tecnologias:

WEB___

React | ^18.0.0
Typescript | ^4.6.3
Tailwindcss | ^3.0.24
Vite | ^2.9.5

NODE___

Node | 17.7.1
Prisma | ^3.13.0
Typescript | ^4.6.4
Jest | ^28.0.3
Nodemailer | ^6.7.5

MOBILE___

Expo | ~44.0.0
React Native | 0.64.3
Typescript | ~4.3.5
Axios | ^0.27.2

Layout 🚧

Desktop Screenshot

Mobile Screenshot

Rodando o projeto 🚴🏻‍♂️

"Só vou dar uma olhadinha...":

💬 Site hospedado na Vercel 📋

Na sua maquina:

Dependências

  ------- WEB -------
  "dependencies": {
    "@headlessui/react": "^1.6.0",
    "html2canvas": "^1.4.1",
    "phosphor-react": "^1.4.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "autoprefixer": "10.4.5",
    "postcss": "^8.4.13",
    "tailwind-scrollbar": "^1.3.1",
    "tailwindcss": "^3.0.24",
    "typescript": "^4.6.3",
    "vite": "^2.9.5"
  }

  ------- NODE -------
  "dependencies": {
    "@prisma/client": "^3.13.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.18.1",
    "nodemailer": "^6.7.5",
    "yarn-run-all": "^3.1.1"
  },
  "devDependencies": {
    "@swc/core": "^1.2.177",
    "@swc/jest": "^0.2.20",
    "@types/cors": "^2.8.12",
    "@types/express": "^4.17.13",
    "@types/jest": "^27.5.0",
    "@types/node": "^17.0.31",
    "@types/nodemailer": "^6.4.4",
    "jest": "^28.0.3",
    "prisma": "^3.13.0",
    "ts-node": "^10.7.0",
    "ts-node-dev": "^1.1.8",
    "typescript": "^4.6.4"
  }

  ------- MOBILE -------
  "dependencies": {
    "@expo-google-fonts/inter": "^0.2.2",
    "@gorhom/bottom-sheet": "^4",
    "axios": "^0.27.2",
    "expo": "~44.0.0",
    "expo-app-loading": "~1.3.0",
    "expo-file-system": "~13.1.4",
    "expo-font": "~10.0.4",
    "expo-status-bar": "~1.2.0",
    "phosphor-react-native": "1.1.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-dotenv": "^3.3.1",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-reanimated": "~2.3.1",
    "react-native-svg": "12.1.1",
    "react-native-view-shot": "3.1.2",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "typescript": "~4.3.5"
  }

Ex: $ npm install _____ ou $ yarn add _____ para instalar as dependências

Utilize a tag -D para instalar as dependências de desenvolvimento.
Utilize a tag @types para instalar o suporte a Typescript.
Utilize a tag @latest para instalar a versão mais recente.

# Clone o repositório
$ git clone https://gitlab.com/TS-open-source/feedback-widget.git

# Acesse a pasta do projeto no terminal
$ cd FeedGet

# Acesse a pasta do sub-projeto no terminal:
$ cd web                         # Projeto ReactJS
$ cd node                        # Projeto NodeJS
$ cd mobile                      # Projeto React Native

# Instale as dependências com o gerenciador de pacotes de sua preferência
$ npm install   /   yarn add     # Serve para ReactJS, NodeJS e React Native

# Execute o sub-projeto:
# ---------- PARA WEB ---------- #
$ npm run dev   /   yarn dev     # Para rodar o projeto Web (Frontend)

# --------- PARA NODE ---------- #
$ npm run dev   /   yarn dev     # Para rodar o projeto Node (Backend)

# -------- PARA MOBILE --------- #
$ npm run start   /   yarn start # Para o projeto Mobile (Frontend Mobile)

# O ReactJS roda na porta: 3000
# O NodeJS roda na porta: 3333
# O React Native roda na porta: 19000

# Acesse http://localhost:$PORT *Ex: Cuidado para não ligar dois ou mais projetos na mesma porta, pois o servidor pode não iniciar.

Hashtags #

Dias	Hashtags
Dia 1	#NextLevel
Dia 2	#NeverStopLearning
Dia 3	#NewSkills
Dia 4	#StepByStep
Dia 5	#~

Contato ✉️

Antonio Silva