Espaço Legal

An e-commerce of outterspace toys.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Roadmap
Contact
BootCamp´s task

About The Project

A task of a simple e-commerce made by Labenus´s bootcamp was the start of my project. Now, it has a login/Sign uo section, a Cart, Itens, a page for filtering purpose, an user data page.
The desgin was loosely base design of various popular e-commerce such as amazon, riHappu and americanas.

(back to top)

Built With

(back to top)

Getting Started

For a quick look around just open the deploed site. https://espaco-legal-alexandre-machado.surge.sh/

Username and password of users

User - Alexandre

usename: afmjunior
password: 123456Ab

User - Camila

username: camila
password: 123456Ab

Deploy

surge: https://espaco-legal-alexandre-machado.surge.sh/ best viewd in a desktop screen from 1024x768 px to 1920x1080 px

Prerequisites

npm
```
npm install npm@latest -g
```

Installation

Clone the repo

git clone https://github.com/Afmjuniors/projeto-frontendreact.git

Install NPM packages
```
npm install
```

(back to top)

Usage

With a mock data it is possible to experience an online shopping with all the basics uses of a normal e-commerce. It is possible to LogIn/SegnUp, view the user's registration data, add and remove items from a cart linked to said previously logged account.
Beware that the only manipulable database its the localStorage.
There is no link with any API be it privileged or public accessible.

In the login page there is a button on the bottom left on your screen, hover over it to see available mock users.

(back to top)

Roadmap

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contact

Alexandre Machado - https://linkedin.com/in/afmjuniors - afmjuniors@gmail.com

Project Link: https://github.com/Afmjuniors/projeto-frontendreact

(back to top)

projeto-frontendreact

Esse é o projeto de introdução aos fundamentos do React. Aqui, vamos praticar a estrutura do que consideramos a estrutura do React. O objetivo é que funcione como o front-end de um E-Commerce

JSX
Componentes
Props
Estado
Fluxo de dados no React
Renderização de listas
Renderização condicional
localStorage

Instruções

O Astrodev deixou um testamento e essa foi a herança deixada pra vocês:

Estudantes do meu coração,
Estou querendo montar um e-commerce de itens espaciais e vocês serão responsáveis por essa construção. 
Pretendo montar diferentes linhas de produtos. 

As possíveis linhas de produto são:
- Satélites antigos;
- Roupas espaciais;
- Camisetas com estampas divertidas relacionadas ao espaço;
- Viagens espaciais;
- Meteoritos / aerolitos como pedras preciosas;
- Brinquedos e produtos infantis temáticos;
- Naves / Foguetes / Ônibus espaciais;

Escolham uma linha dentre essas, e criem um e-commerce de acordo com a lista de requisitos.

**O prazo é até sexta, 23h59.** 

Att.

Requisitos

O projeto consistirá em 3 grandes partes:

Home
- Mostrando todos os produtos
- Deve haver alguma forma de ordenar os produtos por ordem crescente ou decrescente de preço (pode ser na home em si ou junto dos filtros)
- Produtos:
  - Devem ter um botão que permita adicioná-los ao carrinho
  - Devem exibir o nome, preço e imagem em um card
Carrinho
- Mostrar todos os produtos e quantidades adicionadas
- Capacidade de remover itens do carrinho
- Mostrar o valor total do carrinho
Filtro
- Por valor mínimo e máximo
- Por nome do produto

Exemplo de estruturação de UM produto (Lembrem-se que vocês terão uma lista contendo todos):

{
	id: 1,
	name: "Foguete da Missão Apollo 11",
	value: 10000.0,
	imageUrl: "https://picsum.photos/200/200",
}

Lista de Requisitos

Home (Lista de Produtos)
- O usuário deve ser capaz de visualizar uma lista de produtos
- O usuário deve ser capaz de visualizar os dados do produto (nome, preço e imagem)
- O usuário deve ser capaz de adicionar um produto no carrinho
Carrinho
- O usuário deve ser capaz de visualizar os produtos adicionados
- O usuário deve ser capaz de visualizar a quantidade correta de cada produto
- O usuário deve ser capaz de remover itens do carrinho
- O usuário deve ser capaz de ver corretamente o valor total de sua compra
- Quando a página é atualizada, os itens devem continuar no carrinho
Filtros e Ordenação
- O usuário deve ser capaz de filtrar os itens por preço mínimo
- O usuário deve ser capaz de filtrar os itens por preço máximo
- O usuário deve ser capaz de realizar uma busca por nome
- O usuário deve ser capaz de ordenar os itens em ordem crescente ou decrescente
- O usuário deve ser capaz de adicionar filtros, busca e ordenação simultaneamente
- O usuário deve ser capaz de retornar à visualização sem filtros

O layout da página é escolha de vocês! O exemplo abaixo é só uma implementação bemmm simples das funcionalidades, não se atenham a ele.

http://fluttering-coast.surge.sh/

Gravacao-de-Tela-2022-07-01-as-15.10.35.mp4

Conseguiu terminar? Aqui temos alguns desafios

Salvar e Recuperar conteúdo do carrinho usando o LocalStorage;
Dediquem um tempo para melhorar o layout e a usabilidade do seu site! Se baseiem em outros e-commerces que vocês gostam para chegar em um resultado mais próximo do padrão de design visto no mercado;
Se TODO O RESTO DO SITE e os dois desafios anteriores estiverem funcionando, pensem: qual outra funcionalidade está faltando? Decidam o que vocês concordam que poderia ser uma boa adição à loja virtual (pode ser qualquer funcionalidade, desde que vocês consigam implementá-la). Todas as funcionalidades extras implementadas devem ser listadas e explicadas no readme do projeto para que possam ser avaliadas.

Entrega

Faça o fork desse repositório e realize o clone da sua cópia seu-nome-de-usuario/projeto-frontendreact.

Quer uma dica?
Crie os arquivos do projeto dentro deste repo;
Execute o fluxo de entrega do git. Lembre-se de abrir os PRs para seu próprio repositório.
Para isso, você precisará fazer o projeto utilizando branches. Evite fazer as alterações direto na branch main

Dúvidas sobre o Git & Github?

Adiciomos um vídeo explicando o processo de entrega [do fork ao pull request] no Material Assincrono da A005 - Git e Github. Esse vídeo também exemplifica situações que podem acontecer durante o fluxo de utilização do Git.
Entregue o link do repo no Formulário de entrega
Utilize o surge para fazer o deploy do seu projeto.

Afmjuniors/espacoLegal

Espaço Legal

About The Project

Built With

Getting Started

User - Alexandre

User - Camila

Deploy

Prerequisites

Installation

Usage

Roadmap

Contact

projeto-frontendreact

Instruções

Requisitos

Lista de Requisitos

Conseguiu terminar? Aqui temos alguns desafios

Entrega