Skip to content

vLecaBR/sales-website-model

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🇧🇷 README em Português

🛒 sales-website-model - Projeto de Portfólio

Este repositório contém o código-fonte de um site de vendas modelo, desenvolvido como parte do meu portfólio pessoal. O projeto foi construído com React, JavaScript e Styled Components, com o objetivo de demonstrar minhas habilidades em desenvolvimento front-end e na criação de interfaces modernas.


✨ Funcionalidades

  • 🛍️ Catálogo de Produtos: Exibe uma lista de produtos com imagens, descrições e preços
  • 📄 Página de Detalhes: Informações detalhadas sobre cada produto
  • 🛒 Carrinho de Compras: Permite adicionar, remover e atualizar quantidades
  • 💳 Simulação de Checkout: Apresenta o resumo do pedido e opções de pagamento
  • 📱 Design Responsivo: Adapta o layout a diferentes tamanhos de tela, oferecendo uma boa experiência em dispositivos móveis e desktops

🛠️ Tecnologias Utilizadas

  • React – Biblioteca JavaScript para construção de interfaces baseadas em componentes
  • JavaScript (ES6+) – Linguagem de programação utilizada na lógica do site
  • Styled Components – Estilização com CSS-in-JS, permitindo componentes reutilizáveis e encapsulados

⚙️ Como Rodar o Projeto

Pré-requisitos

Certifique-se de que o Node.js esteja instalado na sua máquina. Para verificar, utilize o comando:

node -v

Passo a passo

  1. Clone este repositório em sua máquina local:
    git clone https://github.com/vLecaBR/sales-website-model

  2. Acesse a pasta do projeto:
    cd sales-website-model

  3. Instale as dependências:
    npm install

  4. Inicie o servidor de desenvolvimento:
    npm start

O projeto será aberto automaticamente no navegador em: http://localhost:3000


🎨 Estilização com Styled Components

A estilização do site foi feita utilizando a biblioteca Styled Components, que permite escrever estilos CSS diretamente nos arquivos JavaScript. Isso facilita a criação de componentes modulares, reutilizáveis e com estilos isolados, evitando conflitos.


💡 Melhorias Futuras

  • Integração com API de pagamento real
  • Sistema de autenticação com login e criação de conta
  • Filtros por categoria, faixa de preço, etc.
  • Avaliações de produtos: sistema de comentários e notas pelos usuários

🖥️ Demonstração

🚧 Ainda não disponível. Um link para a demo será adicionado em breve.


📬 Contato


ℹ️ Este projeto foi desenvolvido para fins educacionais e de portfólio. Não possui funcionalidades reais de pagamento ou processamento de pedidos.


📄 Licença

Este projeto foi desenvolvido para fins educacionais e uso de portfólio. Entrar em contato em caso de querer utilizar.




🇺🇸 README in English

🛒 sales-website-model - Portfolio Project

This repository contains the source code of a model sales website, developed as part of my personal portfolio. The project was built using React, JavaScript, and Styled Components to showcase my front-end development skills and ability to create modern user interfaces.

✨ Features

  • 🛍️ Product Catalog: Displays a list of products with images, descriptions, and prices
  • 📄 Product Detail Page: Shows detailed information about each product
  • 🛒 Shopping Cart: Allows users to add, remove, and update quantities
  • 💳 Checkout Simulation: Displays order summary and payment options
  • 📱 Responsive Design: Layout adapts to different screen sizes, offering a good experience on mobile and desktop devices

🛠️ Technologies Used

  • React – JavaScript library for building component-based user interfaces
  • JavaScript (ES6+) – Programming language used for the site's logic
  • Styled Components – CSS-in-JS library for modular and scoped styling

⚙️ How to Run the Project

Prerequisites

Make sure Node.js is installed on your machine. You can check by running:

node -v

Steps

  1. Clone the repository to your local machine:
    git clone https://github.com/vLecaBR/sales-website-model

  2. Navigate into the project folder:
    cd sales-website-model

  3. Install dependencies:
    npm install

  4. Start the development server:
    npm start

The app will open automatically at: http://localhost:3000


🎨 Styling with Styled Components

Styling was done using Styled Components, which allows writing CSS directly within JavaScript files. Each component has its own encapsulated styles, making the codebase easier to maintain and scale.


💡 Potential Future Improvements

  • Payment API integration for real transaction processing
  • Authentication system for user accounts
  • Product filtering by category, price, and more
  • Product reviews and rating system

🖥️ Demo

🚧 Not available yet. A live demo link will be added soon.


📬 Contact


ℹ️ This project was developed for educational purposes and portfolio use. It does not include real payment functionality or order processing.


📄 License

This project was developed for educational purposes and portfolio use. Please contact us if you would like to use it.

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published