<h1 align="center"> <br> <img src="./.github/logo-full.svg" width="300" heigh="150" alt="Logo letmeask"> </h1> <h4 align="center"> Trilha ReactJS <img src="./.github/logo-icon-react.svg" height="15" alt="Logo icon react"> </h4> <!-- <h4 align="center">Projeto web construído durante o Next Level Week #06-Together com a Rocketseat/DiegoFernandes.</h4> --> <p align="center"> <img alt="Plataforma" src="https://img.shields.io/static/v1?label=Plataforma&message=Mobile/PC&color=ff59f8&labelColor=835afd"> <a aria-label="Completado" href="https://nextlevelweek.com/episodios/react/aula-5/edicao/6"> <img alt="Letmeask" src="https://img.shields.io/badge/Letmeask-NLW 6.0-ff59f8?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAALVBMVEVHcExxWsF0XMJzXMJxWcFsUsD///9jRrzY0u6Xh9Gsn9n39fyMecy0qd2bjNJWBT0WAAAABHRSTlMA2Do606wF2QAAAGlJREFUGJVdj1cWwCAIBLEsRU3uf9xobDH8+GZwUYi8i6ucJwrxKE+7D0G9Q4vlYqtmCSjndr4CgCgzlyFgfKfKCVO0LrPKjmiqMxGXkJwNnXskqWG+1oSM+BSwD8f29YLNjvx/OQrn+g99oQSoNmt3PgAAAABJRU5ErkJggg==&labelColor=835afd"></img> </a> <img alt="Tamanho do repositório" src="https://img.shields.io/github/repo-size/NyctibiusVII/Letmeask?color=ff59f8&labelColor=835afd"> <a href="https://github.com/NyctibiusVII/Letmeask/blob/main/LICENSE"> <img alt="Licença" src="https://img.shields.io/static/v1?label=License&message=MIT&color=ff59f8&labelColor=835afd"> </a> <a href="https://picpay.me/Matheus_nyctibius_vii"> <img alt="Donate" src="https://img.shields.io/static/v1?label=$&message=Donate&color=05eb6c&labelColor=282a36"> </a> </p> <p align="center"> <a href="#Letmeask-">Projeto</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#tecnologias-">Tecnologias</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#layout-">Layout</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; <a href="#licença-%EF%B8%8F">Licença</a> </p> <!-- <p align="center"> <a href="README.md">Inglês</a> · <a href="README-pt.md">Português</a> </p> -->

Letmeask <img src=".github/logo-letmeask.svg" width="42" alt="logo icon">

Projeto desenvolvido para gerenciar perguntas, fazer perguntas em real-time com funcionalidade de votação. Projeto realizado na Next Level Week #6 (together) @Rocketseat.

Funcionalidades

• Gerenciar perguntas
• Real-time
• Login com Google e Github
• Modal Cookies consent
• Firebase
• Tema 'Light' e 'Dark'
• Site responsivo

<details> <summary>Desafios</summary>

✔ - Documentar bem o projeto
✔ - Melhorar o estilo: Responsividade e Design
✔ - Bloquear funcionalidades se não estiver logado
✔ - Banco de dados
✖ - Next PWA

Funcionalidades:
    ✔ - Trocar o tema da aplicação: Light e Dark
    ✔ - Banco de dados externo (Firebase)
    ✔ - Firebase:
        ✔ - Login com Google
        ✔ - Login com Github
    ✔ - Toast:
        ✔ - Sucesso
        ✔ - Error
        ✔ - Info
    ✔ - Modal:
        ✔ - Close room
        ✔ - Delete question
    - Telas:
        ✔ - Home('/')
        ✖ - Settings('/settings')
        ✔ - CreateRoom('/room/new')
        ✔ - RoomsQA:
            ✖ - PublicRooms('/rooms')
            ✔ - User('/rooms/[id]')
            ✖ - AdminConfigs('/admin')
            ✔ - Admin('/admin/rooms/[id]')
        ✔ - 404

</details>

Tecnologias 🚀

Esse projeto foi desenvolvido com as seguintes tecnologias:

• Html | 5
• Sass | 6
• Typescript | ^4.3.4
• ReactJS | ^17.0.2
• NextJS | ^11.0.0
• NodeJS | ^14.16.1

Layout 🚧

Desktop Screenshot

