Show your code Saturday для Front-end! Діліться кодом своїх проєктів або версткою

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, спільното!

Ми вирішили запровадити нову традицію, аби ви могли ділитися власними проєктами, а також давати одне одному фідбек щодо своїх напрацювань.

Для цього пропонуємо публікувати в коментарях скриншот вашої фронтенд-верстки і код проєкту в будь-який день, а щосуботи ми обиратимемо найцікавіший з варіантів та розповідатимемо про нього!


А наш активний учасник спільноти Максим Рудний зробить відео код-рев`ю вашого проєкту 😉

Ось тут ви можете переглянути щотижневі код-рев`ю:


Діліться у коментарях скриншотами верстки свого фронтенду та кодом власних проєктів!

📸 Щоб додати фото, завантажте його на Imgur і вставте посилання (на сам файл) у свій коментар. Для правильної підсвітки коду радимо ознайомитися з гайдом.

👍ПодобаєтьсяСподобалось3
До обраногоВ обраному3
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Привіт! Буду вдячний, якщо розглянете мій невеликий пет-проект. Cookbook Collection — це веб-додаток для керування кулінарними рецептами. Користувачі можуть зберігати рецепти в різних категоріях, редагувати їх. Програма підтримує авторизацію та збереження унікальних даних для кожного користувача, включаючи функціональність завантаження аватарів та зображень для рецептів.
GitHub: github.com/...​skorikov/Homemade-recipes

Вітаю, пропоную на ревʼю проєкт онлайн кінотеатру, на говловній сторінці відображаються картки з фільмами у рандомному порядку, які можна додати до свого списку перегляду. Також списки популярних зараз фільмів за типом: у кіно, стрімінг та ті, що набирають популярність. Кожна картка містить короткий опис стрічки, список акторів, трейлер та список торентів, звідки можна завантажити або ж дивитись онлайн безпосередьо в браузері стрімлячи цей торент.

Проєкт створено з використанням NextJS, React Query, React Virtuoso (для рендеру «безкінечних списків»), shadcn/ui, NestJS, WebTorrent, The Movie DB API

GitHub: github.com/...​oisy5ilence/movie-advisor, github.com/...​oisy5ilence/tracker-proxy
Кінотеатр: entertainment.vercel.app

PS: Хост для WebTorrent — Raspberry Pi 4, тож відео може завантажуватись близько хвилини

Привіт

Проекту вже 8 років і він доволі популярний зараз майже 8к зірок на гітхабі:
github.com/...​aphql-kit/graphql-voyager

Коли починав його робити мені допомагав мій друг який спеціалізуєтесь на фронтенді.
Але в данний момент розробляю його тільки я і хоча програмую я давно але знання фронтенду в мене дуже поверхневі.
Розробляю коли є вільний час і наразі хочу закінчити наступні таски:
* Повністю перейти на систему стилів від mui.com і викинути всі СSS файли що залишились
* Закінчити переписувати React компоненти з класів на функції
* Виділити функціонал в хуки
+ Дуже багато ідей нового функціоналу але хочу спочатку привести UI в норму

Буду радий вислухати ваші поради по цьому проекту.
Особливо цікаві поради про те як зробити проект легшим в розробці, наприклад які готові компоненти крім MUI я можу використати.
Також цікаво почути поради що до мої е2е тестів на Playwright бо це мій перший досвід тестування фронтенду.

Привіт, якщо ви розглядаєте невеликі бібліотеки. Було би дуже цінно, отримати ваш фідбек по ній.
Бібліотеку робив для себе, щоб полегшити роботу з @tanstack/react-query. Там є кастомні хуки для запитів, також вони автоматично оновлюють кеш, після мутацій і також є можливість відмінити останній запит. Там є невеличкий приклад використання, документація згенерована автоматично, в майбутньому ще покрию все це тестами.
npm: www.npmjs.com/...​ckage/react-query-manager
github: github.com/...​NgeNs/react-query-manager

Дякую.

