lucas-lm

Desafio técnico: Portal de Notícias

Visão geral

Seu objetivo é criar um portal de notícias responsivo utilizando o framework Next.js. O site deve consumir uma API pública de notícias e exibir os dados no frontend. Escolha uma API que ofereça uma chave de API gratuita ou utilize uma chave de API de teste.

Requisitos

1. Configurar um projeto Next.js (Next.js by Vercel - The React Framework).
2. Criar uma página inicial que exiba cards das notícias da API pública.
3. Os cards podem conter:

lucas-lm

Front-end websites

An list of awesome websites with front-end resources.

Categories

• Must-know
• Inspiration
• Colors
• Typography

lucas-lm

import React from 'react'
import Button from '@material-ui/core/Button'
import { useFormikContext } from 'formik'

const SubmitButton = props => {
  const { isSubmitting } = useFormikContext()
  const { type, ...rest } = props
  return <Button type='submit' disabled={isSubmitting} {...rest}/>
}

lucas-lm

import { useState, useEffect } from 'react'
// TODO: implement payload state, where data from the fakeEvent will be stored if it has any

const useFakeEvent = (handler=()=>{}) => {

  const [ fakeEventCount, setFakeEventCount ] = useState(0) // It 'fires' the fakeEvent and counts how many times the fakeEvent was fired
  useEffect(() => {
    if (fakeEventCount > 0) handler() // Conditional for ignoring component startup
  }, [fakeEventCount, handler])

lucas-lm

import React from 'react'
import useCanvas from '../hooks/useCanvas'

const Canvas = props => {
  const { draw, ...rest } = props
  const canvasRef = useCanvas(draw)

  return (
    <canvas ref={canvasRef} {...rest} />
  )

lucas-lm

import { useRef, useEffect } from 'react'

const useCanvas = (draw) => {

  const canvasRef = useRef(null)

  useEffect(() => {

    const canvas = canvasRef.current
    const context = canvas.getContext('2d')

lucas-lm

import React from 'react'
import { Formik, Form } from 'formik'

const FormComponent = props => {
  const { children, className, ...rest } = props
  return (
    <Formik
      {...rest}
    >
      <Form className={className}>

lucas-lm

import React from 'react'
import TextField from '@material-ui/core/TextField'
import { Field } from 'formik'

const TextFieldComponent = props => {
  const { name, ...rest } = props
  return (
    <Field name={name}>
      {({field, meta}) => <TextField 
        error={meta.touched && !!meta.error}

lucas-lm

import { useRef } from 'react'

function useAbortController() {

  const abortControllerRef = useRef({})

  if (arguments.length === 0) abortControllerRef.current = new AbortController()
  else {
    for (let arg of arguments) {
      abortControllerRef.current[arg] = new AbortController()

lucas-lm

import { useState } from 'react'

class Input {

  constructor(initialValue) {

    this._initialState = {
      value: initialValue,
      isEmpty: initialValue.length === 0
    }