Skip to content

Projeto Landing pages com Next, Storybook, Typescript, Styled Compoent, Husky e Jest.

License

Notifications You must be signed in to change notification settings

EvandroCalado/landing_pages_next

Repository files navigation

🖥️ Landing Page

-----------------------------------------------------

🧩 Introdução    |    🚀 Resultados   |    🧪 Dependências   |    💡 Possíveis Melhorias    |    🏆 Créditos       


🧩 Introdução


⭐ Olá!

Estou muito animado em compartilhar com você a nossa nova landing page criada com as tecnologias mais modernas do mercado! Como desenvolvedor, eu escolhi usar Next.js, Typescript, Styled Components, Storybook, Jest e Husky para criar uma página única e incrível para você.

Com o Next.js, consegui criar uma página rápida e dinâmica, com uma experiência de usuário mais fluida. Além disso, o Typescript nos permitiu escrever um código mais seguro e escalável, garantindo a integridade da página. Usando o Styled Components, pude criar um design moderno e personalizado, com um código mais fácil de gerenciar e modificar.

Eu também usei o Jest para testes automatizados, garantindo que a página seja entregue sem erros e bugs, e o Storybook para visualizar os componentes de forma isolada e garantir que cada parte da página funcione perfeitamente.

Para manter o nosso código organizado e limpo, utilizei o Husky para garantir que todos os nossos commits atendam aos padrões definidos e que o código seja sempre entregue com a melhor qualidade possível.

Espero que você goste da nossa landing page tanto quanto eu gostei de criá-la! Eu trabalhei duro para trazer a melhor experiência possível para você, então sinta-se à vontade para explorar e experimentar essas tecnologias incríveis.

Atenciosamente,

Evandro Calado - Desenvolvedor frotend.


🚀 Resultados


Front-end

📱 Mobile

⭐ Home ⭐ Section ⭐ Menu ⭐ Menu on Hover
Tela 1 Tela 2 Tela 3 Tela 4

-----------------------------------------------------

💻 Desktop

⭐ Home ⭐ Gallery ⭐ Contact
Desktop 1 Desktop 2 Desktop 3

🧪 Dependências


📖 Scripts

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "storybook": "start-storybook -p 6006 -s ./public",
    "build-storybook": "build-storybook",
    "deploy-static": "npm run build && npm run export",
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
    "lint": "eslint src --max-warnings=0",
    "lint-staged": "lint-staged",
    "prepare": "husky install"
  }

📖 Dependencies

  "dependencies": {
    "@styled-icons/material-outlined": "^10.47.0",
    "next": "13.2.4",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-router-dom": "^6.9.0",
    "styled-components": "^5.3.9"
  }

📖 devDependencies

      "devDependencies": {
    "@babel/core": "^7.21.3",
    "@storybook/addon-actions": "^6.5.16",
    "@storybook/addon-essentials": "^6.5.16",
    "@storybook/addon-interactions": "^6.5.16",
    "@storybook/addon-links": "^6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/react": "^6.5.16",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/node": "^18.15.3",
    "@types/react": "^18.0.28",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.55.0",
    "@typescript-eslint/parser": "^5.55.0",
    "babel-loader": "^8.3.0",
    "babel-plugin-styled-components": "^2.0.7",
    "eslint": "^8.36.0",
    "eslint-config-next": "^13.2.4",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.6.11",
    "husky": "^8.0.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "jest-styled-components": "^7.1.1",
    "lint-staged": "^13.2.0",
    "prettier": "^2.8.4",
    "ts-jest": "^29.0.5",
    "typescript": "^5.0.2"
  }

💡 Testes


🧷 Componentes


⭐ Jest
Coverage

🏆 Créditos



Evandro Calado
Hello 😃 Se você chegou até aqui, acredito que gostou do meu projeto, nesse caso temos algo em comum, sendo assim que tal conversamos um pouco? Meu chama no linkedin 😁