Доброго дня. Прошу переглянути мій проект. Це проект створений на базі AI — суть цієї апки зберігання докуменів і нотаток, документ можна зберегти і за допомогою LLM чатитись — тобто задавати питання по документу чи шукати шось конкретне. Також із цікавого є веторний пошук — який працює теж на базі AI а тобто шукає максимальні схожості в векторах(текст перетворюється в машинне представлення даних — вектори) — тобто це так сказати «розумний» пошук що є краще ніж просто пошук по тексту.
Посилання на гітхаб : github.com/teomikitenko/big-brain
Ось сам проект: big-brain-ecru.vercel.app

Вітаю. Огляд вашого проєкту можна знайти за посиланням на DOU dou.ua/forums/topic/50257 Дякую що поділились цікавим проєктом. В коментарях під відео на YouTube писали про проблему на мобільних пристроях. Рекомендую глянути.

Вітаю. Розбір вашого проєкту можна знайти тут dou.ua/forums/topic/50363. Дякую що поділились кодом. Успіхів у навчанні та розвитку.

Вітаю, натрапив на твої відео на ютубі і зацікавився, тому пропоную угоду. З мене підписка і лайк на 10 останніх відео, а з тебе код-ревью) Це вебсайт особисте портфоліо (більш навіть схожий на інтерактивне CV). Стек доволі стандартний: NextJS, Three.JS (для 3д моделі), Tailwind. Хотів би попросити тебе подивитись на нього, зробити код ревью, можливо дати якісь коментарі по можливостям рефакторингу. Буду вдячний за фідбек, ось репозиторій:
gitlab.com/...​illyas2010/portfolio-site
а тут він в проді:
www.illia-hloza.pp.ua.

Вітаю. Дякую що поділились своїм проєктом. Огляд готовий. Можливо трохи жорсткий, але і позиція у Вас не початківець, а Senior, тому вимоги відповідні. Стаття на DOU dou.ua/forums/topic/50527 та більш детально у відео — .

Дуже хочу почути відповіді на задані у відео питання. Сподіваюсь огляд та поради будуть корисними.

Вітаю, дякую за огляд, відповів на всі питання під відео. До критики нормально відношусь — те із чим згоден буду виправляти, про інше можна подискутувати)

Головне щоб критика була конструктривна та корисна. Коментарів під відео не знайшов. Можливо YouTube приховав. Я про це говорив у відео. Якщо є можливість, можете перевірити або продублювати?

Привіт, прошу переглянути мій пет проект. Все починалось з фронту на нексті і бекенду на експресі, але безкоштовний деплой на Render дуже повільний, тому вирішив переробити з використанням серверних компонентів і заодно спробувати app router. Також в процесі розробки застосунок на React-Native-CLI, який також вирішив переробити після розчарування з expo. Основне чому я хотів навчитися в цьому проекті — це відправка замовлення на пошту. Проект ще не завершений повністю, є багато ідей. Хочеться отримати рев’ю, щоб побачити, чи рухаюсь я в правильному напрямку)

github.com/...​tion/pizza-app-router.git
nostrra-pizzza.vercel.app

Вітаю. Огляд на Ваш проєкт уже на каналі —

Привіт! Почав вчити React Native. Це мій перший проєкт — простий розклад студента. Хоч це і проста штука, вона дуже допомогла мені, коли я вчився в коледжі, тому я вирішив зробити спрощену копію. Ще не зроблена функціональність додавання домашніх завдань, але вже непогано.

CODE: github.com/ZAKHAROV-Artem/timetable

Привіт, я пару тижнів писав за фінансовий проєкт для відстаження витрат і надходжень (Explend App) який робив, ну і релізнув сьогодні MVP версію. Чекаю на відео з коментарями щодо проєкту. Дякую. Планую розвивати, додавати платні функції через Stripe, ну і ще багато ідей. Почав робити 19 травня, по 6-10 годин кожен день, тиждень було шо нічого не робив (розійшлись з дівчиною і вигорів). Користуюсь моментом і скажу що, недавно втратив роботу і от шукаю нову на позицію fullstack/frontend.

