https://github.com/sabriyenohutlu/food-order-react

https://food-orderreact.netlify.app/
https://github.com/sabriyenohutlu/food-order-react

context-api css-grid javascript module-css react react-hooks react-router-dom

Last synced: 7 days ago
JSON representation

https://food-orderreact.netlify.app/

• Host: GitHub
• URL: https://github.com/sabriyenohutlu/food-order-react
• Owner: sabriyenohutlu
• Created: 2022-08-03T20:10:31.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-07T15:07:22.000Z (almost 2 years ago)
• Last Synced: 2024-07-21T22:01:46.152Z (5 months ago)
• Topics: context-api, css-grid, javascript, module-css, react, react-hooks, react-router-dom
• Language: JavaScript
• Homepage:
• Size: 9.58 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Food Order React Project - React İle Oluşturduğum Yemek Sipariş Projem

## Proje Özeti

  _Kodluyoruz_ _Front-End_ _bootcamp_ _bitirme_ _projesidir_

  

 Projeyi oluştururken iki branchta çalıştım.İlk olarak develop branchında geliştirme yaptım ardından main branchında son halini repoya ekledim. Branchlarda her değişiklik yaptığımda commit mesajı eklemeye özen gösterdim.  

     Projemde sayfanın header kısmında bulunan navigation bar ile react-router-dom kütüphanesi aracılığıyla sayfalar arası gezinilebilir .Ürünler sayfasında data.json dosyasındaki verileri ilgili componentte map fonksiyonu ile componente ekledim ve css grid düzeninde görüntüledim.Her bir ürünü sepete ekle butonuna tıklayarak contextApi aracılığı ile diğer bir component olan BasketCard componentine aktarıp görüntülemiş oldum.Basketcard-context dosyasında sepete ekle ve sil fonksiyonlarını useReducer hookunu kullanarak yazdım.Bu sayede hooktaki typeı kontrol edilerek istenilen add veya remove fonksiyonu çalışmış oldu.

     

![Food Order](src/assets/photos/foodorder.png)

![Food Order-Menu componenti](src/assets/photos/foodorder-foods.png)

## Kütüphaneler

+ React

+ React-router-dom v6.3

## State Yönetimi

+ ContextAPI

## Stil

+ Module CSS

### Projeyi oluştururken kullandığım kaynaklar

+ React - The Complete Guide (incl Hooks, React Router, Redux)-Udemy Maximilian Schwarzmüller

+ Academind Youtube Kanalı

+ [React-router-dom](https://reactrouter.com/en/main)

 ### Demo

 https://food-orderreact.netlify.app/