Giter Club home page Giter Club logo

game-slot's Introduction

Hey, I'm Lucas :)

I'm Lucas de Medeiros, a Computer Science bachelor by Universidade Federal de Campina Grande (UFCG) and Software Engineer at VTEX. I'm absolutely in love with Web Development (frontend and backend), football ⚽ , movies 🎦 and games 🎮!

Currently, my main development stack is .Net Framework and .Net Core with C#, but I'm also familiar with NodeJS and ReactJS with Typescript, Python and Java!

Email: lucasmedeiros@gmail.com Linkedin: lucasmnf Dev.to: lukehxh Youtube

game-slot's People

Contributors

dependabot[bot] avatar douglaslimaxx avatar jadsonluan avatar lucasmedeiros avatar raylamedeiros avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

game-slot's Issues

Integration

Fully integrate app with api:

  • Search steam games
  • Game details page
  • Login
  • User profile
  • Review Game
  • Add game do lists

Adicionar opção de criar lista no select de adicionar um jogo em uma lista

Deve ser adicionado um botão ao lado de criar lista, no modal de criação de lista.

Comportamento desejado

Ao clicar no botão, o usuário deve ser redirecionado para a tela de criar lista (a que tem o input) e quando finalizar a criação, redirecionar de volta para a página do jogo em que estava (pesquisar utilização do returnTo da biblioteca react-router)

Link para o design aqui

Create ....4... 5? subcomponents here.

game-slot/src/pages/Login/index.tsx

Lines 40 to 107 in 3815a45

