Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/epiled/orgs-cesta-expo

🥗 Projeto de aplicativo em React Native com Expo. O aplicativo é uma cesta de compras que lista os produtos que o usuário deseja comprar, exibindo o valor total da compra. 🥗
https://github.com/epiled/orgs-cesta-expo

android-studio expo javascript react-native

Last synced: 21 days ago
JSON representation

🥗 Projeto de aplicativo em React Native com Expo. O aplicativo é uma cesta de compras que lista os produtos que o usuário deseja comprar, exibindo o valor total da compra. 🥗

Host: GitHub
URL: https://github.com/epiled/orgs-cesta-expo
Owner: Epiled
License: mit
Created: 2022-06-06T19:08:49.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-12-17T14:37:15.000Z (about 1 year ago)
Last Synced: 2024-11-19T10:24:23.156Z (3 months ago)
Topics: android-studio, expo, javascript, react-native
Language: JavaScript
Homepage:
Size: 1.21 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 🥗 Orgs Cesta Expo

Projeto do curso React Native: criando um app da Alura, curso ministrado pela instrutora Natalia Kelim Thiel

.

| :placard: Vitrine.Dev |     |

| -------------  | --- |

| :sparkles: Nome        | **Orgs Cesta Expo**

| :label: Tecnologias | react-native, javascript, expo, android studio

![orgs-cesta-expo](https://github.com/Epiled/orgs-cesta/assets/55258483/2aa8acf5-aaa1-4929-9621-674cc99aa0c8#vitrinedev)

 📃 Detalhes do projeto 


  Projeto de aplicativo em React Native com Expo. O aplicativo é uma cesta de compras que lista os produtos que o usuário deseja comprar, exibindo o valor total da compra.

  Este projeto de APP utiliza as seguintes tecnologias:

### Frontend

- **React Native:** Framework principal que permite o desenvolvimento de aplicativos nativos para iOS e Android utilizando JavaScript e React. Proporciona eficiência ao compartilhar parte significativa do código entre as plataformas.

- **JavaScript:** Linguagem de programação fundamental para o desenvolvimento no ambiente React Native. Utilizada para criar lógica de negócios, interações de usuário e integrações com API.

### Ferramentas e Configurações

- **Expo:** Plataforma e conjunto de ferramentas que simplificam o desenvolvimento React Native. Oferece componentes prontos para uso, facilita o acesso a APIs nativas e simplifica o processo de compilação e implantação.

- **Android Studio:** Ambiente de desenvolvimento integrado (IDE) oficial para aplicativos Android. Oferece ferramentas robustas para design, codificação, depuração e teste, garantindo a otimização de desempenho e a conformidade com padrões Android.

### Funcionalidades Principais

- Exibição de dados do arquivo de mock

![Badge](https://img.shields.io/github/last-commit/Epiled/orgs-cesta-expo?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/code-size/Epiled/orgs-cesta-expo?style=for-the-badge)

![Badge](https://img.shields.io/github/languages/count/Epiled/orgs-cesta-expo?style=for-the-badge)

![Bagde](https://img.shields.io/badge/repo%20status-Beta-cyan?style=for-the-badge)

![Bagde](https://img.shields.io/github/v/release/Epiled/orgs-cesta-expo?style=for-the-badge)

![Bagde](https://img.shields.io/github/license/Epiled/orgs-cesta-expo?style=for-the-badge)

![Badge](https://img.shields.io/badge/-React%20Native-61DAFB?style=for-the-badge&logo=react&logoColor=black)

![Badge](https://img.shields.io/badge/-Javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

![Badge](https://img.shields.io/badge/-Expo-000020?style=for-the-badge&logo=expo&logoColor=white)

![Badge](https://img.shields.io/badge/-Android%20Studio-3DDC84?style=for-the-badge&logo=androidstudio&logoColor=white)

 📑 Tabela de Conteúdos 


   * [Detalhes do projeto](#detalhes-do-projeto)

   * [Tópicos Desenvolvidos](#topicos-curso)

   * [Demonstração](#demonstracao)

     - [home](#home)

   * [Pré-Requisito](#pre-requisito)

   * [Instalação](#instalacao)

   * [Como usar](#como-usar)

      - [Opção 1 - Expo](#opcao-1)

      - [Opção 2 - Android Studio](#opcao-2)

   * [Tecnologias](#tecnologias)

   * [Autor](#autor)

 👩‍🏫 Tópicos desenvolvidos


  * Configure um ambiente de desenvolvimento leve e simples usando o Expo

  * Desenvolva e rode aplicações para Android e até mesmo iOS, usando Linux, Windows ou macOS

  * Crie um projeto React Native do zero

  * Aprenda a exibir textos, imagens e botões

  * Aprenda a criar seus próprios componentes usando

  * Faça estilos utilizando conceitos semelhantes ao CSS

  * Adeque o layout para tipos e tamanhos de tela diferentes

  * Instale fontes do externas do Google Fontes

  * Aprenda a otimizar a performance de listas

 👀 Demonstração 


 Home 


https://github.com/Epiled/orgs-cesta/assets/55258483/a9cb8960-8f33-4c1a-bc2f-70e9f6ef719a

 🚨 Pré-requisito 



  Expo

  Android Studio (Opcional)



 ⚙ Instalação 


```

1. git clone https://github.com/Epiled/orgs-cesta-expo.git

2. cd orgs-cesta-expo

3. npm install

```

 👩‍🏫 Como usar 


Opção 1 - Expo


```

1. npm start

2. Leia o QR Code atráves do APP da Expo

```

Opção 2 - Android Studio


Necessário o Android Studio


```

1. npm start

2. Pressione a tecla "a" para abrir o aplicativou automaticamnte no emulador.

```

 🛠 Tecnologias 


As seguintes tecnologias foram usadas na construção deste projeto:



  React Native

  Javascript

  Expo

  Android Studio



 👨‍💻 Autor 




![Felindo](https://user-images.githubusercontent.com/55258483/178338085-2cea8bf2-6d0c-409a-9d0e-23359b7d303e.png)

 


 _{Felipe De Andrade}

Feito com ❤️ por Felipe De Andrade 👋🏽 Entre em contato!

[![Linkedin Badge](https://img.shields.io/badge/-Felipe-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/fademendonca/)](https://www.linkedin.com/in/fademendonca/)

[![Gmail Badge](https://img.shields.io/badge/[email protected]?style=flat-square&logo=Gmail&logoColor=white&link=mailto:[email protected])](mailto:[email protected])

[![Instagram Badge](https://img.shields.io/badge/-Instagram-e4405f?style=flat-square&logo=Instagram&logoColor=white&link=https://www.instagram.com/felipe.deam/)](https://www.instagram.com/felipe.deam/)

[![Codepen Badge](https://img.shields.io/badge/-Codepen-000000?style=flat-square&logo=Codepen&logoColor=white&link=https://codepen.io/epiled)](https://codepen.io/epiled)