Frontend Mentor - Kanban task management web app solution

This is a solution to the Kanban task management web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, read, update, and delete boards and tasks
• Receive form validations when trying to create/edit boards and tasks
• Mark subtasks as complete and move tasks between columns
• Hide/show the board sidebar
• Toggle the theme between light/dark modes
• Bonus: Allow users to drag and drop tasks to change their status and re-order them in a column
• Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)
• Bonus: Build this project as a full-stack application

Screenshot

Preview

Result Mobile

Result Desktop Tablet

Result Desktop

Links

• Solution URL: Repository GitHub
• Live Site URL: Result Live

My process

Built with

• Semantic HTML5 markup
• CSS(Flexbox, Grid)
• Bem - Bem Metodolody CSS Architecture
• Normalize - Normalize CSS
• Mobile-first workflow
• Responsive Web Design(RWD)
• WebAcessibility with arias attributers, and roles
• Typescript
• NPM
• Vite - Vite Tooling Front-End
• React - JS library
  • Hooks React, and Custom Hooks
  • Context API with reducers
  • Immer - JS package
  • Classnames - JS utility
  • Nano ID - ID generator for JavaScript.
• HTML Drag and Drop API - HTML Drag and Drop API
• LocalStorage Web API Browser - LocalStorage Web API Browser

Author

• Website - Portfolio Web Samuel
• Frontend Mentor - @samuel-amaro

Como usar o Tooling Front-End vite com react é typescript

Criar projeto vite

npm create vite@latest

depois so seguir as instruções e escolher as opções de template fornecidas, de acordo com a necessidade do projeto.

Instalar depêndencias

O vite não instala as dependencias somente as especifica, para instalar todas depencias e instalar a pasta node-modules para executar o projeto

npm install

Executando o projeto no modo Dev

Apos instalar dependencias iniciais podemos iniciar nosso projeto e começar a trabalhar, iniciamos executando o servidor de desenvolvimento, rodar o projeto no modo de desenvolvimento

npm run dev

Build para production

fazendo o build para produção

npm run build

ESLint é Prettier

Instalar ESLint para checagem de tipos e encontrar problemas no codigo

instalar e configurar, apos executar o comando, so seguir as intruções, e escolher as opções que encaixam de acordo com as ferramentas que serão necessarias para seu projeto.

npm init @eslint/config

Plugins ESLint

eslint-plugin-jsx-a11y

Verificador AST estático para regras de acessibilidade em elementos JSX.

npm install eslint-plugin-jsx-a11y --save-dev

Uso

Você também pode habilitar todas as regras recomendadas ou estritas de uma só vez. Adicionar plugin:jsx-a11y/recommended ou plugin:jsx-a11y/strict em extends:

{
  "extends": ["plugin:jsx-a11y/recommended"]
}

Prettier

instale o Prettier localmente

npm install --save-dev --save-exact prettier

Em seguida, crie um arquivo de configuração vazio para permitir que os editores e outras ferramentas saibam que você está usando o Prettier:

echo {}> .prettierrc.json

Desativa todas as regras desnecessárias ou que possam entrar em conflito com o Prettier.

npm install --save-dev eslint-config-prettier

Em seguida, adicione "prettier" à matriz "extends" em seu .eslintrc.* arquivo. Certifique-se de colocá-lo por último, para que tenha a chance de substituir outras configurações.

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

Deploy e Build Para GitHub Pages

Deploy e build para produção no GitHub Pages.

Envie seu código para o repositório GitHub

Execute os seguintes comandos no seu Terminal

  $ git init

$ git add .

$ git commit -m "first commit"

$ git branch -M main

$ git remote add origin http://github.com/username/repo-name.git

$ git push -u origin main

Agora, você poderá ver seu código em seu repositório.

Deployment (Static)

1. Vá para o seu vite.config.js arquivo. E adicione seu URL base a ele.

export default defineConfig({
  plugins: [react()],
  base: "/repo-name/" //Aqui e o url base do website
})

2. Instalar package GitHub pages

npm install gh-pages --save-dev

3. adicionar à package.json

"homepage": "https://<username>.github.io/<repo>/",
...
"scripts": {
...
  "build": "vite build",
  "predeploy": "npm run build", //add esse script
  "deploy": "gh-pages -d dist", //add esse script
  ...

4. Opcional - Se for uma aplicação SPA - Single Page Apps for GitHub Pages usando react-router-dom

• Copie o 404.html arquivo para o seu repositório como está.

  • Observe que, se você estiver configurando um site do Project Pages e não estiver usando um domínio personalizado (ou seja, o endereço do seu site é username.github.io/repo-name), será necessário definir pathSegmentsToKeep como 1 no 404.html arquivo para manter /repo-name o caminho após o redirecionamento. Se você estiver usando o React Router, precisará dizer a ele para usar o repo-name como o basename, por exemplo

    <BrowserRouter basename="/repo-name" />

• Copie o script de redirecionamento do index.html arquivo e adicione-o ao seu index.html arquivo - Observe que o script de redirecionamento deve ser colocado antes do script do aplicativo de página única em seu index.html arquivo.

5. Por fim execute o comando

npm run deploy