mavidurak / orientation-front-end Goto Github PK

Her kullanıcı şimdilik yeni bir content oluşturabilir(ilerleyen zamanlarda bunun yetkilendirilmesi yapılmalı). Bu amaçla contents/new adresine sahip content oluşturma sayfası eklenmeli

Bir kullanıcı herhangi bir contentin altındaki Status kısmında Watched,Want To Watch... gibi seçenekleri ve Yıldızları kullandığında veritabanımızdaki wanted_content tablomuza kullanıcının bu hareketlerini kaydetmemiz gerekiyor bu kısım çalışmıyor.

page bilgisi veritabanına eklenmeli
updatedAt bilgisi sayfada yer almalı

Yaptığın review, puanlama ve istek listesinin görüneceği sayfa

demo için tıklayın

Arkadaşlarımı görüntüleyebileceğim ve onlara mesaj gönderebileceğim sayfa kodlanmalı

Gerekli topluluk bilgilerini girebilen herkes yeni bir topluluk oluşturabilir bu yüzden communities/new adnı bir url'e sahip sayfa oluşturlumlalı ve api'a istek attıktan sonra yeni topluluğun sayfasıne yönlendirilmeli

Demo

Kullanıcı /forgot-password sayfasına email adresini girer ve girdiği adrese a-posta gönderilir. Gelen e-postadaki butona tıklanınca kullanıcı yeni şifresini belirleyebileceği sayfaya yönlendirilir, kullanıcı şifresini girer ve yenile tuşuna basınca api'a istek atarak şifre güncellenir.

Şifremi unuttum emil gönder:

src/views/guests/ForgotPassword.vue sayfasında kullanıcının girdiği email adresi body içinde api/authentication/forgot-password adresine gönderilemeli ve bu sayede şifremi unuttum maili alabilmeli.

Yeni şifre belirleme:

Şifre güncellemesi yapılabilecek /reset-password?token=value adresli, içinde şifre ve şifre tekrarı girilebilecek inputlar olan bir sayfa oluşturulmalı, url'den query olarak gelen token ve body içine password eklenerek api/authentication/reset-password?token=value şeklinde istek atılmalı.

Görev Tanımı

Tartışmanın başlığını, metnini ve yapılan yorumları gösterebileceğimiz ve markdown formatıyla yorum yapabileceğimizbir sayfa. Url'den gelen discussionId ile api'a istek atar ve gelen veriyi rander eder.

Komponetler ve View'lar

• Komponentler
  • Comments: Dışarıdan tüm yorumları alır ve her yorum için Comment oluşturur.
  • Comment: Yorum bilgileri görüntülenir.
• View
  • Discussion: path: /communities/:communityId/:discussionId tartışmanın sergileneceği sayfa

Dosya Yapısı

   ...
    ├── views
    │   ├── ...
    │   └── Discussion.vue
    ├── ...
    ├── components
    │   ├── ...
    │   └── Comment // klasör
    │              ├── Comments.vue // Comment kullanarak birden fazla yorumu listeler
    │              └── Comment.vue // sadece yorum bilgisi
   ...

Örnek

Demo için tıklayın 1

Demo için tıklayın 2

Görev Tanımı

Topluluğun afiş, isim, sahib(ler)i, detayı, postlar gibi bilgilerinin gösterileceği sayfa hazırlanmalı

Komponetler ve View'lar

• View
  • CommunityDetail: path: /communities toplulukların listeleneceği sayfa

Dosya Yapısı

   ...
    ├── views
    │   ├── ...
    │   └── CommunityDetail.vue
   ...

Veriler

community: {
  id: number,
  name: string,
  image: string, // image url
  members: number,
  category: string,
  tags: [string],
  rules: string,
  createdAt: date,
  updatedAt: date,
}

Örnek

En allta bulunan Discussion Board kısmına Posts yazılmalı ve içeriği boş bırakılmalı

Demo için tıklayın

Görev Tanımı

İçeriğin afiş, isim, sahibi, detayı, incelemeleri gibi bilgilerinin gösterileceği sayfa hazırlanmalı

Komponetler ve View'lar

• Komponentler
  • WantedButton: içeriklerin okunma, isteme, bitti vb. istek statülerinin seçileceği buton
• View
  • ContentDetail: path: /contents/:id, Sayfada içerik bilgileri object olarak tutulmalı ve listelenmeli

Dosya Yapısı

   ...
    ├── views
    │   ├── ...
    │   └── ContentDetail.vue
    ├── ...
    ├── components
    │   ├── ...
    │   └── WantedButton.vue
   ...

Veriler

content: {
  id: number,
  name: string,
  image: string, // image url
  rate: number,
  description: string,
  user: {
    name: string,
  },
  createdAt: date,
  updatedAt: date,
}

Örnek

Review kısmının sadece header kısmı olmalı.

Demo için tıklayın