Лінк на портфоліо де є лінки на деплоймент і гітхаб репо.
volodymyr-g.vercel.app/portfolio#explend-app

Огляд проєкту уже на каналі. Поки що доступний лише спонсорам каналу. Скоро буде публічним.

Привіт! Як буде час, подивись на мій маленький сайтик-портфоліо написаний на Next.js 15rc, React Three Fiber (альфа версія), Firebase як бд, Redux і там ще декілька не дуже важливих бібліотек.

З цікавого (або те на що можливо поскаржитись) рекомендую зайти в app/ui/Home/Home.tsx, і глянути як я там використовую IntersectionObserver для моніторингу юзер скроллу.
Ну і звісно подивись хоч трішки на компонент app/ui/Home/Map де є 3D модельки, анімації за допомогою React Spring, навіть трішечки кастомних шейдерів там є.
Більш детальна документація є в Readme md

Дякую за приділений час

github.com/wecreus/theCommoner-next
commoner.vercel.app

Привіт. Одного вечора вирішив спробувати зробити клон Minesweeper з Windows, щоб попрактикуватись. Пет проект трохи виріс і тепер там 4 гри — сапер, тетріс, 2048 та судоку. Проект написаний на Vue 3, якщо Ви таке розбираєте

Проект: d4st1n.github.io/playground-test-project
Github: github.com/...​N/playground-test-project

Привіт. Я не пишу на Vue, тому нічого погано сказати не можу. Чи робити огляд подумаю, гляну на проєкт. По коду то нічого не скажу, але в загальному може щось і знайду.

Привіт, для власного розвитку та задоволення, я вирішив створити пет-проект — веб-месенджер на основі React та Firebase. Ідея полягала в тому, щоб спроектувати простий та зручний інструмент для обміну повідомленнями в реальному часі, який би включав всі основні функції сучасних месенджерів, поки без дзвінків. Я старався створити структуру, яка була б зручною для мене, використовуючи Tailwind CSS для стилізації та TypeScript для більшої надійності коду.

Робота
GitHub

Розбір проєкту можна знайти за посиланням dou.ua/forums/topic/49390

Вітаю. Сьогодні вийде розбір Вашого коду. Перш ніж я опублікую відео, попрошу видалити з GitHub .env файл з API ключем до firebase. Це критична вразливість яка може коштувати Вам дуже дорого.

Вітаю. Дякую за розбір мого PET-проекту.
Вибачте, що мій сайт зламався саме перед Вашим код-рев’ю, і зараз він вже працює. Файл «env», з API ключем, я не прибирав через те, що це навчальний проект, і в реальному проекті, звичайно, я би його не виставляв. Та й без нього не буде працювати мій сайт, тому що Versel бере код з GitHub. Може Ви знаєте якийсь інший спосіб?

У версел є можливість прокидати env змінні.

.env файл видалив, виявляється, що на Vercel його можна додати окремо, щоб не «світити» ключ

Не знаю чому ніхто про це не сказав, але те що ти видалив .env файл це зробило абсолютно нічого для того щоб захистити твій проект.
Ти робиш реквести з API ключем на кліенті, тобто цей ключ можливо в два кліки знайти відкривши DevTools -> вкладочка Network і оновити сторінку -> знайти реквест accounrs?lookup -> клікнути на payload.

Навіть якщо би ти не робив реквести на кліенті, VITE env variables + Vercel працює таким чином що твій API key засовується в бандл файл який потім повністю передається клієнту. Тобто твій API ключ знаходиться в index.js який може знайти будь який користувач після логіну -> вкладочка Sources в Devtools -> в assets фолдер index.js файл -> потім можеш просто CTRL + F і ввести початок свого ключа «AIzaSy».

Так це Firebase і так це пет-проект але робити реквести в базу данних на кліенті, бандліти API ключи в js файл який потім передаєш кліенту це все одно що писати свій ключ в .env файл і потім комітити на гітхаб. Всі (або ті які не хочеться віддавати шахраям) API ключі повинні бути на сервері і залишатись на сервері. Для SPA це важко зробити але можливо, але взагалом рекомендую занурнутись трішечки в бекенд і спробувати зробити щось на томуж самому Next.js враховуючи вже існуючі знання Реакту.

