Blog Ui & Front 👨‍💻🎨

Bem-vindo ao Blog Ui & Front! Este é um espaço dedicado a explorar o emocionante mundo do Ui Design 👨‍🎨 e Front-end Development 👨‍💻. Nosso blog é altamente otimizado, alcançando a nota máxima no Google PageSpeed 🚀.

Ver PageSpeed

🛠️ Tecnologias Utilizadas 🛠️

Front-end 👨‍💻

• Next.js 14.1.4: Utilizamos o Next.js em sua versão mais atualizada.
• Shadcn Ui: Lib de UI para criar interfaces elegantes e responsivas.
• Tailwind CSS: Um framework CSS altamente personalizável e fácil de usar.
• Radix UI: Componentes acessíveis e elegantes para React.
• App Router (Next.js 14.1.4): Novo paradigma para a construção de aplicativos usando os recursos mais recentes do React.

Ferramentas de Desenvolvimento 🧰

• Eslint: Ferramenta de linting para identificar e corrigir problemas no código JavaScript.
• Prettier: Um formatador de código para manter um estilo de código consistente.
• Husky e Lint-Staged: Hooks para executar scripts automaticamente em eventos do Git. Apenas para arquivos staged.

Testes e Qualidade de Código 🧪

• Jest: Um framework de teste de JavaScript com um foco na simplicidade.
• Testing Library: Um conjunto de utilitários para testar componentes React de forma fácil e intuitiva.
• Hooks para Testes: Hooks personalizados para facilitar o teste de componentes React.

Design Pattern e Componentes 🎨

• Composition: Modelo de composição de componentes que são projetados para serem altamente flexíveis e customizáveis.
• Atomic design: Metodologia que auxilia na categorização e padronização de elementos de interface, na criação de um Design System, Style Guides e documentações em geral.
• Storybook 8: Um workshop de front-end para a construção de componentes e páginas de UI isoladamente. Milhares de equipes o utilizam para desenvolvimento, testes e documentação de UI.
• Integração do Storybook com Figma: Visualize componentes do Storybook diretamente no Figma para um design mais colaborativo.

Automatização, Produtividade e Deploy 🚀

• Plop: Uma ferramenta para criar rapidamente novos arquivos por meio de modelos predefinidos. No caso, criação de novos componentes.
• Vercel: Integração Contínua com deploy automático a cada push no GitHub. Next.js deployment documentation

Otimização de Desempenho ⚡

• Data Fetching, Caching, and Revalidating: Otimização de desempenho com armazenamento em cache durante chamadas à API e serviços.

API Personalizada 🌐

• REST API Personalizada (WP Headless): API RESTful personalizada desenvolvida utilizando WordPress Headless para fornecer dados ao projeto.

Como Contribuir 🤝

1. Faça um fork do projeto
2. Crie sua branch de feature (git checkout -b feature/MinhaFeature)
3. Faça commit das suas mudanças (git commit -m 'Adicionando nova funcionalidade')
4. Faça push para a branch (git push origin feature/MinhaFeature)
5. Abra um Pull Request

Sinta-se à vontade para explorar, fazer melhorias e contribuir para tornar este projeto ainda mais incrível!

Getting Started | Como iniciar o projeto:

Primeiro, inicie o servidor de desenvolvimento:

npm install
npm run dev

Abra http://localhost:3000 no seu navegador para ver o resultado.

Você pode começar a editar a página modificando app/page.tsx. A página será atualizada automaticamente conforme você edita o arquivo.

Este projeto utiliza next/font para otimizar e carregar automaticamente a fonte Inter, uma fonte personalizada do Google.

Saiba Mais

Para aprender mais sobre o Next.js, confira os seguintes recursos:

• Documentação do Next.js - saiba mais sobre os recursos e a API do Next.js.
• Aprenda Next.js - um tutorial interativo do Next.js.

Você também pode conferir o repositório do Next.js no GitHub

Licença 📝

Este projeto está licenciado sob a Licença MIT.