return !isLoggedIn ? (
<section className="w-full h-full flex items-center justify-center">
<form
className="bg-white w-50 mt-10 ml-10 px-8 pt-6 pb-8 mb-4"
style={{ minWidth: '300px' }}
onSubmit={onLogin}
>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="email"
>
E-mail
</label>
<input
className={`shadow appearance-none border ${
emailError ? 'border-red-600' : ''
} rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline`}
id="email"
type="text"
autoComplete="none"
placeholder="Email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
{emailError && (
<p className="text-red-500 text-xs italic mt-2">{emailError}</p>
)}
</div>
<div className="mb-6">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="password"
>
Password
</label>
<input
className={`shadow appearance-none border ${
passError ? 'border-red-600' : ''
} rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline`}
id="password"
type="password"
placeholder="Password"
value={password}
onChange={e => setPassword(e.target.value)}
/>
{passError && (
<p className="text-red-500 text-xs italic">{passError}</p>
)}
</div>
{error && <p className="text-red-500 mb-4 text-xs italic">{error}</p>}
<div className="flex items-center justify-between">
<button
onClick={onLogin}
className={`bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${
loggingIn ? 'opacity-50 cursor-not-allowed' : 'hover:bg-blue-700'
}`}
type="submit"
>
Sign In
</button>
<Link
className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
to="/"
>
Create account
</Link>
</div>

It is Ok to create components with almost no logic if this improve the overall legibility of this component.

Also, try not to work that hard on the login page while there is still work needed on the game page.

Break in 3 subcomponents to improve readability and manutenability.

game-slot/src/pages/GamePage/index.tsx

Lines 40 to 93 in 3815a45

) : !error ? (
<>
<div className="w-50 flex flex-col items-center">
<h1 className="text-white text-center font-black text-5xl">
{details?.game.name}
</h1>
<p className="text-white w-80 pb-5 text-center">
{details?.description}
</p>
<div className="flex text-white justify-center items-center py-4">
<p>
<FontAwesomeIcon icon="thumbs-up" size="xs" />
</p>
<p className="px-3 font-black">20</p>
<p className="pr-3 font-black">•</p>
<p>
<FontAwesomeIcon icon="thumbs-down" size="1x" />
</p>
<p className="px-3 font-black">2</p>
</div>
<div className="flex p-4 justify-center items-center">
<Button
className="text-white bg-blue-600 hover:bg-blue-700 py-4 px-3 rounded"
onClick={show}
>
Write a review
</Button>
<Button
className="text-white bg-red-600 hover:bg-red-700 py-4 px-3 ml-2 rounded"
onClick={openOnSteam}
>
View on Steam
</Button>
</div>
</div>
{details?.movies?.length ? (
<div className="w-50 flex items-center justify-center">
<video className="w-80" controls>
<source src={details?.movies ? details.movies[0] : ''} />
Your browser does not support the video tag.
</video>
</div>
) : null}
</>
) : (
<div
className="flex items-center flex-col justify-center w-full text-gray-400 text-6xl"
style={{ minHeight: '92vh' }}
>
<p className="mt-5">{error}</p>
<Link to="/" className="text-blue-500 text-4xl">
Back home
</Link>
</div>

Improve your README.md

Please describe in your readme:

  • Technologies utilized
  • APIs that you are using
  • how to execute your application

[BACK] Reescrever criação de listas

Pré-requisitos

Descrição

Atualizar criação de listas por usuário a partir de informações de usuário obtidas pelo Auth0. Criar modelo que representará a relação entre um usuário e suas listas.

[FRONT] Implementar busca por usuários

Pré-requisitos

Descrição

Integrar busca por usuários feita no back com o front. Usuário deve pesquisar na barra principal de pesquisa e o resultado deve mostrar jogos que batem com a pesquisa em uma seção e os usuários encontrados em outra.

A tela de resultados também deve ter botões de "pesquisa apenas por jogos" e "pesquisa apenas por usuários" (ver exemplo nas referências)

Referências

image

No nosso caso, ao invés de ter todos listados lado a lado, teriam duas seções, uma com jogos e outra com os usuários.

Links Úteis

Implement Login

Current API provides Login and JWT authentication.

  • Add Redux to the project, and use it with Hooks.
  • Implement useLogin hook.
  • Create login page.
  • Adds validation to logged user only routes and specific features on routes that doesn't require login.

Listagem de reviews de usuário

Na página de perfil de usuário, quando clica no botão de ver mais reviews, vai pra uma página que ainda não está implementada. Adicionar uma página similar a timeline com as reviews de um usuário específico

Responsividade

Foco em tornar as páginas de Perfil de Usuário e Timeline responsivas

  • Melhorar tela de usuário quando ele em mais 3 ou mais reviews/listas

[FRONT] Criar página de perfil do usuário (dados mockados)

Pré-requisitos

Descrição

Criar uma página /user/{id_user} que deve conter as informações de um usuário:

  • Até 5 listas que o usuário já criou (antiga home page).
  • Na seção de listas, deve ter botão Ver mais que redireciona para /user/{id_user}/lists.
  • Até 5 reviews que o usuário já criou.
  • Na seção de reviews, deve ter botão Ver mais que redireciona para /user/{id_user}/reviews.
  • Seção com indicadores de quantos usuários estão seguindo e quantos usuários ele segue.
  • Botão de seguir usuário (que não faz nada no momento).

OBS: Enquanto o Auth0 e autenticação na API não estiverem configurados, pode-se utilizar dados mockados próximos dos reais para ter uma visualização de como vai ficar.

Referências

image

image

image

[BACK] Pegar dados de jogos indicados ao TGA

Descrição

Pegar dados de algum site, ou criar manualmente um CSV contendo informações de jogos indicados ao The Game Awards. Dados interessantes de se obter são:

  • Nome do jogo
  • Categoria em que concorreu
  • Imagem banner do jogo

A ideia é que esse CSV seja atualizado a cada ano, quando os indicados aos prêmios forem divulgados.

[BACK] Implementar busca por usuários

Descrição

Mudar como é feito a busca. Deve ser possível pesquisar por parte do nickname. O parâmetro da busca deve estar contido no nickname e não igual.

Atualmente:

GET /users?nickname='Lucas'
Retorna user com nickname exatamente igual ao parâmetro 'Lucas'

Desejado

GET /users?nickname='Lucas'
Retorna users que contenham o parâmetro 'Lucas' no nickname

[TESTING] Lighthouse

Descrição

Rodar Lighthouse na versão de produção atual das páginas do Game Slot para sabermos score e identificar eventuais problemas de performance.

[FRONT] Adicionar likes em reviews

Pré-requisitos

Descrição

Mudar modelo de avaliação, possibilitando adição de like em uma review. Também deve ser mostrada a quantidade de likes que uma review tem.

Referência

image

Cache requests to API

Implement a way to cache requests made to API for reducing the number of Steam API calls, because it limits to only 200 calls per 5 minutes.

This feature will also be useful for speed and UX.

Expansão de jogos disponíveis

Muito bom o projeto, já parece estar pronto, gostei de verdade da ideia e também da maneira como foi implementado. Uma sugestão que indico, caso não tenha sido ainda considerada, seria expandir o projeto de modo que a lista de jogos disponíveis para revisão dos usuários não sejam apenas os contidos na Steam, talvez até mesmo possibilitando usuários cadastrarem jogos os quais eles gostem de jogar. No mais, está excelente.

Uso de um contexto

Teu projeto ta bem bacana e aparentemente não tem muita coisa pra fazer. Eu dei uma olhada nos arquivos e não encontrei uso de contexto para propagação de estados dentro do teu sistema. É importante ter essa parte, pois ela é uma das entregas esperadas.

[FRONT + API] Integração de página de perfil de usuário com backend

Pré-requisitos

Auth0 configurado e login já funcionando no frontend e autenticação também configurada no backend.

Descrição

Realizar integração da API com a página de perfil de usuário, substituindo os dados mockados por dados reais. Se o usuário logado estiver acessando sua própria página, deve ter um botão de "editar" nas seções que redirecionam para a página de edição de listas / reviews.

Links úteis

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.