Ignite Shop

Read in English or Portuguese

A clothing store made with React and TypeScript.

English

Technologies Used

• React
• Stitches
• Stripe API
• keen-slider
• useShoppingCart

Tweaks and updates

The project is still under development and there will be more updates following the list below:

• Mobile responsivity

🚀 Run it locally

For running the project locally, follow these steps in your terminal:

# terminal

# Clone the repository
git clone https://github.com/nicholascostadev/ignite-shop.git
# Install all dependencies 
cd ignite-shop
npm install

Create an account in Stripe and setup the API key in a .env.local file

# .env.local

STRIPE_PUBLIC_API_KEY=publickeywithouthquotes
STRIPE_SECRET_API_KEY=privatekeywithouthquotes
# This URL should be http://localhost:3000 if you're
# in development mode
NEXT_PUBLIC_VERCEL_URL=productionwebsite

# Run the project in development mode
npm run dev

Deployment

The easiest way to deploy Nextjs projects is with Vercel, just create an account there and follow the instructions.

How to test it

One of the cards you can use for testing is:

4242 4242 4242 4242

the rest of the data may be completely random, but the expiration date may be a valid one.

Other cards are available here: Testing cards

Portuguese

Uma loja de roupas feita com React e TypeScript.

Tecnologias utilizadas

• React
• Stitches
• Stripe API
• keen-slider
• useShoppingCart

Ajustes e Updates

Esse projeto ainda está em desenvolvimento e terá atualizações de acordo com a lista abaixo:

• Responsividade no Mobile

🚀 Run it locally

Para rodar o projeto localmente, siga esses passos no seu terminal:

# terminal

# Clone o repositório
git clone https://github.com/nicholascostadev/ignite-shop.git
# Instale as dependências
cd ignite-shop
npm install

Crie uma conta no Stripe e coloque suas chaves de API no arquivo .env.local

# .env.local

STRIPE_PUBLIC_API_KEY=apipublicasemaspas
STRIPE_SECRET_API_KEY=apiprivadasemaspas
# Essa URL deve ser http://localhost:3000 se você está
# em ambiente de desenvolvimento
NEXT_PUBLIC_VERCEL_URL=websitedeproducao

# Rode o projeto em modo de desenvolvimento
npm run dev

Deployment

A maneira mais de dar deploy em projetos Nextjs é pela Vercel, é só criar uma conta e seguir as instruções.

Como testar

Um dos cartões que você pode usar para testar é o:

4242 4242 4242 4242

o resto dos dados pode ser completamente aleatório, tirando a data de validade que tem que ser uma data válida.

Outros cartões estão disponíveis por aqui: Cartões de teste