Вибачаюсь за достатньо «агресивний» коментар але це важлива проблема про яку ніхто чомусь не написав. Сподіваюсь це допоможе розібратись як захистити свій наступний проект :)

Тут важливо щоб виробити практику не комітити цей файл. Зрозуміло що публічні ключі там можуть бути бо вони все рівно доступні на клієнті. Але їх ще треба на клієнті знайти і витягнути. Тут то просто лежить в коді. По друге, цей файл з часом буде розростатися і туди уже будуть складатись більш приватні дані, а файл то буде все рівно в гіті. Можна провтикати і щось дуже серйозне закомітити.

Згоден. Але краще попередити що API ключ все одно залишається публічним

Привіт. Огляд на даний проєкт зроблений. Відео в мене на каналі. Сподіваюсь поради і зауваження будуть корисними. Буду вдячний за позитивний відгук в LinkedIn.

Привіт, це знову я 🤭
Після роздумів про те, який проект зробити, я захопився ідеєю використовувати штучний інтелект для чогось веселого. Тож я створив сайт, на якому люди повинні посміхатися, щоб потрапити на нього. Сайт зі штучним інтелектом це те, що я давно хотів зробити, і я задоволений тим, що вийшло!

P.S дивіться в камеру 🙃

Code — github.com/...​AROV-Artem/smile-to-enter
Live — smile-to-enter.vercel.app

Всім гарного дня !



Привіт. Проєкт дивився. Дуже простий, нема що критикувати) Бачу що стор винесли в іншу папку, відразу простіше стало орієнтуватися в проєкті.

Привіт!
Дам трохи контексту, бо просто показати скрін буде замало.

Я допомагаю волонтерам та волонтерським організаціям моніторити командні збори на потреби ЗСУ. Для цього була створена вебплатформа «Збір» (zbir.net). Нею користуються вже з десяток організацій, які я знайшов через інсту. Хочу попасти в ваш фід, щоб більше людей дізналось та користувалось.

Платформа дає можливість створити збір, вказати список монобанок учасників і побачити детальну статистику (на скріні показано). До кожного збору є лендінг, який дозволяє ділитися статистикою і просувати збір.

Саме один з таких лендінгів я хочу вам показати — zbir.net/p/6aSntG2qTk

Треба зазначити, що я не проф. фронт енд розробник. Останній раз верстав років 7 тому. На цьому проєкті я освоїв Tailwind CSS, React, Flex-box, Next.js і там ще купу всього. Тому для мене це був окремий виклик)

На жаль, показати вихідні коди саме цієї сторінки буде складно, бо це один з додатків в monorepo і все це на React... тобто коду дуже багато. Але можна глянути в інспекторі структуру, потестувати адаптивність тощо.

Проєкт чудовий і важливий. Дякую за роботу.
Суть нашої ініціативи у розборі вихідного коду і тому його наявність обов’язкова. Тестування структури в інспекторі та адаптивності не буде настільки ефективним.
Можливо зможете залишити посилання на код?

Якщо не важливо щоб він запускався, то я можу просто частину великого репо опублікувати в публічний репозиторій або на пошту кудись відправити. Якщо так підійде, то скажіть куди відправити лінку?

якщо публічний репозиторій то додайте посилання сюди. Потім можна буде видалити.

Можна посилання на код?

Я знайшов крутий дизайн на Figma з великою кількістю тризубів. Ну, і я подумав, що було б прикольно створити веб-сайт, де люди могли б робити власні тризуби та завантажувати їх у будь-якому кольорі чи розмірі, який вони хочуть ) Не всі знають історію власного герба, тому було б непогано зробити сторінки, де люди також могли б прочитати про нього.

Я все ще роблю цей веб-сайт, але вже можна створити та завантажити пару тризубів.
coat-of-arms-of-ukraine.vercel.app



доу тестує відображення картинок?

коду не буде, NDA, але можу подилитись схемою

Підписатись на коментарі