https://github.com/th-fernandes/gofreela
Plataforma onde clientes podem visualizar os freelancers que se inscreveram em sua vaga.
https://github.com/th-fernandes/gofreela
phosphor-react tailwindcss typescript vite
Last synced: 25 days ago
JSON representation
Plataforma onde clientes podem visualizar os freelancers que se inscreveram em sua vaga.
- Host: GitHub
- URL: https://github.com/th-fernandes/gofreela
- Owner: Th-Fernandes
- Created: 2023-04-12T12:33:33.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-12T20:49:35.000Z (about 3 years ago)
- Last Synced: 2025-04-14T03:47:20.085Z (about 1 year ago)
- Topics: phosphor-react, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://gofreela.vercel.app
- Size: 265 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
GOFREELA
Esse projeto foi construido no intuito de solucionar o desafio para a
oportunidade FullStack Colab
Uma breve descrição de mim
Olá! sou Thiago Fernandes, desenvolvedor web com foco no front-end e possuo habilidades em
ferramentas como: react, next.js, styled-components, express e por aí vai... Gosto de jogos
de pc e sou um apaixonado por desenho (mesmo não tendo muita habilidades com isso). E agora,
apresentarei o passo a passo de como eu cheguei no resultado final dessa aplicação:
Prototipação
antes de escrever o código, decidi ter em mente qual layout eu deveria aplicar nesse projeto. Decici dar um propósito para a aplicação. Nesse cenário, estou desenvolvendo uma página onde clientes podem analisar freelancers que se inscreveram em seus serviços. A aplicação deve seguir alguns principios básicos como: ser de fácil implementação e responsivo. Para isso, decidi utilizar alguns conhecimentos de ui design e fiz um rascunho para ter uma ideia do que queria fazer.
Wireframe
Tendo a ideia em mente, agora o próximo passo é criar um wireframe no figma. Para me auxiliar nessa etapa, tirei algumas inspirações do dribbble, uma plataforma com diversos projetos de ui. Aqui está o link da interface no figma
Essa etapa do projeto também me auxiliou a escolher quais dados seriam utilizados para serem exibidos na interface e quais seriam descartados, pois há alguns dados sensiveis como senha que não cabe ser exibido devido ao contexto da aplicação.
Planejamento de código
Quando vou planejar um projeto, gosto de ser o mais simples possível, utilizando o mínimo de soluções merabolantes. Pois dessa forma, o projeto fica menos amarrado a bibliotecas e ferramentas e fica mais simples de ler e dar manutenção. Tendo isso em mente, optei pelas seguintes ferramentas:
- vite → por ser um projeto menor, escolhi esse framework com menos funcionalidades embutidas
- tailwind css → para uma estilização mais ágil e pelas opções mais fáceis de criar transições e animações
- typescript → para garantirmos que os dados que são recebidos pela api estão de acordo com o esperado e para ganhar produtividade com o autocomplete.
- phosphor icons → para acrescentar icones na aplicação
Mão na massa
Agora que todas as ferramentas estão devidamente instaladas, hora de criar os componentes para a aplicação. A principio, eu vou criar os componentes de forma estática, atentando-se primeiro para a responsividade. E então, eu criarei os hooks para capturar os dados da api e posteriormente adaptar os componentes para receberem conteúdo dinâmico.
Integrando a API
Feita toda a estilização e responsividade da página, agora é hora de dar vida a aplicação com dados da api. Para isso, bolei o seguinte esquema:
