https://github.com/enesergun/cryptocurrency-tracker-react
https://github.com/enesergun/cryptocurrency-tracker-react
axios chartjs react react-chartjs-2 react-router-dom styled-components
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/enesergun/cryptocurrency-tracker-react
- Owner: enesergun
- Created: 2022-06-01T22:04:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-06T11:52:05.000Z (over 3 years ago)
- Last Synced: 2025-01-16T08:27:02.861Z (about 1 year ago)
- Topics: axios, chartjs, react, react-chartjs-2, react-router-dom, styled-components
- Language: JavaScript
- Homepage: https://cryptocurrency-tracker-react.vercel.app/
- Size: 682 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Demo
[Demoya buradan ulaşabilirsiniz](https://cryptocurrency-tracker-react.vercel.app/)
# Ekran Görüntüleri
# Proje Hakkında
Projede [coingecko.com](https://www.coingecko.com/) tarafından sağlanan Kripto Para birimlerinin listesini görebilir, liste içerisinde arama yapabilir, istediğiniz Kripto Para birimini yıldızlayıp izleme listesi oluşturabilirsiniz. Liste içerisinde yer alan Kripto Para birimine tıklayarak ilgili coinin detay sayfasına gidebilirsiniz. Detay sayfasında bu coin hakkında detaylı bilgiye ulaşabilirsiniz.
Projede boyutlarının küçük olması ve tarayıcıların bunları oluşturup derlemesi hızlı olduğu için SVG'ler kullanılmıştır. SVG'ler React Component şeklinde oluşturulmuş olup kullanıldığı yerde tarayıcının ayrıca istek atmasına gerek kalmadan kodun diğer satırlarını okuduğu gibi okumuştur ve dolayısıyla performans konusunda avantaj sağlamıştır. Aynı zamanda stillendirme için `styled-components` kullanılmıştır. Kullanılmayan Componentlerin CSS dosyalarını yüklemediği için performans arttırımında fayda sağlamıştır.
# Kurulum
1- Bir dosya oluşturun.
2- Oluşturmuş olduğunuz dosyanın dizininde terminali açın.
3- Terminale `git clone https://github.com/enesergun/ikinciel-project-react.git` komutunu girin.
4- Terminanele `cd ikinciel-project-react` komutunu girerek proje dizinine gidin.
5- Editörü açın.
6- Editörde terminale `npm install` yazın.
7- Terminale `npm start` komutunu yazarak projeyi çalıştırın.
# Kullanılan library/framework'ler
- animate.css: cross-browser, kullanıma hazır olma ve haftalık indirmesi `318.816` olması sebebiyle tercih edilmiştir.
- axios: Default JSON parsing yapılabilmesi sebebiyle tek satırda istek atabilme sebebiyle tercih edilmiştir.
- react-chartjs-2: chart.js ailesinden olan `react-charjs-2` kütüphanesi anlaşılması kolay ve haftalık indirmesi `570.716` olması sebebiyle tercih edilmiştir.
- react-route-dom: React projeleri geliştirilirken en çok kullanılan kütüphanelerden birisi olan `react-router-dom` projelere kolaylıkla entegre edilip route işlemlerini kolaylaştırmaktadır.
- styled-components: Scoped CSS mantığı ile CSS Module'ün öncülük ettiği component tabanlı unique className ile çalışır ve CSS-in-JS teknikleri içerisinde en çok kullanılan kütüphanedir. Stillendirme Componentleri propslar da alarak stillendirmeler kolaylıkla dinamik hale getirilebilmektedir. <