🚀 Luna Project - FrontEnd

Bem-vindo ao Luna, um site onde você pode encontrar pessoas para jogar, descobrir novos jogos, jogos em alta no momento e notícias gerais sobre o mundo dos games. Esta versão é uma MVP (Minimum Viable Product) do que será o projeto futuramente. Desenvolvido por Team Luna - disponível no Figma Community.

📁 Estrutura do Projeto

A estrutura do projeto é organizada para facilitar a manutenção e o desenvolvimento, como exemplificado abaixo:

  src/
├── assets/                      # Arquivos estáticos (imagens, fontes, ícones)
│   ├── images/
│   │   ├── logo.png
│   │   ├── background-auth.jpg
│   │   └── game-covers/
│   ├── fonts/
│   │   ├── inter.ttf
│   │   └── roboto.ttf
│   └── icons/
│       ├── gamepad.svg
│       ├── user.svg
│       └── search.svg
│
├── app/                         # Rotas e páginas do Next.js (Page Router)
│   │
│   ├── _app.tsx                 # Componente principal da aplicação (Provider, Layout)
│   ├── _document.tsx            # Personalização do HTML (meta tags, fontes)
│   │
│   ├── login/                   # Página de Login
│   │   ├── index.tsx            # Componente principal da página
│   │   └── styles.module.css    # Estilos específicos da página
│   │
│   ├── signup/                  # Página de Cadastro
│   │   ├── index.tsx
│   │   └── styles.module.css
│   │
│   ├── news/                    # Página de Notícias
│   │   ├── index.tsx
│   │   ├── styles.module.css
│   │   └── [id]/                # Rota dinâmica para notícia específica
│   │       ├── index.tsx
│   │       └── styles.module.css
│   │
│   ├── discovery/               # Página de Descoberta de Jogos
│   │   ├── index.tsx
│   │   └── styles.module.css
│   │
│   ├── game-purpose/            # Página de Propósito do Jogo
│   │   ├── index.tsx
│   │   ├── styles.module.css
│   │   └── [gameId]/            # Rota dinâmica para jogo específico
│   │       ├── index.tsx
│   │       └── styles.module.css
│   │
│   ├── lfg-posts/               # Página de Posts (Looking For Game)
│   │   ├── index.tsx
│   │   └── styles.module.css
│   │
│   └── api/                     # API Routes (Next.js - opcional)
│       └── auth/
│           └── [...nextauth].ts # Configuração de autenticação (se usar NextAuth)
│
├── components/                  # Componentes reutilizáveis (globais)
│   │
│   ├── ui/                      # Componentes UI genéricos
│   │   ├── Button/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   ├── Input/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   ├── Card/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   ├── Modal/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   ├── Dropdown/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   ├── Skeleton/           # Skeletons para carregamento
│   │   │   ├── index.tsx       # Componente Skeleton genérico
│   │   │   ├── LoginSkeleton.tsx
│   │   │   ├── NewsSkeleton.tsx
│   │   │   ├── DiscoverySkeleton.tsx
│   │   │   ├── GamePurposeSkeleton.tsx
│   │   │   ├── LfgPostsSkeleton.tsx
│   │   │   ├── styles.module.css  # Estilos unificados dos skeletons
│   │   │   └── skeleton.css        # CSS global para skeletons
│   │   └── styles.module.css    # Estilos globais da UI
│   │
│   ├── layout/                 # Componentes de layout
│   │   ├── Header/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   ├── Footer/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   └── Sidebar/
│   │       ├── index.tsx
│   │       └── styles.module.css
│   │
│   ├── forms/                  # Formulários reutilizáveis
│   │   ├── LoginForm/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   ├── RegisterForm/
│   │   │   ├── index.tsx
│   │   │   └── styles.module.css
│   │   └── PostForm/
│   │       ├── index.tsx
│   │       └── styles.module.css
│   │
│   └── shared/                 # Componentes compartilhados entre páginas
│       ├── GameCard/
│       │   ├── index.tsx
│       │   └── styles.module.css
│       ├── PostCard/
│       │   ├── index.tsx
│       │   └── styles.module.css
│       └── CommentSection/
│           ├── index.tsx
│           └── styles.module.css
│
├── hooks/                       # Hooks personalizados
│   ├── useAuth.ts              # Gerenciamento de autenticação
│   ├── useFetch.ts             # Requisições HTTP
│   ├── useGameSearch.ts        # Busca de jogos
│   └── usePagination.ts        # Paginação
│
├── contexts/                   # Contextos React
│   ├── AuthContext.tsx         # Contexto de autenticação
│   └── ThemeContext.tsx        # Contexto de tema
│
├── styles/                     # Estilos globais
│   ├── globals.css             # Estilos CSS globais
│   ├── variables.css           # Variáveis CSS (cores, fontes, espaçamentos)
│   └── reset.css               # Reset de estilos
│
├── utils/                      # Funções auxiliares
│   ├── validators.ts           # Validadores de dados
│   ├── formatters.ts           # Formatação de dados (datas, números)
│   ├── api.ts                  # Configuração do cliente HTTP (Axios)
│   └── constants.ts            # Constantes globais
│
├── types/                      # Tipagens TypeScript
│   ├── user.types.ts
│   ├── game.types.ts
│   ├── post.types.ts
│   └── comment.types.ts
│
└── middleware.ts               # Middleware Next.js (autenticação de rotas)

🛠️ Ferramentas Utilizadas

Área	Tecnologia
Ferramenta	React 19
Linguagem	TypeScript
Framework	Next.js
Styling	SCSS
Design System	a decidir_
Client State	Zustand
Server State	TanStack Query
Formulários	a decidir
Validação	a decidir
Virtualização	TanStack Virtual
Testes unitários	a decidir
Componentes	a decidir
E2E	a decidir
Component development	a decidir
Package manager	pnpm
Imagens	Next Image + CDN
Tempo real	WebSocket/SSE
Performance	Web Vitals + React DevTools

🏗️ Instalação

Clone o repositório:

git clone https://github.com/LyanBrito/luna-project.git

Rodando o projeto:

<--Use LiveServer, ou outro servidor local-->
Abra http://localhost:3000
no seu navegador para ver a aplicação.

🌱 Contribuições

Fique à vontade para abrir uma issue ou enviar um pull request para melhorias ou correções. Suas contribuições são bem-vindas!

🔗 Links