<div style="display: flex; flex-direction: 'column'; align-items: 'center';"> <!-- Responsive, 1366 x 768, 50% (Laptop L - 1366px) Dark --> <!--<img width="400px" src="./.github/desktop/home.png">--> <img width="400px" src="./.github/desktop/home-enter-this-room.png"> <!--<img width="400px" src="./.github/desktop/createRoom.png">--> <img width="400px" src="./.github/desktop/admin-roomQA-with-questions.png"> <img width="400px" src="./.github/desktop/admin-roomQA-without-questions.png"> <!--<img width="400px" src="./.github/desktop/user-roomQA-with-questions.png">--> <!--<img width="400px" src="./.github/desktop/user-roomQA-without-questions.png">--> <img width="400px" src="./.github/desktop/modal-close-room.png"> <!--<img width="400px" src="./.github/desktop/modal-delete-question.png">--> <!--<img width="400px" src="./.github/desktop/settings.png">--> <!--<img width="400px" src="./not-found-404.png">--> </div> <a href="./.github/README-IMGS.md">Ver mais</a>

Mobile Screenshot

<div style="display: flex; flex-direction: 'row';"> <!-- Responsive, 320 x 720, 75% (Mobile L - 320px) Light --> <img width="180px" src="./.github/mobile/home.png"> <!--<img width="180px" src="./.github/mobile/home-enter-this-room.png">--> <img width="180px" src="./.github/mobile/createRoom.png"> <!--<img width="180px" src="./.github/mobile/admin-roomQA-with-questions.png">--> <img width="180px" src="./.github/mobile/admin-roomQA-without-questions.png"> <img width="180px" src="./.github/mobile/user-roomQA-with-questions.png"> <!--<img width="180px" src="./.github/mobile/user-roomQA-without-questions.png">--> <!--<img width="180px" src="./.github/mobile/modal-close-room.png">--> <img width="180px" src="./.github/mobile/modal-delete-question.png"> <!--<img width="180px" src="./.github/mobile/settings.png">--> <img width="180px" src="./.github/mobile/not-found-404.png"> </div> <a href="./.github/README-IMGS.md">Ver mais</a> <!-- IMGS ------------------------------------------ home home-enter-this-room ------------------------------------------ createRoom ------------------------------------------ admin-roomQA-with-questions admin-roomQA-without-questions user-roomQA-with-questions user-roomQA-without-questions ------------------------------------------ modal-close-room modal-delete-question ------------------------------------------ settings not-found-404 ------------------------------------------ -->

Rodando o projeto 🚴🏻‍♂️

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

<a href="https://letmeask-nyctibiusvii.vercel.app/">🙋🏻‍♀️ Site hospedado na Vercel 💬</a>

Na sua maquina:

<details> <summary>Dependências</summary>

  "dependencies": {
    "firebase": "^8.6.8",
    "next": "11.0.0",
    "next-themes": "0.0.14",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "sass": "^1.35.1"
  },
  "devDependencies": {
    "@types/react": "17.0.11",
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.0",
    "next-sitemap": "^1.6.121",
    "typescript": "4.3.4"
  }

Ex: $ npm install _____ 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.

</details>

# Clone o repositório
$ git clone https://github.com/NyctibiusVII/Letmeask.git

# Acesse a pasta do projeto no prompt de comando
$ cd Letmeask

# Instale as dependências
$ npm install

# Execute o script "dev"
$ npm run dev

# O projeto inciará na porta: 3000 - acesse http://localhost:3000

Contribuição 💭

Para construir essa aplicação tive a ajuda do professor Diego Fernandes da Rocketseat que disponibilizou video aulas do projeto Letmeask e tive uma ajuda desta grande comunidade que a Rocketseat construiu no Discord. Feito com ♥ by Rocketseat :wave: Participe da nossa comunidade!

Hashtags #

| Dias | Hashtags | |-------|-----------------------| | Dia 1 | #Together | | Dia 2 | #Unidade | | Dia 3 | #EmBuscaDeEvolução | | Dia 4 | #Legacy | | Dia 5 | #JuntosNoPróximoNivel |

Licença ⚖️

Este projeto está sob a licença do MIT. Veja o arquivo LICENSE para mais detalhes.

Contato ✉️

| <img src="https://user-images.githubusercontent.com/52816125/90341686-05b68880-dfd8-11ea-969c-70c9ce9d0278.jpg" width=100><br>_{<a href="https://www.instagram.com/nyctibius_vii/?hl=pt-br">@MatheusVidigal🦊</a>} | | :---: |

<p align="left"> <a href="https://www.linkedin.com/in/matheus-vidigal-nyctibiusvii/"> <img alt="Matheus Vidigal / Linkedin" src="https://img.shields.io/badge/-Matheus Vidigal-835afd?style=flat&logo=Linkedin&logoColor=fff" /> </a> <a href="https://mail.google.com/mail/u/1/#inbox?compose=GTvVlcSGLCKpKJfwPsKKqzXBplKkGtCLvCQcFWdWxCxQFfkHzzjVkgzrMFPBgKBmWFHvrjrCsMqSH"> <img alt="Matheus Vidigal / Linkedin" src="https://img.shields.io/badge/-Matheus Vidigal-ff59f8?style=flat&logo=Gmail&logoColor=fff" /> </a> </p>