Demonstração • Sobre • Roteiro • Status • Executar • Tecnologias • Autor • Licença
All projects developed as a student at Trybe
This repository contains all the projects developed as a student at Trybe.
The folders then divided into * modules *.
A module is formed by several * blocks *, which determine the studied content.
Each block has the respective * developed projects *
The Trybe program has over ** 1,500 hours ** of face-to-face and online classes and covers front-end, back-end, computer science, software engineering, agile methodologies and social skills.
See below the list of developed projects, segmented by modules.
Note that you can also click on the interactive link * more details * to view details of the module or requirement, such as * project requirements * or * final result image *
🔎 Module details
🔎 Project details
See the details of this project below:🛠 Technology
The following tools were used in the construction of the project:- HTML5
- CSS3
📝 Requirements
The following requirements were followed to complete the project:1. Add a specific background color to the page
2. Add a top bar with a title
3. Add a photo of yourself to the page
4. Add a list of lessons learned to the page
5. Create a list of lessons you still want to learn for the page
6. Add a footer to the page
7. Insert at least one external link on the page
8. Create an article about your learning
9. Create a section that tells a passage about your learning
10. Apply HTML elements according to the sense and purpose of each one
📷 Image
The following image is the final result of the project:
🖇 References
Here are the links to access the project's reference repository:- Branch
- Pull Request
🔎 Project details
See the details of this project below:🛠 Technology
The following tools were used in the construction of the project:- JavaScript
📝 Requirements
The following requirements were followed to complete the project:1 - Create a function using the operator
2 - Create a function that calculates the area of the triangle
3 - Create a function that divides the sentence
4 - Create a function that uses string concatenation
5 - Create a function that calculates the amount of points in football
6 - Create a function that calculates the repetition of the largest number
7 - Create a Mouse Hunt function
8 - Create a FizzBuzz function
9 - Create a function that encodes and decodes
10 - Create a Technology List function
🖇 References
Here are the links to access the project's reference repository:- Branch
- Pull Request
🔎 Project details
See the details of this project below:🛠 Technology
The following tools were used in the construction of the project:- HTML5
- CSS3
- JavaScript
📝 Requirements
The following requirements were followed to complete the project:1 - Add the title "Palette of Colors" to the page.
2 - Add a palette of four different colors to the page.
3 - Add the black color on the page, it should be the first in the color palette.
4 - Add a pixel frame, with 25 pixels, to the page.
5 - Make each element of the pixel frame 40 pixels wide, 40 pixels high and be bordered by a 1 pixel black border.
6 - Define black as the starting color. When loading the page the black color must already be selected to paint the pixels
7 - Select one of the colors in the palette, when clicking, the selected color is the one that will be used to fill the pixels in the frame.
8 - Clicking on a pixel inside the frame after selecting a color in the palette, causes the pixel to be filled with the selected color.
9 - Create a button that, when clicked, clears the frame by filling the color of all its pixels with white.
📷 Image
The following image is the final result of the project:🖇 References
Here are the links to access the project's reference repository:- Branch
- Pull Request
🔎 Project details
See the details of this project below:🛠 Technology
The following tools were used in the construction of the project:- HTML5
- CSS3
- JavaScript
📝 Requirements
The following requirements were followed to complete the project:1 - Add to your list or title "My Task List" in a tag
2 - directed below the title a small and discreet paragraph with id = "functioning" and with the text "Double-click on an item to mark it as complete"
3 - search for an input with the id = "task text" where the user can type the name of the item he wants to add to the list
4 - search for an ordered list of tasks with or id = "task list"
5 - link a button with id = "create-task" and, when clicking on this button, a new item must be created at the end of the list and the input text must be cleared
6 - Order the items in the task list for the creation order
7 - Clicking on an item in the list should change the background color of the item to rgb gray (128,128,128)
8 - It must not be possible to select more than one element from the list at the same time
9 - Double-clicking on an item causes it to be crossed out, indicating that it was complete. It should be possible to undo this action by double-clicking the item
10 - browse a button with id = "delete-all" which when clicked should delete all items from the list
11 - geographically a button with id = "remove-finished" that when clicked removes only the finished elements from your list
📷 Image
The following image is the final result of the project:🖇 References
* * Here are the links to access the project's reference repository:- Branch
- Pull Request
- Project - Facebook Signup
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- HTML5
- CSS3
📝 Requirements
The following requirements were followed to complete the project:
1. Create a blue bar at the top of the page
2. Position the Facebook logo in the left corner on the top bar
3. Add an authentication form in the right corner of the top bar
4. Create a class in CSS
5. Add a subcontainer to group the "Email or phone" label and field within the form created in step 3
6. Add a subcontainer to group the "Password" label and field within the form created in step 3
7. Add a subcontainer with the "Enter" button inside the form created in step 3
8. Create a container with the main-content class below the blue bar to group the main content of the page
9. Create a subcontainer to place the content on the left side
10. Create a subcontainer to place the content on the right
11. Create a text entry field for the user's name within the form created in requirement 10
12. Create a text entry field for the user's last name within the form created in requirement 10
13. Create a text entry field for the user's cell phone or email within the form created in requirement 10
14. Create an input field for the user's password within the form created in requirement 10
15. Create an entry field for the user's date of birth within the form created in requirement 10
16. Create an input field for the user's gender within the form created in requirement 10
17. Create a button to finalize the registration within the form created in requirement 10
18. Validate that all fields have been filled out by clicking the Register button
19. Add a new text field on the form if the user selects the Custom option in the Gender field
20. Replace the content of the container with the right-content class if the form is completely filled out and validated
📷 Image
The following image is the final result of the project:
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
- Project - JavaScript Unit Tests
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- JavaScript
📝 Requirements
1. The following requirements were followed to complete the project:
2. Implement function average
3. Implement the test cases for the numbers function
4. Implement the vqv function
5. Implement the test cases for the circle function
6. Implement the createStudent function
7. Implement the test cases for the productDetails function
8. Implement the objCalculator function
9. Implement the myCounter function
10. Implement the test cases and the createMenu function
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
- Project - Zoo Functions
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- JavaScript📝 Requirements
The following requirements were followed to complete the project:
1 - Implement the animalsByIds function
2 - Implement the animalsOlderThan function
3 - Implement the employeeByName function
4 - Implement the createEmployee function
5 - Implement the isManager function
6 - Implement the addEmployee function
7 - Implement the animalCount function
8 - Implement the entryCalculator function
9 - Implement the animalMap function
10 - Implement the schedule function
11 - Implement the oldestFromFirstSpecies function
12 - Implement the increasePrices function
13 - Implement the employeeCoverage function
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
- Project - Lessons Learned
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- HTML5 - CSS3 - JavaScript📝 Requirements
The following requirements were followed to complete the project:
1 - Create product listing
2 - Add the product to the shopping cart
3 - Remove the item from the shopping cart by clicking on it
4 - Load the shopping cart through LocalStorage when starting the page
5 - Add the total value of the shopping cart items asynchronously
6 - Create a button to clear shopping cart
7 - Add a "loading" text during an API request
📷 Image
The following image is the final result of the project:
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
- Project - Jest
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- JavaScript - Jest📝 Requirements
The following requirements were followed to complete the project:
1 - Create tests for an asynchronous function
2 - Create a "Mock" in the test / mockFunctions.spec.js file
3 - Create a Mock for the return of the API
4 - Create functions in the test / setupTeardown.spec.js file
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
🔎 Module details
- Project - Movie Cards Library
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- React.js📝 Requirements
The following requirements were followed to complete the project:
1 - Create a component
2 - Render a text in the
3 - Create a component
4 - Render components within
5 - Pass a key for each rendered
6 - Create a component
7 - Render the movie image inside an img tag
8 - Render the movie title within an h4 tag
9 - Render the subtitle of the movie inside an h5 tag
10 - Render the synopsis of the movie inside a p tag
11 - Create a component
12 - Render a movie's rating within Rating
13 - Render the component inside
14 - Pass the rating attribute as a prop for the component
15 - Create a component
16 - Render inside the component
17 - Add PropTypes to all components
📷 Image
The following image is the final result of the project:
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
- Project - Movie Cards Library Stateful
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- React.js📝 Requirements
The following requirements were followed to complete the project:
1 - Create a component called
2 - Render a form inside
3 - Render a text input inside the form in
4 - Render a checkbox type input inside the form in
5 - Render a select inside the form in
6 - Create a component called
7 - Render a form inside
8 - Render a text input inside the form in to get the title of the new movie
9 - Render a text input inside the form in to obtain the subtitle of the new film
10 - Render a text input inside the form in to get the image path of the new movie
11 - Render a textarea inside the form in to obtain the synopsis of the new film
12 - Render an input of type number inside the form in to obtain the evaluation of the new film
13 - Render a select form in to select the genre of the new movie
14 - Render a form button in to make use of the data from the new movie, contained in the state of
15 - Create a component called
16 - Configure the initial state of the component
17 - Render inside
18 - Render within
19 - Render inside
20 - Add proptypes to all components
📷 Image
The following image is the final result of the project:
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
🔎 Project details
See the details of this project below:🛠 Technology
The following tools were used in the construction of the project:- React.js - React Router
📝 Requirements
The following requirements were followed to complete the project:1 - Renderize BrowserRouter no componente App usando rotas
2 - Faça uma requisição para buscar e mostrar a lista de filmes quando MovieList for montado
3 - Insira um link para a página de detalhes de um filme dentro de MovieCard
4 - Faça uma requisição para buscar o filme que deverá ser renderizado dentro de Movie Details
5 - Realize uma requisição para buscar o filme que será editado em EditMovie
6 - Insira um link na página inicial para NewMovie para criar novos cartões
📷 Image
The following image is the final result of the project:🖇 References
Here are the links to access the project's reference repository:- Branch
- Pull Request
🔎 Project details
See the details of this project below:🛠 Technology
The following tools were used in the construction of the project:- React.js
📝 Requirements
The following requirements were followed to complete the project:1. Implemente o módulo de acesso à api do Mercado Livre
2. Crie uma página de listagem de produtos vazia
3. Crie a página do carrinho de compras
4. Liste as categorias de produtos disponíveis via API na página principal
5. Liste os produtos buscados por termos, com os dados resumidos, associados a esses termos
6. Selecione uma categoria e mostre somente os produtos daquela categoria
7. Redirecione para uma tela com a exibição detalhada ao clicar na exibição resumida de um produto
8. Adicione produtos a partir da tela de listagem de produtos
9. Adicione um produto ao carrinho a partir de sua tela de exibição detalhada
10. Visualize a lista de produtos adicionados ao carrinho em sua página e permita a manipulação da sua quantidade
11. Avalie e comente acerca de um produto em sua tela de exibição detalhada
12. Finalize a compra vendo um resumo dela, preenchendo os seus dados e escolhendo a forma de pagamento
📷 Image
The following image is the final result of the project:
🔎 Project details
See the details of this project below:- React.js - RTL
🛠 Technology
The following tools were used in the construction of the project:📝 Requirements
The following requirements were followed to complete the project:1. Teste o componente
2. Teste o componente
3. Teste o componente
4. Teste o componente
5. Teste o componente
6. Teste o componente
7. Teste o componente
📷 Image
The following image is the final result of the project:🖇 References
Here are the links to access the project's reference repository:- Branch
- Pull Request
🔎 Project details
See the details of this project below:🛠 Technology
The following tools were used in the construction of the project:- React.js - Redux
📝 Requirements
The following requirements were followed to complete the project:1. Crie uma página inicial de login com os seguintes campos e características:
2. Realize as seguintes verificações nos campos de email, senha e botão:
3. Utilize o Redux para salvar no estado global as informações da pessoa logada
4. Crie uma página para sua carteira com as seguintes características: Header (cabeçalho)
5. Crie um header para a página de carteira contendo as seguintes características: Formulário de adição de Despesa
6. Desenvolva um formulário para adicionar uma despesa contendo as seguintes características:
7. Implemente a lógica para preencher as opções do campo "Moedas", buscando as siglas das moedas da API:
8. Desenvolva a opção de "Adicionar despesa" na sua tabela de gastos Tabela de Gastos
9. Desenvolva uma tabela com os gastos contendo as seguintes características:
10. Crie um botão para deletar uma despesa da tabela contendo as seguintes características:
Bônus 11. Crie um botão para editar uma despesa da tabela contendo as seguintes características:
📷 Image
The following image is the final result of the project:🖇 References
Here are the links to access the project's reference repository:- Branch
- Pull Request
- Project - Trivia Game
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- React.js - Redux📝 Requirements
The following requirements were followed to complete the project:
1. Crie a tela de login, onde a pessoa que joga deve preencher as informações para iniciar um jogo
2. Crie o botão de iniciar o jogo
3. Crie um botão que leva a pessoa para tela de configuração
Tela de jogo
4. Crie um header que deve conter as informações da pessoa jogadora
5. Crie a página de jogo que deve conter as informações relacionadas à pergunta
6. Desenvolva o jogo onde só deve ser possível escolher uma resposta correta por pergunta
7. Desenvolva o estilo que, ao clicar em uma resposta, a correta deve ficar verde e as incorretas, vermelhas
8. Desenvolva um timer onde a pessoa que joga tem 30 segundos para responder
9. Crie o placar com as seguintes características:
10. Crie um botão de "próxima" que apareça após a resposta ser dada
11. Desenvolva o jogo de forma que a pessoa que joga deve responder 5 perguntas no total
Tela de feedback
12. Desenvolva o header de feedback que deve conter as informações da pessoa jogadora
13. Crie a mensagem de feedback para ser exibida a pessoa usuária
14. Exiba as informações relacionadas aos resultados obtidos para a pessoa usuária
15. Crie a opção para a pessoa jogadora poder jogar novamente
16. Crie a opção para a pessoa jogadora poder visualizar a tela de ranking
Tela de ranking
17. Crie a tela de ranking
18. Crie um botão para ir ao início
Extra não avaliativo: Tela de configurações
19. Ao mudar o valor do dropdown categoria, apenas perguntas da categoria selecionada devem aparecer para a pessoa que está jogando. Essa configuração será identificada pela chave category no retorno da API;
20. Ao mudar o valor do dropdown dificuldade, apenas perguntas da dificuldade selecionada devem aparecer para a pessoa que está jogando. Essa configuração será identificada pela chave difficulty no retorno da API;
21. Ao mudar o valor do dropdown tipo, apenas perguntas do tipo selecionado devem aparecer para a pessoa que está jogando. Essa configuração será identificada pela chave type no retorno da API.
📷 Image
The following image is the final result of the project:
- Project - StarWarts with Context API and Hooks
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- React.js - Contexct API - Hooks📝 Requirements
The following requirements were followed to complete the project:
1 - Faça uma requisição para o endpoint /planets da API de Star Wars e preencha uma tabela com os dados retornados, com exceção dos da coluna residents
2 - Filtre a tabela através de um texto, inserido num campo de texto, exibindo somente os planetas cujos nomes incluam o texto digitado
3 - Crie um filtro para valores numéricos
4 - Não utilize filtros repetidos
5 - Apague o filtro de valores numéricos e desfaça as filtragens dos dados da tabela ao clicar no ícone de X de um dos filtros
Requisitos bônus:
6 - Ordene as colunas de forma ascendente ou descendente
📷 Image
The following image is the final result of the project:
🖇 References
Here are the links to access the project's reference repository:
- Branch
- Pull Request
-
🔎 Project details
See the details of this project below:
🛠 Technology
The following tools were used in the construction of the project:
- React.js - Contexct API - Hooks📝 Requirements
The following requirements were followed to complete the project:
01 - Testes unitários
02 - Tela de Login
03 - Header
04 - Barra de busca
05 - Menu inferior
06 - Tela principal de receitas
07 - Tela de detalhes de uma receita
08 - Tela de receita em progresso
09 - Tela de receitas feitas
10 - Tela de receitas favoritas
11 - Tela de explorar
12 - Tela de explorar bebidas ou comidas
13 - Tela de explorar ingredientes
14 - Tela de explorar por local de origem/area
15 - Tela de perfil
📷 Image
The following image is the final result of the project: