Este projeto procura aplicar boas práticas de acessibilidade web

Overview

GitHub GitHub repo size GitHub Repo stars

Acessibilidade


📸 Screenshots do Projeto

Imagem do projeto

Imagem do projeto

📝 Sobre o Projeto

Este projeto procura aplicar boas práticas de acessibilidade web.

Para visualizar o projeto ‘online’ clique aqui.



🌐 Tecnologias Usadas

Next.js

🔥 TypeScript

💅 Styled-Components

🚩 Lints — ESlint/Prettier/EditorConfig/Commitlint

Jest e React Testing Library

📝 Storybook

📱 PWA

Plugins para Acessibilidade:

  • @storybook/addon-a11y
  • eslint-plugin-jsx-a11y️


Features

  • Projeto responsivo;

  • Acessível para navegação sem mouse e para leitores de tela;

  • Scroll infinito nos cards de comentários de redes sociais;

  • Componente de comentários que aceita dados de API;

  • Componente de banner para destaque de cards e imagens;

  • Transição entre páginas;

  • Load para aguardar carregamento via API;

  • Carrossel responsivo com animações e bullet indicativo de posição;

  • PWA instalável;


🚩 Pré-Requisitos

  • node

  • yarn



Como instalar e executar o projeto

Clonar Repositório:

git clone https://github.com/everton-dgn/accessibility.git

Instalar Dependências:

yarn

Inciar Ambiente de Desenvolvimento:

yarn dev

Disponível em http://localhost:3000

Gerar Build de Produção:

yarn build

Inciar Ambiente de Produção:

yarn start

Disponível em http://localhost:3000

Executar Testes:

yarn test

Executar Testes em Modo Watch:

yarn test:w

Inciar Storybook em Modo de Desenvolvimento:

yarn sb

Disponível em http://localhost:6006

Gerar Build de Produção do Storybook:

yarn build-sb

Executar lints:

yarn lint
yarn next:lint


📕 Autor

Feito por Éverton Toffanetto.

🔗 LinkedIn: https://www.linkedin.com/in/everton-toffanetto/

You might also like...

Projeto de Final de Módulo da Resilia, curso de Web Dev Full Stack, utilizando como base Node.js e Javascript.

🚚 API Transportadora Projeto de encerramento do módulo 4 da Resilia Educação. O objetivo é desenvolver uma API Rest de uma transportadora. 📮 Pré-req

Mar 26, 2022

Primeiro projeto do Módulo 1 da Blue ed Tech - Web Fullstack

Primeiro projeto do Módulo 1 da Blue ed Tech - Web Fullstack

Projeto1-Modulo1-BlueFullstack Módulo 1 - Blue ed Tech - Web Fullstack Projeto 1 - A Jornada do Herói A premissa é a seguinte: O nosso herói chegou ao

Mar 9, 2022

Desenvolvimento do projeto Proffy para Web e mobile, na segunda Next Level Week

Desenvolvimento do projeto Proffy para Web e mobile, na segunda Next Level Week

Tecnologias | Projeto | Layout | Licença 🚀 Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: Node.js React React Native Expo 💻

Jun 12, 2022

O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenchidas pelo usuário usando um formulário.

O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenchidas pelo usuário usando um formulário.

Web-Chat Introdução O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenc

Oct 5, 2022

Projeto Clocker, para agendamento de horários, desenvolvido durante a Semana Full Stack cem custo!

Projeto Clocker, para agendamento de horários, desenvolvido durante a Semana Full Stack cem custo!

Bem vindo à Semana Full Stack Sem Custo, da Codar.me! Entre os dias 5 e 9 de abril, vamos desenvolver uma aplicação completa: front, back e banco de d

Dec 11, 2022

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar 🔎 Sobre o projeto Voltar ao topo O ob

Aug 3, 2021

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máximo de criatividade possível😜

Steck Cars Demonstração : Sobre Projeto realizado como meio de aprendizado do Front-End e do Bootstrap. Tentei testar algumas animações e expor o máxi

Jan 10, 2022

Projeto final do módulo 5 da @resilia-br realizado em ReactJs.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Oct 17, 2022

Educare é um projeto que visa auxiliar os estudos dos alunos por meio da resolução de questões. Front-end construído com Next.js.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Feb 6, 2022
Owner
Éverton Toffanetto
Programar pra mim não é só trabalho, é diversão, lazer, hobby, entretenimento e acima de tudo, uma forma de unir pessoas em prol de um ideal.
Éverton Toffanetto
Exemplo de como deve ser implementação de nirvana do teste de contrato com Pact seguindo todas as práticas descritas em https://docs.pact.io/pact_nirvana

Exemplo de 'Nirvana' do teste de contrato Esse repositório exemplifica as melhores implementações de teste de contrato, atingindo o nirvana e tendo co

Paulo Gonçalves 66 Nov 28, 2022
Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pelo cmd.

fast-developer-express Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pel

Rodrino Adolfo Kupessala 1 Dec 21, 2021
Este projeto é um boilerplate completo, constantemente atualizado, configurado nos mínimos detalhes para servir de base para projetos profissionais do mais alto nível.

Boilerplate Completo e atualizado com Next.js, Typescript Styled-Components, Testes, Redux Toolkit e PWA ?? Sobre o Projeto Este projeto é um boilerpl

Éverton Toffanetto 14 Aug 21, 2022
Este repositorio é para o primeiro projeto da quarta semana do WCC

Primeiro_projeto_node Instruções para a criação e execução: Crie uma pasta para armazenar os arquivos do projeto Abra a pasta criada no VSCode Após ab

null 3 Sep 8, 2022
Este repositório contem o desafio do curso da rocketseat Ignite Conceitos do Nodejs

Projeto API TODO Nessa aplicação foi feita uma API, que é uma gerador de tarefas TODOS, onde o usúario pode cadastrar um name e um username, e a aplic

Macmiller Duarte de Andrade 1 May 12, 2022
Este repositorio contendrá el proyecto final de Angular con temática de Pokemon Unite

ProyectoFinal This project was generated with Angular CLI version 14.0.2. Development server Run ng serve for a dev server. Navigate to http://localho

null 2 Jun 19, 2022
Este es un bonito curso/taller donde haremos un clon de Trello

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Leonidas Esteban 4 Oct 28, 2022
Projeto Final - Web FullStack do curso Resilia

Amassa API As dependências utilizadas no projeto foram: ?? Iniciando o projeto Recomendamos que faça o download do Insomnia na sua maquina! download i

Matheus Germano 3 May 6, 2022
Projeto de conclusão de módulo - Bootcamp Resilia Web FullStack

projeto_Modulo5_Imobiliaria_Frontend_ReactJS Projeto Final do módulo 5, Resilia Web Full Stack. ?? Descrição O objetivo deste projeto é aprender a est

Emanuel Melo 4 Jan 21, 2022