/nuber-client

Client for the Uber Clone. ReactJS, Apollo, Typescript

Primary LanguageTypeScript

nuber-client

Client for the Uber Clone. ReactJS, Apollo, Typescript

Install

Create project

create-react-app nuber-client --scripts-version=react-scripts-ts

apollo-boost

yarn add apollo-boost graphql react-apollo

styled-components

yarn add styled-components
yarn add --dev @types/styled-components

styled-reset

yarn add styled-reset

react-router-dom

yarn add react-router-dom
yarn add --dev @types/react-router-dom

react-helmet

yarn add react-helmet
yarn add --dev @types/react-helmet

react-toastify

yarn add react-toastify

apollo for codegen

yarn global add apollo

react-sidebar

yarn add react-sidebar
yarn add --dev @types/react-sidebar

google maps

yarn add google-maps-react
yarn add --dev @types/google-maps-react @types/googlemaps

dotenv

yarn add dotenv
  • Get the Google Maps Javascript API key from Google Console
  • Need Geocoding API authorization.

for deploy

  // Add this configs in package.json
  "scripts": {
    ...
    "deploy": "gh-pages -d dist"
    ...
  },
  "homepage": "https://chicrock.github.io/nuber-client"

Screens

Logged Out

- [x] Home
- [x] Phone Login
- [x] Verify Phone Number
- [x] Social Login

Logged In

- [x] Home
- [x] Ride
- [x] Chat
- [x] Edit Account
- [x] Settings
- [x] Saved Places
- [x] Add Place
- [x] Find Address
- [ ] Challenge: Ride History
- [ ] Challenge: Email Sign In

Resource

iconmomster

  • Can Get the free icons from Iconmonstr
  • And Use like this with svg
<svg
  width="24"
  height="24"
  xmlns="http://www.w3.org/2000/svg"
  fill-rule="evenodd"
  clip-rule="evenodd"
>
  <path d="M20 .755l-14.374 11.245 14.374 11.219-.619.781-15.381-12 15.391-12 .609.755z" />
</svg>

Apollo Codegen

Codegen Install

yarn global add apollo

Setup

  • Add below scripts on pacakage.json
"precodegen": "apollo schema:download --endpoint=http://localhost:4000/graphql",
"codegen": "apollo codegen:generate src/types/api.d.ts --queries='src/**/*.queries.ts' --addTypename --localSchemaFile schema.json --target typescript --outputFlat"

Generate types

yarn run codegen

Social login

Facebook Login Install

yarn add react-facebook-login

Eject Apollo boost

yarn add apollo-cache-inmemory apollo-client apollo-link apollo-link-error apollo-link-http apollo-link-state apollo-link-ws apollo-utilities subscriptions-transport-ws

GET App ID

Upload Image Files

Setup Cloudinary

  • Sign up
  • Add upload preset with Unsigned in Settings

Upload image with axios

yarn add axios
const formData = new FormData();
formData.append("file", files[0]);
formData.append("api_key", CLOUDINARY_KEY);
formData.append("upload_preset", CLOUDINARY_PRESET);
formData.append("timestamp", String(Date.now() / 1000));

const {
  data: { secure_url },
} = await axios.post(
  "https://api.cloudinary.com/v1_1/[cloudinary_user_name]/image/upload",
  formData
);

Use Dotenv

  • If you want to use dotenv on reactjs project that create with create-react-app, you should add prefix like `` on your environmental varialbes.

.env

REACT_APP_CLOUDINARY_KEY=
REACT_APP_CLOUDINARY_PRESET=
REACT_APP_GOOGLE_MAPS_API_KEY=