Code Monkey home page Code Monkey logo

frontend's Introduction


pipeline status Travis Status codecov

This project is the official Frontend codebase of kodilan.com which is a software related job board for Turkey.

Tech Stack

This project based on Vue stack and uses Vuex, Vue Router and Vue CLI.

Ajax Requests

To handle AJAX requests, we use axios. The data we fetch from the server will unlikely change during a user session, so we cache responses using an Axios Middleware called axios-extensions. This makes our app blazingly fast in between page changes. For the best user experience, we also maintain the scroll position between pages changes, thanks to Vue Router's Scroll Behavior feature.

SEO

Since kodilan.com is a Single Page Application job posting board, SEO plays a very critical role in our organic growth. To generate dynamic page title, keywords, meta tags and Open Graph tags, we use vue-meta from Nuxt team. On top of that, we use Prerender.io to serve SEO friendly HTML to search engines.

Running project locally

We use yarn as our package manager and you should have yarn installed on your machine to be able to run this project locally. After that you can run the following commands in order.

  • yarn install
  • yarn serve

CHANGELOG

Please take a look at the CHANGELOG file.

Contributors

More content

You can take a look the following video to deep dive into the codebase.

cover

frontend's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend's Issues

use-async-for-actions

 Use async/await for some http request 
 Use parameters for actions for creating axios url
 Make new line after per action

example:

async fetchFeaturedPosts({ commit }, params = { get: 3, is_featured: 1 }) { const result = await http.get('/posts', { params }); commit(constants.SET_FEATURED, result.data.data); return result.data; }

Backend is not open source

This is a very valuable project for Vue community. If you open backend to the world, ı think the project will have more power.

Clicking Verification Link for Second Time Returns Server Error

Describe the bug
Double-clicking email verification link while publishing job post returns an error.

To Reproduce
Steps to reproduce the behavior:

  1. Publish a job post.
  2. Go to email, click verification link.
  3. Then forget that you've clicked this link (what happened to me)
  4. Click again, then you will not see that it is under review, just returns an error.

Expected behavior
It should continue to say that it is pending for review.

Screenshots

Expected behavior: https://cln.sh/Qjnls5 (as it shows in first attempt)
Actual behavior for 2nd+ clicks: https://cln.sh/lYK2ei

Additional context
This is not a very important issue but as I don't get any email for the review process, I feel like my job post stuck on somewhere due to a bug. This one might increase the user experience.

İlan Ön İzleme

yeni bir ilan açılır iken, ön izleme yapıldığında consolda aşağıdaki hataları veriyor. ve yeni ilan açılamıyor.

TypeError: Cannot read properties of null (reading 'id') at a.showPreview (chunk-d38a3de8.be11c2e2.js:1:87824) at ne (chunk-vendors.25d9891d.js:18:11644) at HTMLButtonElement.n (chunk-vendors.25d9891d.js:18:13456) at HTMLButtonElement.Zo.i._wrapper (chunk-vendors.25d9891d.js:18:51712)

Searchable select component issues

We have a few issues with the searchable component.

  • We cannot search "İzmir" by typing "izmir"
  • Dark background in the placeholder text
    image
  • Last item is cut out when the dropdown placed above the input
    image
  • z-index issue in the responsive home layout
    image
  • English not found text
    image

/cc @erdoganbulut

Is responsive checked?

Firstly, sorry for my English. I'm still learning.

When I was check to website responsibility i detected a new bug. On devices with a maximum of 768px, this following page is crashed. https://kodilan.com/ilanlar/de-marke-labs-teknoloji-ve-yazilim-mid-level-ios-developer

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Link'
  2. Open to 'Developer Tools'
  3. Get Responsive Mode and set the device width of 768px or select ipad as device
  4. See error

Screenshots
image

Notice
I didn't check this bug on real devices. I Just checked on the simulators. So, may not have a problem. Thanks for all.

QA issue for v1.2.0

Could not remove existing post via mail actions.

