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

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

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

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

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


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

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


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

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

👍ПодобаєтьсяСподобалось2
До обраногоВ обраному1
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

Привіт, я пару тижнів писав за фінансовий проєкт для відстаження витрат і надходжень (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

Вітаю. Сьогодні вийде розбір Вашого коду. Перш ніж я опублікую відео, попрошу видалити з 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, але можу подилитись схемою

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