nuber-eats-frontend Tailwind Templates

Nuber Eats Frontend

React, Typescript, Tailwind, Apollo

Download

What need to do more

  • [] Search Page

  • [] UnitTesting the Pages

  • [] before confirm the order show the list for order item and total price

Set Up

  • Style Mobile First Allllwayyyyyyss

  • Apollo Codegen

    • npm run apollo:codegen "for delete previous folder"
    • run on terminal not script
    • apollo client:codegen src/generated --target=typescript --outputFlat

  • Tailinwd

    • Check Here for Detail
    • npx create-react-app "name" --template-typescript
    • npm i tailwindcss postcss autoprefixer
    • npx tailwindcss init
    • Make input and output set up package.json
      • "tailwind:build" : "npx tailwindcss-cli build -i ./src/styles/tailwind.css -o ./src/styles/styles.css",

  • Apollo Setup

  • Router

Authentication

  • Local Only Fields

    • Click Here For Detail

    • Fields that aren't defined in GraphQL Schema "Apollo can handle local state"

    • It's state is not in your sever but hope staying in your application.abs

      • Examples ) "User logged in or not","Dark Mode or Light Mode"

    • If can't change the value ? It's kinda useless

    • Reactive varibales Click Here For Detail

      • read and modify anywhere without graphql operation to do and stores in apollo
      • every single change the variables the active query will automatically refreshes
        • const isLoggedIn = useReactiveVar(isLoggedInVar); easyyy to get state

  • React Hook Form

  • React Router Dom

  • Login Page

    • Tailwind Styling
      • Mobile Design First !!!!!!
      • Can extend colors on tailwind.config.js !
      • Check Here
      • How to tacking formState ? for if filled in ? shows diffenrt color !
      • thing

  • Use React Hook Form

  • Calling mutation

    • our mutation was not protected
    • npm install -g apollo apollo
    • Apollo Codegen will help types
        1. Downgrade node version
        1. Downgrade graphql version @15.5.1
        1. run code on terminal not on script !

  • after pass the user save the token on localstorage and apollo var

  • Create Page

    • ReactHelmetAsync for change the title on the top bar
    • Email regex Check Here
    • after Create account sucess ? send user to login page
      • with data

  • Token

    • Not working why ? our requesting does not contain header !
    • Check Here
    • Container "tailwind magic with w-full , max-w-screen-lg"
    • If you wanna use data something don't need to drill down upder component
      • Have a "Cache" system

User Pages

  • Verifying Email

    • Get Query Awesome way
    • email to verifying email will send to 127.0.0.1 !== localchost
      • need to fix it (when deploy)
    • Handling Cache No need to refetch or get mutation

  • Edit Profile

    • same as verifying email
    • Chache or Refeching

Restaurant

  • Search
    • Lazy Query for not running immidetley

Testing

  • Focusing the output not a implemetation

  • setting the jest

  • "jest":{ "collectCoverageFrom": [ "./src/components//*.tsx", "./src/pages//.tsx", "./src/routers/**/.tsx" ] }

  • Check the script to coverage

    • "test:cov" : "npm test -- --coverage --watchAll=false"

  • Component Testing

    • App Testing

      • mocking each Components
      • testing by screen.getText "expected user output"

    • Btn Testing

      • Not care about ternary opertation
      • expected with to have Class "" testing !!

    • RestaurantList

      • props just make a object for props and use seperate operations
      • screen.getByRole("things)

    • Header

      • getByText, queryByText return different, fail and null
      • mocking Query me
        • Using MockedProvider apollo offering
        • mocks={[
 {
 request: {
 query: ME_QUERY,
 },
 result: {
 data: {
 me: {
 id: 1,
 email: "",
 role: "",
 verified: true,
 },
 },
 },
 },
 ]}
        • can give a mock value exactly same on query

    • Pagination

      • Mocking state like this
      • const my = 2;
      • const setPage = jest.fn();
      • React.useState = jest.fn().mockReturnValue([my, setPage]);

    • CategoryList

      • Nothing special use varialbes and get text the test name

  • Page Testing

    • Login

      • Need to testing variables of mutations but apollo mockprovider can't test like that, It's not giving enough detail contorll for unit testing
      • Use Mock Apollo Client
      • Login input "userEvent type, clear click ,etc.. make real events"
      • Don't forget it's not going to db

    • Create

  • E2E Testing

    • Cpypress

      • Can E2E test on mac windows Linux

      • Download Cypress

        • need to configure ts in cypress
        • Can cofigure setting on sypress.json

      • Download cypress testing libaray

        • For helping get a elements
        • When you using testing library for getting elements , need to break down chain a bit

      • window() get a object from active webpage

      • its() The objects porperties from have got before

      • Command Cypress Check Here

      • cy.wait("Can user wait time")Command Check here

      • Intercept

        • Spy or Mock the request and response Site

        • Ending the response with res.send()

          • Response steps immediately finished, and can't call anyother response handler

        • Dynamically Stubbing a response

        • Controlling the response

        • Create On Command

          • Command Docs
          • Cypress Can make a command or override command

        • Before Each

          • beforeEach()
          • use this hook it will fire before each testing super useful

        • Aliasing individual requests

          • Docs
          • Intercepting a response
          • Fixture (the data which is preset data)
          • Using fixture to send by res.send()

Owner Dash Board

  • Restaurants

  • Restaurant

    • Shows the dishes

    • Graph for monthly sales,dayly or year

      • Victory

      • PieChart

      • Victory Container

        • Kinda Parents Component !!(It will helps to inner victory rendering)
        • Basic of Dynamic Svg rederning
        • Service of Portal Container as well

  • Dish

Paddle

  • [] Need to do it later after deploying webpage

  • for paying and buying thigns providingPaddle

  • Sign in with Sass,and No new revenue !

  • On their homepage they suggest Catalog

    • Products "for paying once to use "
    • Subscription Plan "for Paying everysigle creteria cycle"

Order Page

  • Share the dish component with owner and client

  • give one more props for checking owner or client

  • keep in mind the dish page is shared on owner and client

  • when you pass the props have to configure those cases

Order Page RealTime

  • Setting SubsCriptions npm install subscriptions-transport-ws(Defends on your backend "graphql-ws or this one")Check here

  • Subscribe To More

Driver DashBoard

  • Google Map React

  • google-map-react는 Google Maps API의 작은 세트를 통해 작성된 - 구성요소입니다. Google 지도에서 모든 React 구성 요소를 렌더링할 수 있습니다.

  • Maps JavaScript API 생성 Google Colud API

사용자 인증 정보 사용자 인증 정보 만들기 - API 키 생성 Google Cloud Credential

  • Geolocation.watchPosition()

    • 장치의 위치가 바뀔 때마다, 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 등록합니다. Mdn-GeoLocation

    • navigator.geolocation.watchPosition(success[, error[, options]])

    • success콜백함수와 error콜백함수의 파라미터로 Position대신 GeolocationPosition, PositionError대신 GeolocationPositionError로 사용할 수 있습니다.

    • Maps

    • Reference of Map

      • panTo()
        • 지도의 중심을 지정된 LatLng로 변경합니다. 변경 사항이 지도의 너비와 높이보다 작으면 전환이 부드럽게 애니메이션됩니다.

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes