Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yaserdemet/react-getirclone

axios carousel-slider material-ui react-components react-hooks

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/yaserdemet/react-getirclone
Owner: yaserdemet
Created: 2022-07-29T13:00:20.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2022-10-02T12:47:26.000Z (over 2 years ago)
Last Synced: 2023-03-04T19:33:30.096Z (almost 2 years ago)
Topics: axios, carousel-slider, material-ui, react-components, react-hooks
Language: JavaScript
Homepage: react-getir-clone-beta.vercel.app
Size: 910 KB
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        ## Description

![Animation](https://user-images.githubusercontent.com/99739515/186932343-eaeeb885-ef78-4577-ae5e-24777bcb0a04.gif)

[🛒click here to see page](https://react-getir-clone-beta.vercel.app

)

## Problem Statement

- This project aims to create Getir's Landing Page with Material UI.

### At the end of the project, following topics are to be covered;

📌 Props and State Logic

📌 Js iteration methods

📌 Conditional Rendering

📌 React Flag Select

📌 React Hooks

📌 3rd Part Libraries ( Toastify, Axios )

📌 Helmet for SEO optimization 

📌 Material Ui (Slider,AppBar etc)

📌 React Bootstrap

📌 Deployment with Vercel and Netlify

### For Seo optimization Helmet Hook can be used in multiple page. But meta itemprop can be enough.

```

  

  

```

### To use React Select Flag;

- Hold a state selected country,

  - create an object as key use its abbreviation and as value its code

```

  const [selected, setSelected] = useState("TR");

  const phones = {

    US: "+1", CL: "+56",  CO: "+57",  AR: "+54",  MX: "+52", 

    IN: "+91",   IT: "+39",  ES: "+34",   FR: "+33", BR: "+55"

    TR: "+90",   CA: "+1", CN: "+86",    RU: "+7" 

  };

  

      setSelected(code)}

            //* burada seçilen bayrağı set ediyor.

            selected={selected}

            className ="p-2"

          />

          

 ```