FULL-STACK Proje Geliştirme Örneği (Kaynak Kod ile birlikte)

Elif Şirin
3 min readAug 10, 2021

--

Merhabalar, bu yazımda sizlere bir full-stack geliştirim sürecimden bahsetmek istiyorum. Yazılımcının bir proje geliştirim sürecinde hem back-end hem de front-end kısımlarında yer alarak kodlama yapmasına full-stack geliştirim denir.

Back-End Geliştirim

Visual Studio Environment kullanarak .Net ile C# dilinde bir geliştirim yaptım. Bu aşamada Microsoft SQL Server Management Studio ile bir veritabanı oluşturdum. Projemde kitapların site içerisinde sergilenmesi ve kitaplar arasında kullanıcının arama yapabilmesi şeklinde bir geliştirim yapmak istedim. Bu noktada aşağıda MSSMS ile aşağıdaki diyagramı oluşturdum.

Book Database Diagram

Bu diyagrama göre back-end kısmında bir geliştirim yaptım. Bu geliştirme aşamasında CRUD işlemleri için API geliştirimini tamamladım. Genel olarak bütün varlıklarımla ilgili GET, POST, UPDATE, DELETE işlemlerini başarılı bir şekilde kodladım. Ayrıca front-end kısmında kullanacağım bazı varlıklarım için özel GET işlemleri tanımladım. Bu işlemlerin hepsini github repomdaki back-end branch kısmında yer alan videomda görebilirsiniz. Bu videoda Swagger kullanılarak API çalışması gösterilmiştir. Ayrıca bütün kullanıcıların yapmasını istemediğim POST, UPDATE ve DELETE işlemlerinin çalışmasını Postman kullanarak Bearer token ile çalıştığını gözlemleyebilirsiniz :)

Books API
Genres API
Publishers API

Front-End Geliştirim

Visual Studio Code Environment kullanarak React ile bir geliştirim yaptım. Bootstrap framework kullanarak, tasarladığım web sitesini kolay bir şekilde “responsive” yani tablet, telefon, masaüstü bilgisayar ve her türlü ekran çözünürlüğüne duyarlı olarak ayarlanmasını sağladım. Front-end işlemlerimin hepsini github repomdaki front-end branch kısmında yer alan videomda görebilirsiniz.

Bootstrap ile tasarladığım web sitesi görünüşü
Veritabanımda bulunan kitapların genel görünümleri
Kitabı görüntüleme kısmı
Geliştirdiğim API kısmına göre Search verileri
Geliştirdiğim API kısmından çekilen Türler
Geliştirdiğim API kısmından çekilen Yayınevleri

Kaynak Kod (Back-end & Front-end) :

Kitaplar Hakkındaki Bilgilerin (resimler, hakkında yazısı vb.) Tamamı :

--

--