Describe the bug
We posted an ad here We got an email according to the process then we hired someone now we want to remove the ad from the application, we send a request to remove the existing post but we still getting applications from the kodilan.com we doing the wrong thing or something wrong about mail actions?

Thanx.
cc: @orhankutlu

Yüklenme tarihinin etiketin üstüne taşması

Describe the bug
İlan listelemede ilanın eklendiği tarih etiketin üzerine taşıyor.

Expected behavior
İlan etiketlerinin tüm ilanlarda şirket adı ve şehrin altında yer alması veya etiketlerin length değerini alıp belli uzunluktan fazlaysa class atayıp şirket adı ve şehrin altına yerleştirmek sorunu çözecektir.

Screenshots
screenshot

Desktop (please complete the following information):

  • OS: [macOS]
  • Browser [chrome]
  • Version [87.0.4280.88]

Abone olma bölümünün zaman seçimi alanında text yanlış gözüküyor

Describe the bug
Abone olma bölümünde bulunan select' te üst üste aynı options seçildiği zaman yanlış davranıyor.
Örneğin iki kere 'haftalık' seçeneğini seçtiğim zaman 'Select option' yazısı yazıyor

To Reproduce
Steps to reproduce the behavior:

  1. Abone olma komponentine git
  2. Zaman seçimi bölümünden aynı seçeneği iki kere seç

Expected behavior
Seçilen seçeneğin text' inin yazması

Screenshots
Screenshot 2020-09-13 013301

Router operations

Is your feature request related to a problem? Please describe.
Tüm yönlendirme işlemleri router altındaki index.js kısmına yazılmış

Describe the solution you'd like
Router kısmı modüllere ayrılmış olsa kod okunabilirliği açısından daha iyi olurdu.Örnek vermek gerekirse; user ile ilgili işlemler router dizininin altındaki user kısmına,ilan ile ilgili işlemler router dizini altındaki ilan kısmına yazılabilir

The last updated date of posts seems as 'Invalid Date' on iOS

The last updated date of posts seems as 'Invalid Date' on iOS (On both Safari and Chrome).

After replacing the space character with 'T' in the last updated date value, works fine:

-  2020-08-28 16:21:55
+  2020-08-28T16:21:55

See: https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios/13363791#13363791

If you think this solution is acceptable, I can create a PR for you.

To Reproduce

  1. Go to any post using iOS
  2. See the last update date which is invalid

Expected behavior
The last updated date of posts should look like that 28 Ağustos 2020, but it looks as Invalid Date on iOS.

Screenshots

Smartphone

  • Device: iPhone 6S Plus
  • OS: iOS 13.6.1
  • Browser: Safari, Chrome

Mail Aboneliği olmasına Rağmen Mail Gelmiyor

https://kodilan.com/abone-ol üzerinden mail adresimle abone olmama rağmen haftalık mailler gelmiyor. Tekrar üye olmaya çalıştığımda ise zaten üyeliğiniz var uyarısı veriyor. Mail listesine mailim eklenmiş ancak mail servisi doğru çalışmıyor ya da mailler blackliste düşüyor anladığım kadarıyla.

Kullandığım mail soneki @hotmail.com

Is countries.js should change as locations.js?

I thought this because countries contain only cities. I found CountrySelect.vue file that imports countries.js.

countries.js

https://github.com/kodilan-com/frontend/blob/master/src/assets/data/countries.js

CountrySelect.vue

https://github.com/kodilan-com/frontend/blob/b4bf5d5763329ff2551820ef8599c28db4734990/src/components/shared/CountrySelect.vue

Anyway, if this data file will not contain any real county name, I think its name should be locations.js.

There is another reason to think about that. Almost all variable names contain the location word.

