This is my implementation of the challenge project "GitHub Blog" from the third ReactJS module of Ignite, an intermediate and advanced course in various programming languages and technologies offered by Rocketseat.
It implements the following functionalities, which will be demonstrated in photos and videos later on:
- User search: Search for users on GitHub to show its info, repositories and issues
- Show user's info: Show user's info like profile image, name, description, nick, company and followers quantity
- Repository selection: List the user's public repositories e allows selecting from which the issues will be listed
- Issues listing: Shows all issues of the selected repository
- Issues search: Filters issues based on subtexts present in the title or body of it
- Issue description: Shows the complete and formatted description of the issue, when it was posted and how many comments it has
- Issue's comments: List the comments posted in the issue
Paste the 1º command into a terminal opened within a folder of your preference to clone the project
git clone https://github.com/mar-alv/ignite-coffee-delivery.gitThen run one of the versions of the 2º command to install the dependencies
npm inpm installPaste the command into a terminal, the application will be accessable through this link
npm run devPaste the command into a terminal, they will be exectued one after the other mentioning if there were failed tests
npm run testsPaste the command into a terminal, the project's components documentation will be accessible through this link
npm run storybook│ __mocks__/
│ └── ... mocks used in stories and unit tests
│ .github/
│ └── ... images and gifs used in this documentation
│ .storybook/
│ └── ... files to keep Storybook working
│ .tests/
│ └── ... files to keep tests working
│ src/
│ ├── @types/
│ │ └── ... typing for styled components
│ ├── assets/
│ │ └── ... images used
│ ├── components/
│ │ ├── context x/
│ │ │ ├── component y/
│ │ │ │ ├── index.tsx
│ │ │ │ └── styles.ts
│ │ │ └── ...
│ │ └── ...
│ ├── context/
│ │ └── ... used context
│ ├── interfaces/
│ │ ├── context x/
│ │ │ └── ... used interfaces
│ │ └── ...
│ ├── libs/
│ │ └── ... abstractions of third party libs
│ ├── mappers/
│ │ └── ... used mappers
│ ├── pages/
│ │ ├── page x/
│ │ │ ├── component y/
│ │ │ │ ├── index.tsx
│ │ │ └── └── styles.ts
│ │ └── ...
│ ├── services/
│ │ └── ... used endpoints
│ ├── styles/
│ │ └── ... global styles and default theme
│ ├── utils/
│ │ └── ... util functions used
│ └── ...
│ stories/
│ ├── components/
│ │ ├── context x/
│ │ │ └── ... components stories
│ │ └── ... componentes stories
│ ├── ... generic stories(color, icons and typography)
│ └── ... stories-utils.tsx // util functions for stories
│ tests/
│ ├── context x/
│ │ └── ... unit tests
│ └── ... tests-utils.tsx // util functions for tests
Esta é a minha implementação do desafio "GitHub Blog" do terceiro módulo de ReactJS do Ignite, um curso intermediário e avançado de diversas linguagens de programação e tecnologias oferecido pela Rocketseat.
Nela, foram implementadas as seguintes funcionalidades, que serão demonstradas em fotos e vídeos mais adiante:
- Busca de usuário: Busca usuário no GitHub para ver seus dados, repositórios e issues
- Exibição de dados do usuário: Exibe informações como foto, nome, descrição, nick, empresa e quantidade de seguidores do usuário buscado
- Escolha de repositório: Lista repositórios públicos do usuário e permite escolher de qual as issues serão exibidas
- Listagem de issues: Exibe todas as issues atreladas ao repositório escolhido
- Busca de issues: Filtra as issues por trechos de texto presentes no título ou corpo dela
- Descrição da issue: Exibe a descrição completa e formatada da issue, quando foi postada e a quantidade de comentários
- Comentários da issue: Exibe comentários postados na issue
Cole o 1º comando em um terminal aberto dentro da pasta de sua preferência para clonar o projeto
git clone https://github.com/mar-alv/ignite-github-blog.gitEm seguida rode uma das versões do 2º comando para instalar as dependências
npm inpm installCole o comando em um terminal, a aplicação estará acessível através desse link
npm run devCole o comando em um terminal, eles serão executados um após o outro apontando se houve testes falhos
npm run testsCole o comando num terminal, a documentação dos componentes do projeto estará acessível através desse link
npm run storybook│ __mocks__/
│ └── ... mocks usados nos stories e testes unuitários
│ .github/
│ └── ... imagens e gifs usados nesta documentação
│ .storybook/
│ └── ... arquivos que mantém o funcionamento do Storybook
│ .tests/
│ └── ... arquivos que mantém o funcionamento dos testes
│ src/
│ ├── @types/
│ │ └── ... tipagem pro styled components
│ ├── assets/
│ │ └── ... imagens usadas
│ ├── components/
│ │ ├── contexto x/
│ │ │ ├── componente y/
│ │ │ │ ├── index.tsx
│ │ │ │ └── styles.ts
│ │ │ └── ...
│ │ └── ...
│ ├── context/
│ │ └── ... contexto usado
│ ├── interfaces/
│ │ ├── contexto x/
│ │ │ └── ... interfaces usadas
│ │ └── ...
│ ├── libs/
│ │ └── ... abstração de libs terceiras
│ ├── mappers/
│ │ └── ... mappers usados
│ ├── pages/
│ │ ├── página x/
│ │ │ ├── componente y/
│ │ │ │ ├── index.tsx
│ │ │ └── └── styles.ts
│ │ └── ...
│ ├── services/
│ │ └── ... endpoints usados
│ ├── styles/
│ │ └── ... estilos globais e default
│ ├── utils/
│ │ └── ... funções utilitárias usadas
│ └── ...
│ stories/
│ ├── components/
│ │ ├── contexto x/
│ │ │ └── ... stories dos componentes
│ │ └── ... stories dos componentes
│ ├── ... stories genéricos(cor, ícones e tipografia)
│ └── ... stories-utils.tsx // funções utilitárias pros stories
│ tests/
│ ├── context x/
│ │ └── ... testes unitários
│ └── ... tests-utils.tsx // funções utilitárias pros testes
For a longer video demonstration click here and like my post on LinkedIn
User search
Home page
Home page mobile
Issue page
Issue page mobile
Issues search
Generic stories
Common component stories
Search component stories
Licensed under MIT