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.

-------------------

Watch Full Stack AI Content Generator tutorial:

Watch Full Stack Habit Tracker tutorial:

-------------------

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

[house_sparrow]

Thanks for sharing this!!! UI is very nice + minimalist and also all the needed functionalities. 👏👏👏👏👏👏

[shuvkareview]

Great project man, even though it looks easy but very helpful and brainstorming at the same
Loved your content so much keep it up 👍

[honoreouedraogo]

Fantastic! thanks for this amazing project.

[pratiksingh]

You have reached your limit of 500 users. If you need more users, please use a Production instance.

[sempiterno]

Pretty cool project, love it, isn't common, I think xD

[calebchandrasekar]

something I wanted to build for a long time

[CodeWithMalinda]

Really appreciate your effort. Loved this ❤. Correct me if I am wrong. using a global context provider like this does not seem a good option for a production build right? when a state changes in global context (let's say state A) all the components that use a state (other states) from global context rerender even though they has nothing to do with the changed state (state A).

[cape_YT_]

Nice project, would be cool if you also show a way to make it a SaaS by adding Stripe or any other payment gateway.

[RG-kkoo]

thank you! how do i get back to the homepage when im in my notes?
Also, why not be able to search others pepople snippets perhaps? or invite people to see yours? thanks anyway

[captainPriceZM]

Excellent stuff, make more of these especially with clerk and prisma

[shreysadhukha]

bro show us the database part u just skipped it
can you please give me repo access

[INDIAN_]

Pls reply how to run code on this snippet plsss

[hodev]

Which component is used for code editor ?

[hardikupadhyay]

hey is anyone has made this project can you share the link of the github repo for the same
i am having some issues with the code.thank you

[KunalJaiswal-ognf]

Can we use zustand instead of Context Api??

[UchihaObito]

Puedes activar el subtitulo para español??++

[Memevsmemer]

Why you all youtubers are now using clerk, which has no scope.

[danidkm]

great video! thank you ! your links are broken !

[SilverAstro-qy]

its a great project but why did you skip some important parts or steps that is alot of trouble please dont do that next time or in another video

[INDIAN_]

Pls reply how to run our code in our snippet pls