Client for the Uber Clone. ReactJS, Apollo, Typescript
create-react-app nuber-client --scripts-version=react-scripts-ts
yarn add apollo-boost graphql react-apollo
yarn add styled-components
yarn add --dev @types/styled-components
yarn add styled-reset
yarn add react-router-dom
yarn add --dev @types/react-router-dom
yarn add react-helmet
yarn add --dev @types/react-helmet
yarn add react-toastify
yarn global add apollo
yarn add react-sidebar
yarn add --dev @types/react-sidebar
yarn add google-maps-react
yarn add --dev @types/google-maps-react @types/googlemaps
yarn add dotenv
- Get the Google Maps Javascript API key from Google Console
- Need Geocoding API authorization.
// Add this configs in package.json
"scripts": {
...
"deploy": "gh-pages -d dist"
...
},
"homepage": "https://chicrock.github.io/nuber-client"
- [x] Home
- [x] Phone Login
- [x] Verify Phone Number
- [x] Social Login
- [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
- 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>
yarn global add apollo
- 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"
yarn run codegen
yarn add react-facebook-login
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
- Facebook developer
- Create App on facebook developer site
- Sign up
- Add upload preset with Unsigned in Settings
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
);
- If you want to use dotenv on reactjs project that create with create-react-app, you should add prefix like `` on your environmental varialbes.
REACT_APP_CLOUDINARY_KEY=
REACT_APP_CLOUDINARY_PRESET=
REACT_APP_GOOGLE_MAPS_API_KEY=