Calculator App

Hepimizin günlük olarak kullandığı program olan hesap makinesi, hem basit hem de pratik bir projedir. Bir referans olarak Vue ile geliştirilen projeyi örnek alabilirsiniz. Adeola Adeoti tarafından hazırlanan hesap makinesi uygulamasının kaynak kodunu buradan bulabilirsiniz.

Tech Stack

• Vue JS
• Tailwind CSS

Features

• Beautiful UI
• Dark mode / Light mode
• Responsive

Weather App

Bir hava durumu uygulaması oluşturduktan sonra, API’den veri alma, API’ye veri gönderme, verileri haritalama ve dinamik sayfalar oluşturma hakkında bilgi edinerek kendinizi geliştirebilirsiniz. Oluşturacağınız bu uygulamayı dağıtırsanız, sadece siz değil birçok kişi bundan faydalanabilir.

Tech Stack

• React.js
• Tailwind CSS
• Axios

Features

• Responsive
• 4 days Forecast
• Beautiful UI

Spotify 2.0

Kendi Spotify sürümünüz olan Spotify 2.0’ı oluşturabilirsiniz. Mümkün olduğu kadar çok özellik ekleyebilir ve tamamladıktan sonra paylaşabilirsiniz.
Kendi Spotify sürümünüzü oluşturmak, API’den nasıl veri alınacağını, dinamik rotaların nasıl ele alınacağını, kimlik doğrulamanın nasıl ele alınacağını öğrenmenize yardımcı olacaktır.

Tech Stack

• Next JS
• Tailwind CSS
• Axios
• Auth0

Features

• Responsive
• Light mode / Dark mode
• Beautiful UI
• Authentication
• Use profile
• Showing lyrics of a song

Movies App

Film ayrıntılarını, posterleri, fragmanları ve oyuncu kadrosunu göstermeniz gereken sıfırdan bir film uygulaması oluşturmak oldukça keyifli proje fikirleri arasında! ?

Bir film uygulaması oluşturmak, yeniden kullanılabilir bir bileşenin nasıl oluşturulacağını, API’den nasıl veri alınacağını, dinamik sayfaların nasıl oluşturulacağını öğrenmenize yardımcı olacaktır.

Tech Stack

• Vue JS
• Styled Component
• Axios
• TMDB API

Features

• Responsive
• Light mode / Dark mode
• Beautiful UI
• Show movie ratings
• Show movie casts/trailer
• Show movies based on genre

Youtube UI Clone

Grid, flexbox ve handling states hakkında bilgi edinmek istiyorsanız YouTube kullanıcı arayüzünü klonlamanız oldukça faydalı olacaktır.

Tech Stack

• Svelte
• SMUI (Svelte Material UI)

Features

• Responsive
• Beautiful UI

Chat App

Firebase, Firestore, Real-time veritabanı hakkında bilgi edinmek istiyorsanız bu proje tam size göre ?

Sohbet uygulaması oluşturmak, firebase, kimlik doğrulama, firebase hakkında bilgi edinmenize yardımcı olabilir.

Tech Stack

• React.js
• Firebase
• Material UI

Features

• Responsive
• Real time chat
• Dark mode / Light mode

SaaS landing page

Bir açılış sayfası oluşturmak, frontend becerilerinizi geliştirmek için size çok yardımcı olacaktır.

Saas için bir landing page geliştirmek, grid, flexbox ve responsiveness becerilerinizi geliştirmenize yardımcı olabilir.

Tech Stack

• Vue
• Styled Component

Features

• Responsive
• Beautiful UI

Task management app

Bu proje diğerlerine oranla muhtemelen daha fazla zamanızı alacaktır. Yalnızca yapılacaklar, takvim ve bazı belgeler içeren bir görev yönetimi ile web sitesi oluşturabilirsiniz.

Bir görev yönetimi uygulaması oluşturmak, durumlar, indirim, yerel depolama ve kimlik doğrulama hakkında bilgi edinmenize yardımcı olabilir.

Tech Stack

• Next.js
• Tailwind CSS
• Auth0
• Markdown

Features

• Responsive
• Adding Todos
• Creating Wikis ( using markdown )

eCommerce website UI

Bir e-Ticaret web sitesinin kullanıcı arayüzünü geliştirerek, yeniden kullanılabilir componentler, state management ve props kullanımı tarafında kendinizi geliştirebilirsiniz.

Tech Stack

• Svelte
• Sveltestrap

Features

• Responsive
• Beautiful UI

Admin Dashboard

Yönetici paneli, web sitesinin yöneticisinin/sahibinin web sitesini yönettiği yerdir. Bir yönetici panelinin kullanıcı arayüzünü oluşturmak, birçok bileşen türü oluşturmayı, bunları uygun yerde yeniden kullanmayı ve bir sayfayı responsive hale getirmeyi öğrenmenizi sağlayacaktır.

Tech Stack

• React.js
• SCSS
• React Bootstrap

Features

• Responsive
• Beautiful UI
• Light mode / Dark mode