src/views/guests/register.vue sayfasında submit işlemi başladığında api/authentication/register adresine istek atmalı ve olumlu dönüt varsa kullanıcıyı src/views/guests/login.vue( '/login' ) sayfasına yönlendirmeli.

API hata mesajı dönderiyorsa bu kullanıcıya düzgün bir şekilde gösterilmeli ve yönlendirme yapılmamalı.

src/views/home/ContentDetai.vue sayfası url'den gelen id'ye göre /api/contents/:id adresinden content bilgilerini cekmeli ve bilgileri sayfaya işlemeli.

İçerik detay sayfasında inceleme yapmamızı sağlayacak bir tuş eklenmeli ve tıklandığında review sayafasına yönlendirmeli, başarıyla inceleme oluşturulursa tekrardan içerik detay sayfasına yönlendirilmeli.

İçerik detay sayfasında, ona ait ait tüm incelemelerin listelenmeli.

Syfa çalışmıyor ve API aşağıdaki gibi hata dönüyor.

{
   "errors":[
      {
         "message":"WHERE parameter \"discussion_id\" has invalid \"undefined\" value"
      }
   ]
}

Muhtemelen API'dan gelen veri içinde değişiklik yaptığımız için kod çalışmıyor.

Topluluk detay sayfasında topluluk bilgilerinden sonra topluluk içinde yapılan tartışmaların sedece başlık, tarih ve yazar bilgisini gösterecek ve tıklandığında tartışma detay sayfasına gidecek şekilde tartışmalar listelenmeli

Görev Tanımı

Toplulukların bilgilerinin küçük bir şekilde gösterileceği, arama yapılabilecek listeleme komponenti yazılmalı.

Komponetler ve View'lar

• Komponentler
  • CommunityList: topluluklar dizisi tutmalı ve bilgileri alt komponente göndermeli
  • CommunityDetailSmall: Dışarıdan topluluk bilgisi almalı ve verilen bilgileri görselleştirmeli
• View
  • Communities: path: /communities toplulukların listeleneceği sayfa

Dosya Yapısı

   ...
    ├── views
    │   ├── ...
    │   └── Communities.vue
    ├── ...
    ├── components
    │   ├── ...
    │   └── CommunityList // klasör
    │              ├── CommunityList.vue // CommunityDetailSmall kullanarak birden fazla topluluğu listeler
    │              └── CommunityDetailSmall.vue // sadece topluluk bilgisi
   ...

Veriler

community: {
  id: number,
  name: string,
  image: string, // image url
  members: number,
  createdAt: date,
  updatedAt: date,
}

communityes: [
  community,
  ...
]

Örnek

Burada CommunityList adlı komponent, CommunityDetailSmall'lerden oluşan bir listeleme komponentidir.Arama inputuna isim giriliyorsa sadece girilen isimdeki topluluk(lar) görüntülenmeli

Demo için tıklayın

mavidurak/orientation-api#52

API'dan düzgün bir şekilde veri geldiği halde sayfa çalışmıyor.

Router'a yeni bir path eklenerek '/' adresine gelen istekler '/login' adresine yönlendirilmeli.

Sayfa yüklendiği anda eğer localStorage'da x-access-token isminde bir item varsa ve bu token ile api/authentication/me'ye istek attığımızda olumlu dönüş alıyorsak kullanıcı /home adresine yönlendirilmeli.Submit işlemi yapıldığında api/authentication/login adresine istek atılmalı ve olumlu sonuç dönüyorsa /home adresine kullanıcı yönlendirilmeli eğer olumsuz bir cevap geliyorsa hata kullanıcıya gösterilmeli.

LocalStorage'da x-acces-token item'ı varsa NavBar'da login ve register sayfaları gösterilmemeli

Görev Tanımı

İçeriklerin bilgilerinin küçük bir şekilde gösterileceği listeleme komponenti yazılmalı.Komponentin sağ tarafında bulunan istek butonu da ayrı bir komponent olarak yazılmalı.

Komponetler ve View'lar

• Komponentler
  • ContentList: içerik dizisi tutmalı ve bilgileri alt komponente göndermeli
  • ContentDetailSmall: Dışarıdan içerik bilgisi almalı ve verilen bilgileri görselleştirmeli
  • WantedButton: içeriklerin okunma, isteme, bitti vb. istek statülerinin seçileceği buton
• View
  • ListContent: path: /contents içeriklerin listeleneceği sayfa

Dosya Yapısı

   ...
    ├── views
    │   ├── ...
    │   └── ListContent.vue
    ├── ...
    ├── components
    │   ├── ...
    │   ├──  WantedButton.vue
    │   └── ListContent // klasör
    │              ├── ContentList.vue // ContentDetailSmall kullanarak birden fazla içeriği listeler
    │              └── ContentDetailSmall.vue // sadece içeriğin bilgisi
   ...

Veriler

content: {
  id: number,
  name: string,
  image: string, // image url
  rate: number,
  user: {
    name: string,
  },
  createdAt: date,
  updatedAt: date,
}

