Loja de espectro | Uma plataforma robusta de comércio eletrônico com tecnologia Next.js, TypeScript e Shadcn
Isso aproveita a API Fake Store, possui um painel de administração e autenticação JWT.
Projetado com foco em segurança, implementa melhores práticas para roteamento e ações de servidor.
Ver demonstração. Reportar bug. Solicitar recurso
Próximo js 14 Últimos recursos
Próximas ações do servidor js + Axios + Zod
Formulário de gancho React + Validação com zod para cliente e servidor
Autenticação JWT + Cookies + Camada de DADOS de Autorização + Middleware
Página de login com autenticação JWT + logout
Página inicial com layout de grade
Página do produto mostrando todos os produtos com filtro de categoria
Página de detalhes do produto com classificação , preço e botão adicionar carrinho
Gaveta do carrinho (adicionar ao carrinho, remover do carrinho)
Funcionalidade de pesquisa global
Alternador de tema (modo claro / escuro)
Carregando animações e esqueleto
Painel de administração com operações CRUD para produto, paginação e gráficos de pesquisa
Segurança em mente : Autenticação (JWT + Cookies) e Autorização Camada de DADOS + Middleware e ações de servidor com validação
SEO e desempenho otimizados : o projeto é otimizado para SEO e desempenho usando os recursos mais recentes do Next.js e as melhores práticas para meta tags e mapas do site Next/Image &&.
Design Responsivo
você pode usar qualquer usuário fakestoreapi para fazer login
para função de administrador use apenas os valores padrão
nome do usuário : mor_2314
senha : 83r5^_
Você pode abrir o painel do administrador e fazer CRUD em produtos seguindo estas etapas:
certifique-se de fazer login com conta de administrador ( mor_2314 )
clique no ícone do usuário
clique no painel
Primeiro, execute o servidor de desenvolvimento:
Clonar ou bifurcar o repositório
clone git https://github.com/issam-seghir/spectrum-store.gitcd ./your_project
Instalar dependências
instalação npm
renomeie o arquivo .env.example
para .env
Inicie o servidor
npm executar dev
Abra http://localhost:3000 com seu navegador para ver o resultado.
Você pode começar a editar a página modificando app/page.tsx
. A página é atualizada automaticamente conforme você edita o arquivo.
A maneira mais fácil de implantar seu aplicativo Next.js é usar a plataforma Vercel dos criadores do Next.js.
Confira nossa documentação de implantação do Next.js para mais detalhes.
As contribuições são o que tornam a comunidade de código aberto um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito apreciada .
Se você tiver uma sugestão que possa melhorar isso, bifurque o repositório e crie uma solicitação pull. Você também pode simplesmente abrir um problema com a tag “aprimoramento”. Não se esqueça de dar uma estrela ao projeto! Obrigado novamente!
Bifurque o projeto
Crie sua ramificação de recursos ( git checkout -b feature/AmazingFeature
)
Confirme suas alterações ( git commit -m 'Add some AmazingFeature'
)
Enviar para a filial ( git push origin feature/AmazingFeature
)
Abra uma solicitação pull
Distribuído sob a licença MIT. Consulte LICENSE.txt
para obter mais informações.