Opracowanie trybu wyszukiwania nieruchomości na mapie (React SPA)
Na stronie agencji nieruchomości zrealizowano możliwość klasycznego wyszukiwania mieszkań według filtrów oraz ich przeglądania na stronach. Zapoznać się z witryną można tutaj
Zadanie polega na rozszerzeniu funkcjonalności istniejącego SPA poprzez dodanie trybu przeglądania (wyszukiwania) na mapie. Zrzuty ekranu elementów designu nowego trybu dodaję w plikach. Przy projektowaniu designu starano się maksymalnie wykorzystać te same elementy funkcjonalne, które już istnieją w bieżącej realizacji.
Co należy zrobić:
- Dodaj przyciski do przejścia w tryb przeglądania na mapie (przy odświeżeniu strony użytkownik pozostaje w ostatnio wybranym trybie). Na desktopie przy przewijaniu w dół dodawany jest stały przycisk przejścia (jak na urządzeniach mobilnych)
- Dostosować istniejące komponenty wyboru miasta, kategorii, wyszukiwania lokalizacji do pracy w trybie mapy
- Zintegrować mapę https://www.maptiler.com/ do wyświetlania na niej mieszkań kółkami (przy bliższym zoomie - butelka z cenami)
- Dodaj przyciski do przejścia z powrotem w tryb przeglądania listą
- Przy zmianie parametrów wyszukiwania aktualizować mieszkania na mapie
- Przy odświeżeniu strony pozostawić użytkownika w tej samej pozycji na mapie (zobacz sdk MapTiler)
- Przy kliknięciu na kółko na mapie (lokacja mieszkania) - wyświetlać dialog z mini wersjami kart mieszkań. Może ich być kilka, dlatego obecny jest scroll. Po kliknięciu otwierać stronę mieszkania
Co jest dostarczane:
- Design stron w Figma
- Specyfikacja API Swagger
- Zrealizowane API do uzyskiwania GeoJSON dla mapy według filtrów
- Wsparcie techniczne backend developera
Technologie: Typescript, React, MUI, Styled Components, SWR, MapTiler SDK
На сайті агентства нерухомості реалізована можливість класичного пошуку квартир за фільтрами та їх перегляд по сторінках. Ознайомитися з сайтом можна тут
Задача полягає в розширені функціоналу існуючого SPA, шляхом додавання режиму перегляду (пошуку) на мапі. Скріншоти елементів дизайну нового режиму додаю в файлах. При розробці дизайну, намагалися максимально використовувати ті самі функціональні елементи, що вже є в поточній реалізації.
Що потрібно зробити:
- Додати кнопки для переходу в режим перегляду на карті (при оновлені сторінки користувач залишається в останньому вибраному режимі). На десктопі при скролі вниз, додається фіксована кнопка переходу (як на мобайлі)
- Адаптувати існуючі компоненти вибору міста, категорії, пошуку локацій для роботи в режимі карти
- Інтегрувати карту https://www.maptiler.com/ для відображення на ній квартир кружечками (при більш близкьому зумі - пляшка з цінами)
- Додати кнопки для переходу назад в режим перегляду списком
- При зміні параметрів пошуку, оновлювати квартири на мапі
- При оновлені сторінки залишати користувача в тій самій позиції на мапі (дивитися sdk MapTiler)
- При натисканні на кружечок на мапі (локація квартир(и)) - відображати діалог з міні версіями карток квартир. Їх може бути кілька, тому присутній скрол. По кліку відкривати сторінку квартири
Що надається:
- Дизайн сторінок у Figma
- Swagger специфікація API
- Реалізований API для отримання GeoJSON для мапи за фільтрами
- Технічна підтримка backend розробника
Технології: Typescript, React, MUI, Styled Components, SWR, MapTiler SDK
Załączniki 4
Wyniki pracy
Opinia zleceniodawcy o współpracy z Oleksii Fedorenko
Opracowanie trybu wyszukiwania nieruchomości na mapie (React SPA)Wszystko w porządku, praca została wykonana szybko, idziemy dalej, opinia zostanie uzupełniona po całkowitym zakończeniu pracy nad projektem
Opinia freelancera o współpracy z Maksim L.
Opracowanie trybu wyszukiwania nieruchomości na mapie (React SPA)Dziękuję za współpracę, jasne i klarowne zadanie, szybki feedback oraz rozwiązanie wszystkich kwestii. Polecam do współpracy.
-
Dzień dobry!
Jestem programistą fullstack z ponad 3-letnim doświadczeniem w pracy z React, Next.js, TypeScript, a także z bibliotekami do UI (MUI, Tailwind, SCSS). Mam doświadczenie w rozszerzaniu funkcjonalności istniejących projektów SPA, integracji zewnętrznych usług (API, mapy), a także pracy z Figma w celu dostosowania projektu. Jestem gotów pomóc Ci zrealizować zaktualizowany interfejs, skonfigurować filtry i zintegrować MapTiler do wyświetlania lokalizacji. W razie potrzeby mogę dostarczyć przykłady moich projektów.
Będę zadowolony, aby omówić szczegóły i rozpocząć współpracę!
Доброго дня!
Я – фулстек-розробник із понад 3-річним досвідом роботи з React, Next.js, TypeScript, а також із бібліотеками для UI (MUI, Tailwind, SCSS). Маю досвід розширення функціоналу існуючих SPA-проєктів, інтеграції сторонніх сервісів (API, карти), а також роботи з Figma для адаптації дизайну. Готовий допомогти вам реалізувати оновлений інтерфейс, налаштувати фільтри та інтегрувати MapTiler для відображення локацій. При потребі можу надати приклади своїх проєктів.
Буду радий обговорити деталі та розпочати співпрацю!
-
1457 56 0 Cześć, Maksym.
Zobacz, jak to zrealizowałem w soft.reelly.io. Mogę to wdrożyć na twojej stronie, więc porozmawiajmy.
Pisz na prywatne.
Привіт, Максим.
Гляньте як я реалізовував це в soft.reelly.io. Реалізувати на вашому сайті можу, тому давайте обговоримо.
Пишіть в особисті.
-
1441 21 0 1 Dzień dobry, już realizowałem coś podobnego tutaj -
https://www.flibco.com/en/bus_stops/bel
prawda, że tutaj używane były mapy google, ale ogólnie mam dużo doświadczenia w pracy z api map. piszcie, omówimy szczegóły
Доброго дня, я вже реалізовув щось подібне тут -
https://www.flibco.com/en/bus_stops/bel
що правда тут використовувались гугл карти, але в цілому маю багато досвіду роботи з апі мап. пишіть обговоримо деталі
-
3942 105 3 5 Witaj, Maksymie!
Dodam niezbędną funkcjonalność Maps na stronę.
Z poważaniem, Jurij.
Вітаю, Максиме!
Додам необхідний функціонал Maps на сайт.
З повагою, Юрій.
-
2575 67 1 3 Zaufaj profesjonalistowi z ponad 10-letnim doświadczeniem! Stawka i terminy są aktualne!
Będę wdzięczny za współpracę!
Doświadczenie w komercyjnej produkcji sklepów internetowych na CMS, portali biznesowych i stron korporacyjnych - 11 lat!
+CMS: WordPress(+Woocommerce)PrestaShop/Opencart/Joomla/Bitrix/MODX/DLE/Shopify
php/html/css/js/Mysql, PhotoShop/Figma
Przykłady prac (od zera pod klucz):
https://wildandorganic.com/
https://cryptosignals.org/
https://www.alternativemedicine.com.ua/
… https://silkkiss.ua/
https://nordtrade.online/
https://v12coffee.com.ua/franchise/
https://smrtalgo.com/
https://sengero.no/
https://beautybysim.no/
https://sonatagalleri.com/
https://www.emmanuel.com.ua/
https://www.onsitecomputersinc.com/
https://express-tehbud.com/
https://korostenporcelain.com.ua/
https://sladok.com.ua/
https://pricemds.com/
https://picupmedia.com/
https://www.serasar.com/
https://integrisit.com/
https://franklinitsolutions.com/
https://www.raebel-latzke.ch/
Доверьтесь профессионалу со стажем более 10 лет! Ставка и сроки актуальны!
Буду рад сотрудничеству!
Опыт коммерческой разработки интернет-магазинов на CMS, бизнес-порталов и корпоративных сайтов-11 лет!
+CMS: WordPress(+Woocommerce)PrestaShop/Opencart/Joomla/Bitrix/MODX/DLE/Shopify
php/html/css/js/Mysql, PhotoShop/Figma
Примеры работ ( с нуля под ключ):
https://wildandorganic.com/
https://cryptosignals.org/
https://www.alternativemedicine.com.ua/
… https://silkkiss.ua/
https://nordtrade.online/
https://v12coffee.com.ua/franchise/
https://smrtalgo.com/
https://sengero.no/
https://beautybysim.no/
https://sonatagalleri.com/
https://www.emmanuel.com.ua/
https://www.onsitecomputersinc.com/
https://express-tehbud.com/
https://korostenporcelain.com.ua/
https://sladok.com.ua/
https://pricemds.com/
https://picupmedia.com/
https://www.serasar.com/
https://integrisit.com/
https://franklinitsolutions.com/
https://www.raebel-latzke.ch/
-
1090 6 0 Dzień dobry. Zainteresował mnie Państwa projekt, wcześniej opracowywałem mapę z wyszukiwaniem aktywności, czatów, usług na mapie, integrowałem leaflet do tworzenia mapy.
Używałem technologii:
react + redux, typescript, MUI, styled components
Добрий день. Зацікавив Ваш проект, раніше розробляв карту з пошуком активностей, чатів, сервісів на мапі, інтегрував leaflet для створення карти.
Використовував технології:
react + redux, typescript, MUI, styled components
-
403 2 0 Witaj! Duże doświadczenie w tworzeniu podobnych SPA z złożoną logiką biznesową. Gotowy do pracy. Moja stawka to 10$/h
Вітаю! Великий досвід розробки подібних спа з складною бізнес логікою. Готовий до роботи. Мій рейт 10$/h
-
363 Witaj! Jesteśmy młodym zespołem deweloperów ixni.development i z radością jesteśmy gotowi podjąć się realizacji tego interesującego zadania. Z niecierpliwością czekamy na feedback i zainteresowanie)))
Вітаю! Ми молода команда розробників ixni.development і з радістю готові взятись за виконання цього цікавого завдання. З нетерпінням очікуємо на фідбек та зацікавленість)))
-
272 Dzień dobry, zapoznałem się z twoim tzw, dość obszerne zadanie, rozwijam aplikacje SPA na React/Vue 3, mogę spróbować pomóc w wykonaniu twojego zadania, pisz na priv
Добрый день, ознакомился с вашим тз, довольно объемная задача, я разрабатываю SPA приложения на React/Vue 3, могу попробовать помочь выполнить ваше задание, пишите в лс
Aktualne projekty freelancerskie w kategorii Javascript & Typescript
Next.js webgl websocket sqlite
90 PLN
Projekt wizualizacji danych kryptowalutowych. Wymagana jest rozbudowa grafiki WebGL: wyświetlanie niestandardowych świec 5s, danych historycznych i na żywo, danych WebSocket, renderowanie w canvas, skalowanie/przesuwanie/wybór. Architektura — hooks + ref-stan, dane z SQLite +… Javascript & Typescript ∙ 6 minut temu |
Skrypt do synchronizacji danych między CRM Altegio a Booksy
360 PLN
Trzeba opracować dwukierunkową integrację między Booksy (https://booksy.com/) i CRM Altegio (https://alteg.io/en/), aby podczas rejestracji klienta w Booksy automatycznie tworzył się lub aktualizował jego profil i rezerwacja w Altegio, a zajęte sloty od razu były blokowane w… Javascript & Typescript, Python ∙ 5 godzin 21 minut temu ∙ 3 oferty |
Poprawki na next.jsSzukamy developera z doświadczeniem. Potrzebne wprowadzenie kilku dużych i mniejszych poprawek na stronie next.js. Praca przez github. Głównie praca z interfejsem i restapi. Strona jest działająca, więc potrzebny jest developer, który niczego nie zepsuje i będzie pisał… Java, Javascript & Typescript ∙ 8 godzin 55 minut temu ∙ 16 ofert |
Dopracować skrypt generowania tekstów przez GPT — dodać asynchroniczność. NodeJS, LangChainIstnieje projekt na Node (Next.js), w którym za pomocą LangChain i GPT masowo generujemy teksty. Obecnie jest to generacja sekwencyjna, najpierw jeden, potem drugi, trzeci... jeśli wygenerować 5-10 tysięcy tekstów, trwa to długo. Należy dodać asynchroniczność, na naszym koncie w… AI i uczenie maszynowe, Javascript & Typescript ∙ 21 godzin 4 minuty temu ∙ 10 ofert |
Dokończyć pracę nad aplikacją internetową (React + Express)
135 PLN
Skonfigurować działanie Gemini API oraz bazy danych MongoDB, tak aby czat zapamiętywał kontekst, możliwe jest pobieranie go z informacji o użytkowniku (z bazy danych) i wykorzystywanie tego w stylu czatu GPT (może lepiej użyć samego czatu GPT, jeśli ma tę funkcję od razu)… Javascript & Typescript, Programowanie stron internetowych ∙ 23 godziny 42 minuty temu ∙ 8 ofert |