contents: [
  content,
  ...
]

Örnek

Burada tüm resim ContentDetailSmall adlı komponent iken numaralı yerler ContentDetailSmall komponentidir.

Demo için tıklayın

Proje daha iyi bir SEO ve CDN cache'lemesi için Client Side Rendering'den Server Side Rendering'e geçirilmeli. Bunun için Nuxt.js kullanılabilir.

/src/views/home/Communities.vue sayfasında api/communities adresine istek atılmalı ve gelen veri CommunityList komponentine gönderilerek topluluklar dinamik bir şekilde gösterilmelidir. Gelen verinin keylerine göre mevcut komponentler in düzgün çalışabileceği şekilde değişiklik yapılmalıdır.

ContentList komponentinde /api/contents adresine istek atılarak tüm contetler getirilmeli ve veriler ContentDetailSmall komponentinin içine gönderilmeli ve dinamik olarak render yapılmalı.

WantedButton komponentinde bir istek tipi seçildikten sonra(halihazırda select adıyla bir emit yapılıyor) ContentDetailSmall componentinde /api/wanted-contets adresine istek atılarak content isteklere eklenmeli eğer zaten ekliyse güncelleme yapılmalı

Topluluk detay sayfasında yeni tartışma başlatmak için bir tuş bulunmalı ve tıklandığında tartışma oluşturmamızı sağlayacak sayfaya yönlendirmeli ilgili bilgiler girildikten sonra oluştur tuşuna basıldığında başarılı bir şekilde kayıt oluşturulduysa kullanıcı tartışma detay sayfasına yönlendirilmeli

src/home/Review.vue sayfasının content bilgilerini url'den gelen content idsine göre api'a istek atmalı ve gelen veriyi sayfaya işlemeli.

Review işlemi tamlandığında doldurulan alanları api'a göndermeli ve api'ın cevabını kullanıcıya sweet alert ile göstermeli.

Mesajlaşma kısmına girebilmek için ilk önce arkadaşlarımızı görüntüleyebilmemiz gerekli

şu anda hiçbir komponent üzerine tıklandığında ilgili yere girmiyor. Örnek olarak explore sayfasındaki ContentIcon 'a tıklandığında kullanıcı ContentDetail sayfasına yönlendirilmeli.

Bunun gibi tüm olaylar tekrardan yapılandırılmalı ve ana ekranda bulunan linkler(router-link) kaldırılarak kullanıcı adım adım istenilen yere gönderimleli.

Görev Tanımı

İçeriklere inceleme yapılabilecek sayfa hazırlanmalı

Komponetler ve View'lar

• View
  • Review: path: /review, Contentin temel bilgileri gösterilmeli, review sonucunda alınan bilgiler console.log yapılmalı

Dosya Yapısı

   ...
    ├── views
    │   ├── ...
    │   └── Review.vue
   ...

Veriler

content: {
  id: number,
  name: string,
  image: string, // image url
  rate: number,
  user: {
    name: string,
  },
},
review:{
  contentId: number, // kullanılan content'in id'si
  rete: number,
  tags: [string],
  reviewContent: string, // yapılan inceleme(ortada bulunan inputun verisi)
  isSpoiler: boolean,
  reviewDate: date, // review yapılan tarih
}

Örnek

Review kısmının sadece header kısmı olmalı.

Demo için tıklayın

/src/views/home/CommunityDetail.vue sayfası api'a bağlanmalıdır. Frontend'de communities/:id adresine gelen isteklerdeki id parametresi alınmalı ardından api/communities/:id adresine istek atılarak veritabanında topluluk bilgisi çekilmeli ve /src/views/home/CommunityDetail.vue sayfasındaki bilgiler dinamik olarak atanmalıdır

Görev Tanımı

Sadece afişler görünecek şekilde tüm içzeriklerin sergileneceği sayfa.

Komponetler ve View'lar

• Components
  • ContentIcon : içeriklerin sadece afişlerini gösterecek ve üstlerine geldiğinde tooltip çıkararak diğer bilgileri gösterecek.Dışarıdan content alacak
  • ContentIconList : content iconlarının sıralı olarak gösterileceği komponent.Dışarıdan content dizisi alacak
• View
  • Explore: path: /explore, birden fazla ContentIconList'ın sergileneceği sayfa

Dosya Yapısı

   ...
    ├── views
    │   ├── ...
    │   └── Explore.vue
    ├── ...
    ├── components
    │   ├── ...
    │   └── ContentIcon // klasör
    │              ├── ContentIcon.vue
    │              └── ContentIconList.vue
   ...

Veriler

content: {
  id: number,
  name: string,
  image: string, // image url
  rate: number,
  user: {
    name: string,
  },
},
contents: [ content ]

Örnek

Üzerine gelinmiş hali

Demo için tıklayın

Aşağıda bulunan 404 sayfası tasarımlarından en beğendiğinize "👍" emojisi koyarak oylamaya katılabilirisiniz.