🇺🇸 English |
🇧🇷 Português |
Vídeo | Tecnologias | Etapas | Sobre | Páginas | Componentes | Clone | Contato
apple-store-video.mp4
Caso o vídeo apresente algum erro, recarregue a página!
Não tem deploy apenas por motivos de direitos autorais.
Abaixo estão as 18 tecnologias utilizadas no desenvolvimento do projeto, e seus motivos
NextJS |
Typescript |
Redux |
Tailwind |
ReactJS |
![]() Stripe |
![]() NextAuth |
![]() Sanity.io |
![]() HeadlessUI |
![]() React |
![]() React Hot |
![]() Overlayscroll |
![]() Vercel |
![]() React Icons |
![]() Random String |
Javascript |
CSS3 |
HTML5 |
46 das atuais 54 etapas já foram concluídas, mas novas podem ser adicionadas!
🗹 | Definição da estrutura base e instalação de dependências |
🗹 | Definição de estilos globais |
🗹 | Busca por boas fotos de mostruário |
🗹 |
Desenvolvimento da base da pages/index
|
🗹 | Criação e configuração básica da base de dados com o Sanity |
🗹 |
Desenvolvimento do components/Header
|
🗹 |
Desenvolvimento do components/Button inspirado no DevDojo
|
🗹 |
Finalização da estrutura e estilo da pages/index
|
🗹 | Configuração do painel de administração da base de dados |
🗹 | Preenchimento da base de dados |
🗹 |
Desenvolvimento da pages/api/getCategories e pages/api/getProducts
|
🗹 |
Desenvolvimento da utils/fetchCategories e utils/fetchProducts
|
🗹 |
Desenvolvimento do components/Product
|
🗹 |
Busca dos produtos da base de dados via SSR
![]() |
🗹 | Implementação do Redux |
🗹 | Implementação dos toasts |
🗹 |
Desenvolvimento do components/Cart
|
🗹 |
Desenvolvimento da estrutura e estilo da pages/checkout
|
🗹 |
Desenvolvimento do components/CheckoutProduct
|
🗹 |
Agrupamento dos produtos duplicados na pages/checkout
|
🗹 | Implementação do Stripe |
🗹 |
Desenvolvimento do utils/get-stripejs e utils/api-helpers
|
🗹 |
Desenvolvimento da pages/api/checkout_sessions
|
🗹 |
Desenvolvimento da estrutura e estilo da pages/success
|
🗹 |
Desenvolvimento da pages/api/getSession e utils/fetchLineProducts
|
🗹 |
Finalização da pages/success obtendo os dados via SSR
|
🗹 |
Implementação do NextAuth e criação do pages/api/auth/[...nextauth]
|
🗹 | Criação do projeto na Google Cloud |
🗹 | Implementação do NextAuth no Sanity |
🗹 | Deploy da base de dados |
🗹 | Otimização das imagens do projeto |
🗹 | Mudança do Hero Icons para o React Icons |
🗹 |
Melhoria do design e responsividade da pages/index
|
🗹 |
Melhoria da responsividade da pages/checkout
|
🗹 | Criação da licença e desenvolvimento do README do projeto |
🗹 | Melhoria do SEO do projeto |
🗹 |
Remoção do react-currency-formatter (bugging)
|
🗹 |
Desenvolvimento do components/Currency
|
🗹 | Deploy do projeto na Vercel |
🗹 | Divisão de branches de Produção e Desenvolvimento |
🗹 | Desenvolvimento Cross-Browser |
🗹 | Estilização do Scroll |
🗹 |
Melhoria da responsividade do pages/index
|
🗹 |
Correção geral de Bugs————————————🗹 Correção do menu Mobile do pages/index com o novo scroll🗹 Correção da posição do components/Cart com o novo scroll🗹 Correção do botão Comprar do pages/index com o novo scroll🗹 Correção do título do Head 🗹 Correção do scroll do pages/success 🗹 Correção do error validateDOMNesting no pages/success
🗹 Correção do SEO
|
🗹 | Implementação do Vercel Analytics |
🗹 | Adição das minhas redes sociais |
☐ | Melhoria do tratamento de erros |
☐ | Personalização dos Toasts |
☐ | Otimização da performance do projeto |
☐ |
Desenvolvimento da busca de CEP na pages/checkout
|
☐ | Armazenamento os produtos do carrinho em Local Storage |
☐ | Desenvolvimento do sistema de busca |
☐ | Desenvolvimento da página para cada produto |
☐ | Adição de novos produtos e categorias |
☐ | Clonagem de páginas da Apple |
☐ | Criação de página de produtos parceiros consumindo uma API |
Em resumo, a aplicação se consiste num E-Commerce da Apple, simulando um fluxo de compra completo, onde o usuário pode ou não se autenticar pela sua conta Google através do NextAuth, adicionar e remover os produtos do seu carrinho com auxílio do Redux, simular o pagamento desses produtos através do ambiente de testes do Stripe, e ao final será redirecionado para uma página de confirmação e agradecimento da compra. Esse fluxo de compra em si envolvendo os produtos buscados da base dados do Sanity é o principal destaque da aplicação, mas existem outros pontos muito importantes que podem ser conferidos nas sessões abaixo.Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!
Também recomendo conferir especialmente os motivos da utilização de NextJS, Typescript, Redux e Tailwind na sessão de Tecnologias, pois meu principal objetivo com esse projeto foi desenvolver minha autonomia com tais tecnologias, visto que sou um desenvolvedor React e elas são uma parte fundamental de seu ecossistema, sendo elas as principais responsáveis pela agilidade, confiança, performance e profissionalismo de forma geral durante o desenvolvimento da aplicação, devido aos seus excelentes recursos.
Mas isso claro, sem tirar o mérito das outras tecnologias utilizadas, todas elas desempenham um papel fundamental especificado junto delas, e contribuem para o resultado do projeto como um todo, e irei continuar aprendendo e me aprofundando bastante nessas tecnologias e no que for necessário durante o desenvolvimento dessa aplicação para colocar todas as minhas ideias em prática e cumprir todas as tarefas listadas na sessão de Etapas, que é uma sessão que também vale a pena conferir para ter uma visão geral sobre a evolução do projeto.
pages/index
: Essa é a Home da aplicação, onde o usuário pode efetuar o LogIn/LogOut, e adicionar produtos ao carrinho. Os produtos são buscados da base de dados utilizando o conceito de SSR;pages/checkout
: Essa é a página de revisão da compra, onde o usuário pode remover produtos do carrinho e seguir com o pagamento, sendo redirecionado para o ambiente de teste do Stripe - uma página de pagamento;pages/success
: Após ter preenchido os dados e efetuado o pagamento na página do Stripe, o usuário será redirecionado para essa página, que é a de confirmação e agradecimento pela compra.
pages/api/auth/[...nextauth]
: Esse é o arquivo de configurações globais do NextAuth;pages/api/checkout_sessions
: Essa rota é responsável por transformar os dados da compra recebidos no formato que o Stripe exige, e criar uma sessão no Stripe para o usuário. Exemplo de uso:pages/checkout
;pages/api/getCategories
: Essa rota é responsável por retornar as categorias dos produtos da base de dados. Exemplo de uso:utils/fetchCategories
;pages/api/getProducts
: Essa rota é responsável por retornar os produtos da base de dados. Exemplo de uso:utils/fetchProducts
;pages/api/getSession
: Essa rota é responsável por retornar uma sessão a partir do id recebido. Exemplo de uso:utils/fetchLineProducts
.
pages/_app
: Nesse componente ficam configurações globais da aplicação, como os contextos do Redux e do NextAuth que envolvem toda a aplicação, estilos globais, e a renderização dos toasts;pages/_document
: Resumidamente, nesse componente ficam as configurações de SEO da aplicação.
components/Button
: Esse componente é relativo ao botão reaproveitado periodicamente durante a aplicação;components/Cart
: Esse componente é relativo ao ícone de carrinho que aparece quando existe algum item no carrinho e o scroll está baixo de 400;components/CheckoutProduct
: Esse componente é relativo aos produtos mostrados napages/checkout
;components/Currency
: Esse componente é responsável pela formatação de moeda dos preços;components/Header
: Esse componente é relativo ao cabeçalho da aplicação;components/Product
: Esse componente é relativo aos produtos mostrados nopages/index
.
redux/cartSlice
: Utilizando o Redux, nesse componente está a lógica usada para lidar com as ações de interação do usuário em relação ao sistema de shopping. Ele exporta funções de extrema importância, comoaddToCart
eremoveFromCart
(que são autoexplicativas), e valores comoselectCartProducts
(total de produtos no carrinho), e dentre outros, que são usados periodicamente pelo projeto;redux/store
: Esse é o arquivo de configurações do Redux.
utils/api-helpers
: A ideia desse componente é a de agilizar e reutilizar determinados processos feitos napages/api
, componentizando-os nesse componente. Por enquanto ele exporta apenas afetchPostJSON
, responsável por agilizar requisições POST;utils/fetchCategories
: Esse componente responsável por agilizar a busca pelas categorias dos produtos na base de dados;utils/fetchProducts
: Esse componente responsável por agilizar a busca pelos produtos na base de dados;utils/fetchLineProducts
: Esse componente, trabalhando em conjunto com apages/api/getSession
, é responsável por retornar os produtos baseado no id enviado, e juntos eles realizam a verificação do id e podem retornar 404 caso esteja incorreto;utils/get-stripejs
: Esse componente é responsável por inicializar o Stripe, usando o Sigleton Pattern para não inicializá-lo mais de uma vez.
sanity
: Esse é o arquivo de configurações do Sanity. Ele também exporta aurlFor
, função que auxilia na exibição das imagens dos produtos da base de dados;apple-store-database
: Essa é a base de dados do projeto, criada utilizando o Sanity.
Para clonar e executar este projeto em seu computador, você precisará do Git e Node.js v18.12.1 ou superior previamente instalados.
Feito isso, no terminal:
# Clone esse repositório com:
> git clone https://github.com/Luk4x/apple-store.git
# Entre no repositório com:
> cd apple-store
Estando agora na raiz do projeto, crie o arquivo .env.local
, que deve conter as seguintes variáveis de ambiente:
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=
SANITY_API_TOKEN=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=
Para configurar tais variáveis, você precisará criar um projeto no Sanity, Stripe e Google Cloud, além de que precisará preencher a base de dados também.
Feito isso:
# Instale as dependências com:
> npm install
> cd apple-store-database
> npm install
# Execute o projeto com:
> npm run dev
> cd ..
> npm run dev
# Feito isso, você já poderá estar acessando o projeto em: http://localhost:3000
Vitrine.Dev 🪟
|
![]() |