Создание и развертывание клона LeetCode с помощью React, Next JS, TypeScript, Tailwind CSS, Firebase

0:00:00 Intro
0:00:29 Demo of The App
0:05:23 Project Setup
0:08:51 Auth Page Setup
0:13:19 Auth Page Navbar
0:18:54 AuthModal Layout UI
0:22:16 Login UI
0:29:41 Signup UI
0:31:59 ResetPassword UI
0:33:13 Integrating Recoil Auth State
0:47:31 Firebase Setup
0:52:41 Signup Functionality
1:01:21 Login Functionality
1:05:14 Auth Page Route Guard
1:08:01 Home Page UI
1:12:50 Problems Table UI
1:21:01 Youtube Video Modal
1:29:51 Topbar Update On Auth
1:32:46 Logout Functionality
1:37:11 Auth Modal Optimizations
1:38:44 Reset Password Functionality
1:42:56 React Toastify
1:47:19 Image optimizations
1:54:33 Creating [pid] page and update topbar
2:02:27 Creating Timer.tsx
2:12:31 Creating Workspace.tsx
2:15:18 Splitting The Page
2:19:47 Creating ProblemDescrition.tsx
2:26:03 Creating PreferenceNav.tsx
2:34:39 Creating Code Editor
2:41:10 Adding Test Cases UI
2:50:15 Creating EditorFooter.tsx
2:56:32 Data Handling Explained
3:01:50 Two Sum Problem
3:12:52 Reverse Linked List
3:18:05 Jump Game Problem
3:20:13 Valid Parentheses Problem
3:21:16 Search 2d Matrix Problem
3:22:01 Using SSG for [pid].tsx
3:46:47 Updating testcases UI
3:51:39 Initializing Firestore
3:55:56 Adding problems to DB
4:12:09 Fetch Problems
4:32:58 Create Users in DB
4:40:33 Fetch problem data
4:51:28 Loading skeletons
4:56:35 Get user data on the problem
5:06:23 Like functionality
5:27:51 Dislike functionality
5:39:03 Star functionality
5:46:03 Next and Previous problem
5:55:23 Solving Hydration Error
5:58:08 Confetti Celebration
6:01:43 Code Submission
6:20:50 Save code to localstorage
6:24:48 Solving bugs
6:31:08 Toggle Full Screen
6:34:13 SettingsModal UI
6:41:33 SettingsModal Functionality
6:54:23 Update Home Page
6:59:11 Sandboxing technique
7:01:58 Deployment
7:05:08 Firebase Rules

https://www.youtube.com/watch?v=GnodscC2p-A

👉 @frontend_1

Совет по HTML 💡

Легко создайте красивый индикатор выполнения, используя элемент <progress> 🤩

👉 @frontend_1

🚀 Коллекция React-компонентов и библиотек

https://github.com/brillout/awesome-react-components

👉 @frontend_1

Совет по CSS 💡

Легко реализуйте плавную прокрутку, используя всего одну строку кода 🤩

👉 @frontend_1

Типы утилит TypeScript, которые необходимо знать

https://www.builder.io/blog/utility-types

👉 @frontend_1

Совет по Javascript 💡

Возможно, вы не знаете об этом лучшем и надежном способе глубокого клонирования объектов JavaScript 🤩

👉 @frontend_1

3 вещи, о которых вы даже не подозревали, что они возможны только с помощью CSS

CSS (Cascading Style Sheets - каскадные таблицы стилей) - это как эстетика для HTML, используемого для структурирования веб-документа. Независимо от того, являетесь ли вы фронтенд-разработчиком, разработчиком полного стека или начинающим веб-дизайнером, использование таблиц стилей CSS - это то, что вы обязательно должны уметь делать!

Я буду расширять ваши горизонты, рассказывая о безграничных возможностях, которые вы можете сделать с помощью CSS, о том, что, как вы думали, можно сделать только с помощью кода.

Для того чтобы освоить некоторые из этих приемов, вы должны хорошо знать теги HTML. Вы также должны знать CSS, flexbox и CSS Grid (особенно border, margin и padding).

Гибкая модель компоновки (flexbox) предназначена для одномерного содержимого, и она отлично справляется с задачей размещения множества элементов разного размера и возврата наилучшего варианта компоновки.

https://blog.openreplay.com/three-things-you-never-thought-were-possible-with-just-css/

👉 @frontend_1

Изучите свойство преобразования CSS

Анимированное руководство упрощает изучение CSS.

👉 @frontend_1

Шпаргалка по CSS 🔥

7 способов скрыть элемент с помощью CSS 🤩

👉 @frontend_1

15 убийственных 🗡 приемов JS, о которых вы, вероятно, никогда не слышали 🔈🔥

Вот двадцать коротких и мощных приемов JavaScript, которые позволят максимально повысить производительность и минимизировать боль.

https://dev.to/ironcladdev/15-killer-js-techniques-youve-probably-never-heard-of-1lgp

👉 @frontend_1

Совет по производительности в Интернете 💡

Отложенная загрузка некритических модулей для уменьшения размера начальной загрузки страницы и повышения производительности 🚀

👉 @frontend_1

Делаем JavaScript компилируемым с помощью llvm.js

В данной статье мы рассмотрим мощный проект - llvm.js и расскажем, что он представляет из себя. Также мы научимся создавать компилируемый язык программирования на основе JavaScript. Хотя в этой статье мы сфокусируемся именно на JavaScript, ознакомившись с процессом, вы сможете создавать свои собственные компилируемые языки программирования с использованием llvm.js.

https://habr.com/ru/articles/766278/

👉 @frontend_1