Full Stack Code Snippet App With React, Next Js and TypeScript
In this video, we will be build a full stack Code snippet App with React, Next js and typecript, and we will be using Mongo DB for database storage, and clerk for authentifcation.
Source Code: https://ko-fi.com/s/231db20fee
Source code of all my projects: https://ko-fi.com/devscript/shop
Live Project: https://www.snippetsaver.com/
Learn to build advanced UI components, responsive sidebars, interactive code editors, and more. Perfect for both seasoned developers and newcomers, this tutorial offers step-by-step guidance and best practices to elevate your coding skills. Dive in and start building impressive, responsive apps today!
Chapters:
00:00:00 Introduction
00:15:40 Setting up the project and adding the poppins font
00:17:32 Creating the navbar
00:22:35 Add the call to action
00:24:16 Setting up clerk for authentication
00:30:51 Setting up MongoDB
00:40:52 Creating the sidebar
00:47:18 Creating the context API
00:52:46 Adding the selection logic for the sidebar
01:00:28 Creating the search bar
01:03:10 Creating the dark mode component
01:07:52 Adding the shimmer effect to the user profile component
01:14:05 Making the sidebar responsive
01:16:15 Making the top bar responsive
01:19:54 Opening and closing the sidebar
01:22:45 Creating the sliding tags component
01:26:25 Creating the note
01:33:20 Adding the content note component
01:42:22 Adding the all Notes Data
01:47:25 Showing each note in the UI
01:50:16 Adding or editing the snippet
01:59:55 Creating the snippet header
02:03:00 Creating the tags component
02:07:59 Adding the menu to the tags
02:19:20 Creating the description in the snippet component
02:25:15 Adding the code editor
02:30:08 Creating the drop down for the languages
02:39:07 Selecting the code language from the drop down menu
02:48:28 Updating the snippet code
02:52:13 Creating the copy function of the snippet code
02:54:46 Adding some tweaks to the note component
02:59:57 Preventing the empty notes
03:01:03 Sorting all the snippets by the new one
03:04:35 Enabling the favorite function
03:08:24 Deleting temporarily the snippet
03:15:47 Truncating strings of title and description and code block
03:17:12 Filtering the notes based on the favorites or trash
03:21:56 Restoring function from trash
03:26:25 Creating the delete confirmation window
03:32:57 Creating empty placeholder screens for each menu selection
03:41:38 Counting the languages on the sidebar
03:47:49 Creating all the tags window
03:53:38 Creating the add tag window
04:01:06 Adding the tags in the swiper selection
04:06:07 Adding a new tag
04:13:42 Editing a tag
04:23:06 Deleting the tag
04:27:01 Counting the tags used in all snippets
04:28:57 Searching for a tag
04:31:59 Filtering the snippets based on selected tags
04:42:53 Adding the shimmer effect of tags
04:46:43 Adding the clerkUserId property to the array
04:50:17 Getting all the snippets from the database
04:54:58 Adding a new snippet into the database
04:58:11 Updating the note in real-time
05:04:51 Updating the note if it is in the trash in the DB
05:06:41 Deleting the snippet from the DB
05:09:13 Adding and showing the tags from the database
05:13:38 Deleting the tag from the DB
#ReactJS #TypeScript #TailwindCSS #MongoDB #ClerkAuthentication #HabitTrackerApp #CodingTutorial #WebDevelopment #JavaScript #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #DarkMode #WebAppDevelopment #Programming #DevCommunity #CodeWithMe #TechTutorial #LearnToCode #DeveloperLife
Смотрите видео Full Stack Code Snippet App With React, Next Js and TypeScript онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Dev Script 07 Июль 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 22,408 раз и оно понравилось 1.1 тысяч людям.