Technologies | Project | License
O projeto Zion Store é uma aplicação web de e-commerce desenvolvida com Next.js, Typescript e TailwindCSS. O projeto foi desenvolvido com o intuito de aprimorar os conhecimentos nas tecnologias utilizadas, bem como aprofundar os estudos em desenvolvimento web. A escolha por Next.js se deu pensando em performance e SEO. Next.js é um framework baseado em React, desenvolvido pela Vercel que traz funcionalidades como SSR, otimização de imagens e SEO dinâmico. Unido ao poder do Next.js, Typescript, um superset Javascript, permite a escrita de um código limpo e mais seguro. A escolha de TailwindCSS, framework desenvolvido pensando em Utility-first, foi para priorizar a entrega rápida e também para facilitar a criação da aplicação no modo responsivo.
main
projeto finalizado.
O protótipo do projeto foi feito baseado nos principais sites de comércio eletrônico do Brasil.
Você pode visualizar o deploy da aplicação aqui.
Este projeto está sob a licença MIT. Consulte a LICENÇA para obter mais informações.
O projeto está estruturado da seguinte forma:
- 📁
public
- 📁
src
- 📁
app
- 📁
cart
- 📁
categories
- 📁
products
- 📁
search
- ⚛️
page.tsx
- ⚛️
layout.tsx
- ⚛️
globals.css
- 📁
- 📁
components
- 📁
ui
- 📁
layout
- 📁
constants
- 📁
contexts
- 📁
- 📁
Siga as instruções abaixo para rodar o projeto em seu ambiente local:
-
Certifique-se de ter o Node.js instalado em seu computador. Você pode baixar a versão mais recente do Node.js aqui.
-
Clone este repositório em seu computador ou faça o download do código fonte.
git clone https://github.com/jhonatan-oliveiradev/ecommerce-teste-f.git
-
Abra o terminal e navegue até o diretório raiz do projeto.
-
Instale as dependências do projeto executando o seguinte comando:
npm install
- Após a conclusão da instalação das dependências, inicie o servidor de desenvolvimento local com o comando:
npm run dev
ou
yarn dev
- O servidor local será iniciado e você poderá acessar o projeto no seu navegador através do seguinte endereço:
http://localhost:3000
Caso a porta 3000 estiver em uso, automaticamente o Next.js irá subir na próxima porta livre da máquina.
Se deseja alterar a porta padrão na qual a aplicação tentará subir, você pode modificar a porta no arquivo next.config.js
.
Agora você está pronto para explorar o projeto em seu ambiente local!
Para rodar o mock de API local, siga as instruções abaixo:
-
Abra o terminal e navegue até o diretório raiz do projeto.
-
Execute o seguinte comando para subir o servidor de mock de API:
npm run json-server
ou
yarn json-server
- O servidor de mock de API será iniciado e você poderá acessar o projeto no seu navegador através do seguinte endereço:
http://localhost:3333
Agora você está pronto para explorar o projeto em seu ambiente local com o mock de API!
Para realizar o deploy do projeto, você pode utilizar o Vercel, plataforma de deploy da Next.js.
-
Acesse o site da Vercel e crie uma conta.
-
Após criar a conta, clique em "Import Project" e selecione o repositório do projeto.
-
Configure as variáveis de ambiente necessárias para o projeto.
-
Clique em "Deploy" e aguarde o deploy ser finalizado.
Agora você tem o projeto disponível em produção!
Feito com 💜 por Jhonatan Oliveira.