return this.showAll ? countries : this.availableLocations;
},
},
methods: {
...mapActions(['fetchAvailableLocations']),
handleChange() {
this.$emit('input', this.$refs.select.value);
},
},
created() {
this.fetchAvailableLocations();
},
};
</script>
<template>
<select
v-bind="$attrs"
ref="select"
@change="handleChange"
>
<option value="" selected>
Şehir seçiniz...
</option>
<option
v-for="location in locations"
:value="location"
:key="location"
>
{{ location }}
</option>

Responsive Design: Subscribe icon is not visible

For smaller screens and mobile devices, like iPhone 5+, we can make the logo font-size little bit smaller and fix the right spacing of + icon and then we can have enough room to show subscribe icon. Both of the icons can also be smaller.

This is a desktop screenshot. There we can see the "Abone ol" button.

image

And this is a screenshot from iPhone 5 and no subscribe button visible

image

Filtering does not work on 'tag' pages.

We have tag pages that work similarly to search pages. (ex: Frontend)

Search and tag pages work with the same logic, using the 'job-listing-with-filters' component. The widget area (for filtering) and job-listing works in 'job-listing-with-filters' component.

When you are on any label page, when you need to filter, you go out of the label page.
For example; If you enter the 'Frontend' tag page, mark Istanbul as the City in the filtering area and press the 'Ara(Search)' button, you will go to the search page for Istanbul. The same problem applies to all tag fields (keyword, city, and type of operation). Actually, it was supposed to filter inside the tag.

This bug is primarily a 'business' bug. First, we need to analyze this on the 'business' side.

Ideas are welcome.

Screenshot

On home page, doesn't scroll to related area when clicked any job period selector.

Describe the bug
On home page, doesn't scroll to related area when clicked any job period selector.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Home Page'
  2. Click on 'En son eklenen ilanlar -> Bu ay, Bu hafta or bugün'

Expected behavior
In development environment , can't see this problem. This error is seen on the live environment.

loading spinner appear like shifted left

Describe the bug
When I click remote button(as chip under the search text field) on home screen a loading screen appear as expected but spinner location is not center on screen. Spinner appearing like is shifted on left little bit.

To Reproduce

  1. Open web site home/main page
  2. Click on one of the chips that under the search text field,
  3. Then loading spinner appear like shifted left little bit

Expected behavior
When I clicked job post loading spinner appearing center on screen as expected.

Screenshots

Issue
Issue

Expected
Expected

Desktop:

  • OS: Kubuntu 20.04
  • Browser Firefox
  • Version 78.0.2 (64-bit)

Benzer ilanlar alanında eski ilanların pasifleştirilmesi

Is your feature request related to a problem? Please describe.
İlanları gezerken "benzer ilanlar" bölümü altında çok eski ilanlar görüntüleniyor. 10 aylık, 1 yıllık ilanların aktif olmasının mümkün olmadığını düşünüyorum. Bu durum "Benzer İlanlar" bölümünü tamamen anlamsız kılıyor.

Describe the solution you'd like
Benzer ilanları getirirken tarih filtresi uygulanabilir veya tarihe göre önceliklendirilebilir.

Describe alternatives you've considered
Alternatif olarak, ilanlar pasif olarak işaretlenebilir. Yani firma personel arayışından vazgeçmiştir ve artık ilana ihtiyaç duyulmamaktadır. İlan sitede yayınlanmaya devam edebilir, ancak pasif olduğu belirtilebilir. Bu ilanlar "Benzer İlanlar" arasında gösterilmez.

Additional context
İlan veren firmalardan belli sürelerde arayışının devam edip etmediği bilgisi alınabilir. Örneğin 1 ay sonunda ilan sahibine mail gönderip, İlanın X hafta sonra pasife alınacağı belirtilir. "İlan arayışınız güncel ise, tıklayın, ilanın süresini uzatın" gibi bir linkleme yapılabilir.

Local storage

After sending a listing, some information like email address, image URL and company name this information can be stored in local storage

Remove an existing job post

We created a job post that we no longer need or want to change it, and this is currently not possible on the interface.

We would like to have an Edit or Delete job post option.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.