Skip to content

Latest commit

 

History

History
603 lines (318 loc) · 8.16 KB

Development-frontend.md

File metadata and controls

603 lines (318 loc) · 8.16 KB
Raw

[nomadcoders.co] Uber Eats Clone [ENG, 2020]


02. Frontend


14.0 - Create React App

$ npx create-react-app . --template=typescript

14.1 - 14.2 - TailwindCSS

$ yarn add tailwindcss postcss autoprefixer

$ npx tailwindcss init
$ npm run tailwind:build

14.3 - Apollo Setup

$ yarn add @apollo/client graphql

14.4 - React Router Dom

$ yarn add react-router-dom

15.0 - Local-Only Fields


15.1 - React Hook Form

https://react-hook-form.com/

$ npm instl react-hook-form

15.2 - React Hook Form (part 2)


15.3 - Router and types

$ npm instl @types/react-router-dom

15.4 - Form Design


Application


15.5 - Form Login


Application


15.6 - Login Mutation (part 1)


15.7 - Apollo Codegen

$ yarn add -g apollo
$ yarn add apollo


$ npm run apollo:codegen

15.8 - 15.9 - Login Mutation


15.10 - 15.11 - UI-Clonning


Application


15.12 - Create Account Mutation

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

Application


15.13 - Create Account Mutation (part Two)

http://emailregex.com/


15.14 - Saving the Token

$ yarn add react-helmet-async

15.15 - Using the Token


Application


15.16 - Routers and 404s


Application


15.17 - 15.18 - Header

https://github.com/FortAwesome/react-fontawesome#documentation

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

Application


16.0 - 16.1 - Verifying Email


Application


16.2 - 16.3 - Edit Profile


Application


16.4 - writeFragment vs Refetch


17.0 - Restaurants Query


17.1 - Categories Style

Images categories:

https://d4p17acsd5wyj.cloudfront.net/shortcuts/cuisines/bbq.png
https://d4p17acsd5wyj.cloudfront.net/shortcuts/cuisines/dessert.png
https://d4p17acsd5wyj.cloudfront.net/shortcuts/cuisines/asian.png
https://d4p17acsd5wyj.cloudfront.net/shortcuts/cuisines/italian.png

// CREATE ACCOUNT OWNER
// LOGIN
// CREATE RESTAURANT OWNER
// CREATE RESTAURANT
// GET ALL CATEGORIES

I think need manually update id db category images.


Application


17.2 - Restaurants List

Images restaurants:

https://d1ralsognjng37.cloudfront.net/b43e3aa8-ad1f-48d9-9109-6024f5ff7793.jpeg

https://d1ralsognjng37.cloudfront.net/8252b41b-1673-4975-91bc-5b609c27b205.jpeg

https://d1ralsognjng37.cloudfront.net/b0bf9b96-2e62-427e-9743-6229715efea1.jpeg

https://d1ralsognjng37.cloudfront.net/3ff8e534-94ec-4dc9-a467-433099e0561f.jpeg

https://d1ralsognjng37.cloudfront.net/32c7d67f-c36f-4471-9cf6-bb16e3b83028.jpeg

https://duyt4h9nfnj50.cloudfront.net/resized/1537291913826-w2880-3f.jpg

Application


17.3 - Restaurants Pagination


Application


17.4 - 17.5 - Search

Remove helmet package.
We will use react-helmet-async


17.6 - Category


17.7 - Code Challenge


17.8 - 17.9 - Restaurant


Application


18.0 - Tests Setup


18.1 - App Tests

$ npm run test:coverage

18.2 - Button Tests


18.3 - FormError and Restaurant Tests


18.4 - Testing Header and 404


18.5 - 18.7 Login Tests

$ yarn add mock-apollo-client

18.8 - 18.10 - CreateAccount Tests

https://testing-library.com/docs/react-testing-library/setup/


18.11 - Conclusions


Application


Application


19.0 - Installing Cypress

$ yarn add cypress
$ npx cypress open

Application


19.1 - Our First Cypress Test

https://testing-library.com/docs/cypress-testing-library/intro/

$ yarn add @testing-library/cypress

19.2 - Login E2E


19.3 - 19.4 - Create Account E2E


19.5 - Custom Commands


19.6 - 19.7 - EditProfile E2E


Application


20.0 - Order Dashboard Routes

Need an Owner account


Application


20.1 - Create Restaurant (part One)


Application


20.2 - 20.3 - File Upload

$ cd backend/
$ nest generate module uploads

I wont store images in aws

$ yarn add aws-sdk

20.4 - Create Restaurant (part Two)


Application


20.5 - 20.5 - Cache Optimization


Application


20.7 - Restaurant Dashboard (part One)


Application


20.8 - 20.9 - Create Dish


Application


20.10 - 20.11 - DishOptions


Application


20.12 - Dish Component


Application


20.13 - 20.15 - Victory Charts

https://formidable.com/open-source/victory/

$ yarn addictory

// CREATE DISH (AS OWNER)


// CREATE OR USE ACCOUNT CLIENT
// LOGIN
// GET RESTAURANT BY ID: V3

// CREATE ORDER (5-10)
// GET ORDERS

Application


20.16 - Conclusions


21.0 - Introduction [Skipped]

https://paddle.com/

I wont use paddle account for now and skip this part


21.1 - Paddle Product Test

$ npx ngrok
$ npx ngrok http 4000

21.2 - 21.3 - Paddle Integration


22.0 - Extending the Dish Component


http://localhost:3000/restaurants/27


Application


22.1 - 22.6 - Making Order


Application


23.0 - Order Component


http://localhost:3000/orders/20


Application


23.1 - Subscription Setup


$ yarn add subscriptions-transport-ws

https://www.apollographql.com/docs/react/api/link/apollo-link-ws/

https://www.apollographql.com/docs/react/data/subscriptions/


Application


23.2 - subscribeToMore

// LOGIN AS OWNER

// EDIT ORDER
status: Cooking

23.3 - Restaurant Orders


23.4 - Edit Order


23.5 - 23.7 - Driver Dashboard (I am not planning to use Google API)

$ yarn add google-map-react
$ yarn add @types/google-map-react

console.cloud.google.com -> API Library -> Maps JavaScript API -> Enable


Create credentials


Login as driver


Application


23.8 - Address Geocoding

$ yarn add --dev @types/googlemaps

console.cloud.google.com -> API Library -> Directions API -> Enable


23.9 - Painting Directions


23.10 - Coocked Order Subscription


23.11 - Final Test


23.12 - Conclusions


24.0 - Heroku Setup [Skipped]



Marley

Any questions in english: Telegram Chat
Любые вопросы на русском: Телеграм чат