Project FrontEnd Online Store

🌐

Este projeto foi desenvolvido no módulo de FrontEnd do curso de Desenvolvimento Web da Trybe. O projeto envolveu o uso de Javascript, CSS e HTML através do framework React. Nele foram manipulados os arquivos pertencentes à pasta src, com a criação de componentes, rotas e páginas. O desenvolvimento foi realizado em equipe utilizando metodologias ágeis.

• React: Para a criação da interface de usuário.
• Redux: Para o gerenciamento do estado da aplicação.
• React Router: Para a navegação entre páginas.
• CSS: Para a estilização da aplicação.
• Docker: Para a containerização da aplicação.

• Uso de metodologias ágeis (Trello e Scrum);
• Implementação de rotas com React Router;
• Lógica de programação;
• Manipulação de estado com Redux;
• Criação de componentes React.

A estrutura de rotas da aplicação é gerenciada pelo componente App. Aqui está um exemplo da implementação das rotas:

import { Switch, Route } from 'react-router-dom';
import Main from './pages/Main';
import ShoppingCart from './pages/ShoppingCart';
import Checkout from './pages/Checkout';
import Details from './pages/Details';

class App extends Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" component={ Main } />
        <Route path="/shoppingcart" component={ ShoppingCart } />
        <Route path="/checkout" render={ (props) => <Checkout { ...props } /> } />
        <Route path="/details/:product" render={ (props) => <Details { ...props } /> } />
      </Switch>
    );
  }
}

export default App;

Para rodar a aplicação utilizando Docker, siga os passos abaixo:

1. Construir a imagem Docker:

   No diretório do projeto, execute o seguinte comando para criar a imagem Docker:

   docker build -t react_store .
   

2. Rodar o container:

   Após a construção da imagem, você pode rodar um container a partir dela com o seguinte comando:

   docker run -d --name react -p 3000:3000 react_store
   

3. Acessar a Aplicação:

   Após iniciar o container, a aplicação estará disponível em http://localhost:3000.

• 🌶️ Recipes App
• 🎮 Trivia
• 👛 Expense organizer
• 🐣 Pokedex