brunocarvalhs/DiscordClone

Tabela de Conteúdo

Tabela de Conteúdo
Sobre o Projeto
- Tecnologias aplicadas
Interface da aplicação
Começando
- Pré-requisitos
- Estrutura de Arquivos
Licença
Contato

Sobre o Projeto

Como projeto com base no canal da Rocketseat, o DiscordClone é uma das aplicações desenvolvidas com base no conhecimento de Front-end ensinado por Guilherme Brazs da equipe da Rocketseat. Com base nessa aula e conhecimentos da tecnologia, foi implementado alguns detalhes para vincular o front-end ao serviço de stream e chat do Discord.

Tecnologias aplicadas

ReactJS - O React é a biblioteca mais popular do JavaScript e é usada para construir uma interface de usuário (IU). Ela oferece uma resposta excelente para o usuário adicionar comandos usando um novo método de renderizar sites. Os componentes dessa ferramenta foram desenvolvidos pelo Facebook.
Typescript - TypeScript é um superconjunto de JavaScript desenvolvido pela Microsoft que adiciona tipagem e alguns outros recursos a linguagem. Anders Hejlsberg, arquiteto da linguagem C# e criador das linguagens Delphi e Turbo Pascal, trabalhou no desenvolvimento do TypeScript. A linguagem pode ser usada para desenvolver aplicações JavaScript no lado cliente e lado servidor.
Styled-components - Styled components são componentes onde criamos o CSS no próprio arquivo do componente, o arquivo JS. Com isso conseguimos obter algumas vantagens em diversos quesitos, tais como: Carregamento automático do CSS crítico, isso é, os componentes são renderizados com a página e são injetados apenas o CSS que realmente será utilizado, nada mais!

Interface da aplicação

Aplicação Web

Começando

Pré-requisitos

NodeJS - versão 12.18 LTS;
Yarn - versão 1.22.0;

Executar Projeto

Entrando na raiz do projeto, primeiro passo é instalar a dependências do projeto, para isso execute o comando npm install ou yarn install, logo após o download execute o comando npm start ou yarn start, assim executará a dependência react-scripts que irá abrir o projeto na URL http://localhost:3000.

Docker

Entrando na raiz do projeto, primeiro passo é criar a imagem para gerar o container do projeto, para isso com o Docker instalado e ativo, execute o comando docker image build . -t brunocarvalhs/discordclone, após será gerado a imagem que estára em seu cache do docker, logo em seguida execute o comando:

[Linux]:docker container run -p 80:3000 -v $pwd:/www -it --name DiscordClone brunocarvalhs/discordclone
[Windows]:docker container run -p 80:3000 -v ${pwd}:/www -it --name DiscordClone brunocarvalhs/discordclone
[Mac]:docker container run -p 80:3000 -v $pwd:/www -it --name DiscordClone brunocarvalhs/discordclone assim executará a dependência react-scripts que irá abrir o projeto na URL http://localhost.

Estrutura de Arquivos

DiscordUIClone
├── docs/
│   ├── LogoDiscordClone.png
│   └── UI.png
├── public/
│   ├── favicon.png
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── assets/
│   │   ├── load.gif
│   │   └── logo-rocketseat.svg
│   ├── components/
│   │   ├── ChannelButton/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── ChannelData/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── Channelinfo/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── ChannelMessage/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── Layout/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── LoadDiscord/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── ModalDiscord/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── ServerBottom/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── ServerList/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── ServerName/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   ├── UserInfo/
│   │   │   ├── index.tsx
│   │   │   └── styles.tsx
│   │   └── UserList/
│   │       ├── index.tsx
│   │       └── styles.tsx
│   ├── styles/
│   │   └── GlobalStyles.ts
│   ├── App.tsx
│   ├── chat.json
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   └── users.json
├── .gitignore
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock

Licença

Distribuído sob a licença GNU GENERAL PUBLIC LICENSE. Veja LICENSE para mais informações.

Contato

Bruno Silva Carvalho - Github

brunocarvalhs / DiscordClone