https://github.com/jlcambraia/web_project_around_auth

O site "Around the U.S." é uma plataforma interativa criada com React para compartilhar fotos de diferentes regiões dos EUA. Para acessar a plataforma, é necessário se registrar e fazer login, garantindo uma experiência mais personalizada e segura. A interface é intuitiva e responsiva, proporcionando uma navegação fluida em qualquer dispositivo.
https://github.com/jlcambraia/web_project_around_auth

css3 react react-hooks react-router

Last synced: 2 months ago
JSON representation

O site "Around the U.S." é uma plataforma interativa criada com React para compartilhar fotos de diferentes regiões dos EUA. Para acessar a plataforma, é necessário se registrar e fazer login, garantindo uma experiência mais personalizada e segura. A interface é intuitiva e responsiva, proporcionando uma navegação fluida em qualquer dispositivo.

• Host: GitHub
• URL: https://github.com/jlcambraia/web_project_around_auth
• Owner: jlcambraia
• Created: 2025-04-07T19:58:11.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-18T13:25:48.000Z (about 1 year ago)
• Last Synced: 2025-04-19T02:28:02.743Z (about 1 year ago)
• Topics: css3, react, react-hooks, react-router
• Language: JavaScript
• Homepage: https://jlcambraia.github.io/web_project_around_auth/
• Size: 512 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Tripleten web_project_around_auth

## Nome do Projeto:

Around the U.S.

## Link para o GitHub Pages:

O site está disponível no GitHub Pages: [Clique aqui para acessar](https://jlcambraia.github.io/web_project_around_auth/)

## Descrição do Projeto:

O website "Around the U.S." é uma plataforma interativa que visa explorar e celebrar as diversas culturas, paisagens e histórias dos Estados Unidos. O projeto proporciona aos visitantes uma experiência imersiva, permitindo que compartilhem suas experiências, fotos e histórias relacionadas a diferentes regiões do país. O site apresenta uma interface amigável que incentiva a interação e a colaboração entre os usuários, transformando cada visita em uma jornada de descoberta cultural.

## Tecnologias e Técnicas utilizadas:

1. **React e JSX:** Criação de interfaces dinâmicas e intuitivas com componentes reutilizáveis.

2. **React Router:** Implementação de rotas protegidas e redirecionamento de usuários não autorizados.

3. **Autenticação de Usuário:** Registro, login e controle de acesso com armazenamento de token via `localStorage`.

4. **Componentes Personalizados:** Criação dos componentes `Login`, `Register`, `ProtectedRoute` e `InfoTooltip` para melhorar a usabilidade e segurança.

5. **Integração com API:** Comunicação com servidor para autenticação e manipulação de dados em tempo real.

6. **Gerenciamento de Estado com Hooks:** Uso de `useState` e `useEffect` para reatividade e controle de fluxo da aplicação.

7. **CSS Modularizado:** Estilos encapsulados para evitar conflitos entre classes.

8. **Responsividade:** Layout adaptado para diferentes dispositivos, incluindo versão mobile.

9. **SEO:** Boas práticas de otimização para motores de busca.

## Planos de Melhoria:

1. **Melhoria na Identidade Visual**

   - Adicionar elementos gráficos que representem visualmente as culturas e regiões dos EUA, como ícones temáticos, bandeiras estaduais, e mapas interativos.

   - Incluir tipografia personalizada e aprimorar o layout para fortalecer a identidade da marca.

2. **Facilitar o Compartilhamento em Redes Sociais**

   - Integrar botões de compartilhamento direto para redes sociais como Facebook, X (Twitter), Instagram e WhatsApp.

   - Gerar links únicos e imagens de pré-visualização ao compartilhar histórias ou postagens.

   - Adicionar um recurso de "Copiar link" para facilitar o envio manual.

3. **Adicionar Suporte a Múltiplos Idiomas**

   - Implementar internacionalização com suporte inicial para português e inglês.

   - Adicionar um seletor de idioma acessível no cabeçalho.

   - Armazenar a preferência de idioma do usuário no localStorage.

4. **Performance e Otimização**

   - Otimizar carregamento de imagens e uso de lazy loading.

   - Minificar arquivos CSS/JS e reduzir requisições HTTP.

   - Aplicar cache local para conteúdos estáticos e uso de CDN quando possível.