Giter Club home page Giter Club logo

aszurar / rentx Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 497 KB

O 3º projeto do bootcamp Ignite na trilha react-native, é o 2º projeto com o auxílio e configurações do Expo(Bare workflow), além disso é explicado mais sobre design(UI/UX), requisições de API RestFull em conjunto com axios e json-server, animações no React-Native, formatação de texto, manipulações com imagens, ícones, uso de diversas bibliotecas e elementos do react-native como a react-native-calendars, Lottie animations, Flatlist, ScrollView dentre outros.

TypeScript 77.52% JavaScript 1.54% Starlark 2.33% Java 11.58% Ruby 0.79% Objective-C 6.24%
expo javascript reac react react-native react-navigation styled-components android json-server lottie-animation

rentx's Introduction

Rentx | Ignite - React-Native

O projeto Rentx é um aplicativo mobile de a locação de veículos. Podemos listar os veículos disponíveis, agendar, e verificar os carros atualmente alugados pelo usuário. O projeto é desenvolvido com o framework com React-Native, e várias biliotecas como: React-Navigation para navegação em pilhas, JSON-Server como API para o back-end e toda teoria de como se chama as requisições de uma API RESTFULL, React Native Calendars para a seleção das datas, React-Native-Reanimated para animação dentre outras...

Rentx




ℹ️ Sobre

O 3º projeto do bootcamp Ignite na trilha react-native, é o 2º projeto com o auxílio e configurações do Expo(Bare workflow), além disso é explicado mais sobre design(UI/UX), Requisições de API RestFull em conjunto co Axios e JSON-Server, Animações no React-Native, além de formatação de datas com o date-fns.

  • Página Inicial:
__________________
  • Carros alugados:
___________________________
___ ## ⁉️ Motivo

Esse projeto tem por objetivo por em praticar os conceitos básicos de React Native no desenvolvimento mobile no 3º capítulo do curso Ignite de React Native.

Assim, nesse projeto criamos:

  1. Listagem geral de veículos que podem ser alugados.
  2. Cadastro de agendamentos dos veículos com suas datas formatadas e o preço total a ser pago.
  3. Listagem dos carros alugados pelo usuário.
  4. Formatação de datas com o date-fns.
  5. Componentes criados com Style Components, Flatlist e suas tipagens, hooks, navegação em pilha, calendário com o React-Native Calendars
  6. Animação e criação de componentes animados como Carrossel manual, efeito fade em componentes, uso de Splash Screen com o React Native Reanimated, Loads personalizados com Lottie econceitos básicos de Heurísticas Nielsen e UX, além de design, API REST, animação dentre outras.
  • Detalhes sobre o veículo:
______ _______
  • Agendamento/Cadastro:
______ _______

🎨 Design

Rentx - Figma


🌱 Requisitos Mínimos

  • Node.js
  • Yarn(ou NPM)
  • React
  • React-Native
  • JSON-Server
  • Android Studio
  • Celular(Opcional)
  • Expo(desktop)
    • Expo Go(Mobile) opcional.

🚀 Principais Tecnologias Utilizadas

O projeto foi desenvolvido utilizando as seguintes tecnologias


📦 Como baixar e executar o projeto

  • Clonar o projeto:

     git clone https://github.com/Aszurar/Rentx.git
  • É necessário a instalação do yarn de acordo com seu sistema operacional, para isso veja como no site do Yarn

  • Instalação das dependências:

    • Execute o comando abaixo dentro da pasta do projeto
      yarn
  • É necessário a instalação do emulador Android Studios e das tecnologias requesitadas acima no:seedling: Requisitos

  • Também é necessário a instalação/configuração de outras tecnologias, para isso siga os passos indicados nessa página de acordo com seu sistema operacional: Executando uma Aplicação React-Native emulando Windows/Linux/MacOS ou direto no dispositivo mobile Android/IOS

  • É necessário a instalação do Expo

  • Execução - Abra a pasta do projeto com alguma IDE(Vscode) ou simplesmente abra o terminal na pasta do projeto e execute o comando abaixo:

       expo start
  • Abra o emulador ou conecte o celular(É necessário a instalação do Expo Go) e execute:

        a
  • Lembrando que, caso seja executado pelo emulador, o ideal é sempre deixa-lo aberto antes de aplicar os comandos acima.

  • Além disso, como temos o json-server, será necessário executá-lo para carregar os dados da aplicação, basta abrir um novo terminal e executar:

        yarn api

Desenvolvido por 🌟 Lucas de Lima Martins de Souza.

rentx's People

Contributors

aszurar avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.