Git Product home page Git Product logo

eczane-frontend's Introduction

eczane-frontend

For english

Kullanılan Teknoloji ve Sistemler

  • React 17
  • LeafletJS
  • NodeJS v16
  • Prettier
  • ESLint
  • Husky
  • module scss

Kurulum

Repoyu klonlama

git clone https://github.com/acikkaynak/eczane-frontend

Gereksinimler

Proje için bilgisayarınızda NodeJS (v16) kurulu olmalıdır. Proje klonlandiktan sonra gerekli kütüphaneleri kurmak için:

npm install

Başlatma

Projeyi başlatmak için:

npm start

Docker

Aşağıdaki kısımdan portu, kendi bilgisayarınızda hangi portta açmak istiyorsanız onunla değiştirin. Örneğin: 3000

docker build -t eczane-frontend .
docker run -dp 127.0.0.1:<local_port>:80 --rm --name eczane-frontend eczane-frontend

Back-End Projesi: eczane-backend

Admin Front-End Projesi: eczane-admin-frontend

eczane-frontend's People

Contributors

burakkp avatar cagan123-alt avatar darksavci avatar erhansiraci avatar ferhatbostanci avatar furkanevin avatar gizembg avatar haksuman avatar halitpeker avatar nesimtunc avatar okankrdg avatar okazkayasi avatar onokumus avatar ouzkilic avatar soneryildirimx avatar unitythemaker avatar ygzaydn avatar

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

Watchers

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

eczane-frontend's Issues

City filters don't work on list view

When a city is selected on the list view, the expected behavior is to filter the hospitals and pharmacies according to the filtered city. However, it doesn't work and it still brings the same cities.
image
Requirements for good UX

  1. When a city is chosen, we should filter only the places from the selected city
  2. We should highlight the chosen city's button with a different color, so users would have the awareness of their action had a result
  3. When the user chooses a city, we should scroll the screen to the beginning of the cards list.

Address Information

Only some of address data shown in map view and the rest is shown on list view. There should be a details button which expand the card and shows address details.
image

image

image

Discord'a katılma

Selamun aleyküm.

Discord sunucularına katılmak için şöyle örkler/linkler oluşturabiliriz.

https:// url / discord

Bunu doğrudan katılma örkü/linki olarak kullanabiliriz. Olmadı katılmak için bir sayfaya dönüştürebiliriz.

GPS ile konum bilgisinden en yakın kuruluşlar listesi

GPS'ten alınan konumu ile en yakın hizmet görmek isteyen kullanıcı için bir buton olsun. Kullanıcı butona tıklarsa izin için browser pop-up'ı çıksın. Bu pop-up çıkmadan önce kullanıcıya onay için yönlendirileceği ve onaylaması gerektiği söylensin.

Onaydan sonra her sağlık kuruluşu çeşidinden en az bir tane gösterecek şekilde haritaya zoom girilsin. Liste görünümünde de gerekli filtre uygulansın. En yakın olanın rengi değişebilir veya yanıp sönebilir.

Eğer kullanıcı filtreleme yaparsa sadece filtre'deki kuruluş çeşidi görünsün ve ona göre tekrar zoom in yapılsın. liste görünümünde de filtreleme uygulansın

App.css temizlenmesi.

Projenin başından kalan bir çok id ile verilmiş styling var. Mümkün olanları module'lere taşıyalım. Kalanlar da toparlanabilir.

Lock Button

Haritadaki lock ve full screen butonları aşağıda da bulunursa daha user friendly olması sağlanabilir.

Not all data show up when a city selected

I clicked on Kahramanmaraş but not all data was visible on the map. Only one data in the center came. Since Kahramanmaraş is a big city with its districts, it is difficult to find the appropriate health institution by clicking the button. For example, if I was on Pazarcık and clicked Kahramanmaraş to see a health institution on there, I can not see any information related to pazarcık. Maybe two dropdown for filtering city and district can solve this problem.
image

enhancement: responsive design

Siteye telefondan girdiğimizde her şey iç içe geçilmiş oluyor ve bir çok işlevi kullanamıyoruz , Frontend ile düzeltilebilir

Screenshot_20230211-175115_Opera

buttons are enourmously big for desktop

This is a general issue for making a better design for the app. A design work is WIP, main goal is to fit everything to the page without scroll. Only list view cards will have a scrollbar.

Header and Footer size

From a user experience perspective, the header and footer size is too large (vertically), restricting the visibility and usage of the Map.

Tried resolutions (DESKTOP): 
- 1280x1024
- 1920x1200 
- 2560x1440

Note : The images belong to 2560x1440, but same UX issue in other resolutions

image


Elements in Header and Footer also need to be resized [Ref to : #69 ]

Header

image

Footer

image

Tried devices (iPhone 11-12-SE-XR) (safari and chrome):
Generally scrolldown issue (not enough space for touch area )

feat: improve city buttons

2023-02-11_22-24
These buttons have no affect.

  • Animation can be speed up or it can teleport to the location. It is a bit slow.
  • There should be less margin between buttons. Maybe flex-wrap can be used.
  • That feature worked recently, but while it was working it wasn't working in the list view, only worked in map.

feat: search bar

A search bar to filter things. By city or by name.

Assigned to: burakkp

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.