🇺🇸 English

🇧🇷 Português

🛍️ Apple Store Project

Vídeo   |    Tecnologias   |    Etapas   |    Sobre   |    Páginas   |    Componentes   |    Clone   |    Contato

📹 Apresentação em Vídeo do Projeto

Caso o vídeo apresente algum erro, recarregue a página!
Acesse o projeto online AQUI

🚀 Tecnologias Utilizadas

Abaixo estão as 18 tecnologias utilizadas no desenvolvimento do projeto, e seus motivos

NextJS Motivo Por conter diversos recursos que auxiliam no desenvolvimento, otimizações de performance e afins, como o SSR usado para buscar os dados na aplicação, assim melhorando também o SEO, além possibilitar facilmente a criação das rotas através do API Routes.	Typescript Motivo Por trabalhar muito bem com o Next e ser um superset do Javascript, trazendo recursos e boas práticas que dão muita segurança durante o desenvolvimento e confiança no resultado, como sua tipagem estática e checagem de erros.	Redux Toolkit Motivo Para centralizar e padronizar os estados e a lógica de compra da aplicação, além de ser extremamente flexível e depurável.	Tailwind Motivo Por agilizar e padronizar o desenvolvimento dos estilos da aplicação, trazendo vários recursos para se lidar melhor com o CSS.	ReactJS Motivo Ele é o framework base do projeto, o Next existe a partir dele.
Stripe Motivo Por ser uma conceituada plataforma de processamento de pagamentos, sendo utilizada para simular o pagamento das compras.	NextAuth Motivo Para a autenticação do usuário pela sua conta Google.	Sanity.io Motivo Por ser uma base de dados simples de se lidar e altamente customizável.	HeadlessUI Motivo Por dispor de componentes extremamente úteis e bem estruturados, além de se integrar muito bem com Tailwind.	React Responsive Motivo Por auxiliar no tratamento da responsividade da aplicação de uma forma diferente, porém necessária, do Tailwind.
React Hot Toast Motivo Por dispor de notificações altamente customizáveis, bem estruturadas, e simples de se lidar.	Overlayscroll React Motivo Para realizar a estilização do scroll e manipulação da viewport.	Vercel Analytics Motivo Para rastrear as visualizações do site.	React Icons Motivo Por conter uma vasta biblioteca de ícones.	Random String Motivo Para gerar o número de rastreamento da pages/success.
Javascript Motivo Ele é a base do Typescript.	CSS3 Motivo Fica implícito no Tailwind.	HTML5 Motivo Fica implícito na sintaxe de TSX.

🗓️ Etapas

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

📝 Sobre

Assistir o vídeo acima e/ou acessar o projeto online ajudará na compreensão da explicação!

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.

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.

📄 Páginas e Rotas

A aplicação tem um total de 3 componentes de página, sendo eles:

• 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.

A aplicação tem um total de 5 componentes de rota, sendo eles:

• 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.

📑 Demais Componentes

A aplicação também conta com mais 17 componentes, sendo eles:

• 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 na pages/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 no pages/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, como addToCart e removeFromCart (que são autoexplicativas), e valores como selectCartProducts (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 na pages/api, componentizando-os nesse componente. Por enquanto ele exporta apenas a fetchPostJSON, 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 a pages/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 a urlFor, 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.

📖 Clonando o Projeto

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

📞 Contato dos Contribuintes

Vitrine.Dev 🪟 Lucas Maciel 🪧 Vitrine.Dev Lucas Maciel ✨ Nome 🛍️ Apple Store 🏷️ Tecnologias nextjs, typescript, redux, stripe, reactjs, tailwind css, sanity.io, next-auth, headlessui, react hot toast, random string, vercel analytics, react responsive, overlayScrollbars react, react icons, javascript, css, html 📷 Img

Voltar ao Topo