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
Watch video Full Stack Code Snippet App With React, Next Js and TypeScript online without registration, duration hours minute second in high quality. This video was added by user Dev Script 07 July 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 22,408 once and liked it 1.1 thousand people.