Full Stack UI Components Builder App Using, React, Next Js, Mongo DB, Tailwind CSS
In this video, we will be building a full stack UI Component builder App, using the latest technologies, react, tailwind css, next js, mongo db for storing the components, and many more.
Source Code: https://ko-fi.com/s/cecfb5294c
Source code of all my projects: https://ko-fi.com/devscript/shop
Live Project: https://react-shelf.vercel.app/
Save your code snippets for FREE: https://www.snippetsaver.com/
Chapters:
00:12:55 Setting up the project
00:23:46 Adding the call to action headline
00:27:01 Adding the key features section in the landing page
00:34:03 Setting up clerk for the App
00:42:54 Setting up mongo DB
00:47:14 Saving Clerk user email adresesses in the DB
00:55:58 Creating the sidebar
01:02:35 Making the sidebar functionable
01:03:39 Creating the top bar in the dashboard
01:11:39 Opening and hiding the sidebar
01:18:50 Storing the state of the sidebar in the local storage
01:18:50 Initial Setup of the project
01:22:56 Creating the navbar of the landing page
01:25:37 Building the dark mode component
01:28:31 Making the dark mode menu functionable
01:39:51 Making the search functionable
01:44:47 Showing the user information from Clerk in the top bar
01:46:23 Making the top bar and the sidebar responsive
01:54:56 Creating the statistics component
01:59:47 Creating the all Projects component
02:06:15 Creating the "favorite components" component
02:13:23 Adding the projects data locally into the UI
02:22:55 Adding the empty placeholder and the loading snipper to all Projects component
02:28:12 Adding the favorite components data in the UI
02:32:58 Adding the loading spinner and the empty placeholder to the favorite components
02:37:37 Adding the skeleton effect to the stats component
02:38:57 Creating the new Project Window
02:43:18 Opening and closing the project window
02:47:51 Creating the project icons window
02:56:15 Adding the selection of the icon
03:01:10 Adding the error messages in the new project window
03:09:02 Adding a new project in the UI
03:14:39 Creating the component page logic
03:18:49 Creating the top bar of the component page
03:24:33 Completing the component page UI
03:33:02 Showing all components in the component page
03:39:24 Creating the empty placeholder if they are no components in the project
03:45:49 Setting the component as favorite
04:00:49 Creating the delete Window
04:07:33 Deleting the component
04:12:15 Creating the duplicate function to copy a component
04:19:13 Bulding the component editor
04:29:10 Creating and editing a component in the UI
04:42:27 Updating the favorite state inside the component editor
04:48:13 Accessing to the component from the dashboard
04:51:12 Making the action buttons of the favorite components working
04:54:13 Updating the values in the stats bar component
04:56:49 Create the All Projects window
05:06:30 Showing the projects data in the projects window and creating an empty placeholder
05:10:29 Creating the live search for the projects window
05:16:32 Editing the project in the all projects window
05:29:02 Accessing to the projects from the all projects window
05:31:38 Delete the project from the all projects window
05:35:03 Creating the sorting drop down component
05:41:56 Opening and the closing the sorting drop down component
05:48:45 Making the sorting of all projects working
06:02:21 Saving the sorting selection state in the local storage
06:06:24 Creating the favorite components window
06:10:29 Opening and closing the favorite components window
06:13:07 Showing the favorites components in the window
06:15:14 Setting up the empty placeholder when there's no components
06:22:11 Accessing to the component from the favorite components window
06:25:34 Creating the filter drop down
06:29:03 Opening and closing the filter drop down
06:33:53 Showing the unique components
06:37:56 Creating the selection of the project
06:40:34 Making the search bar in the drop down
06:45:01 Adding the filter logic
06:50:03 Creating the live search for the drop down
06:53:52 Opening and closing the live seach bar component
06:58:20 Adding the live search bar functionablr
07:02:18 Open the project clicked in the search results
07:06:33 Accessing to the searched component from the main search bar
07:14:36 Adding the copy icon in the jsx component
07:17:08 Adding and fetching projects from the database
07:22:52 Deleting the proejct from the db
07:25:17 Editing the project in the db
07:27:55 Adding a new project in the db
07:29:30 Adding and updating and deleting a component
#ReactJS #TypeScript #TailwindCSS #MongoDB #ClerkAuthentication #HabitTrackerApp #CodingTutorial #WebDevelopment #JavaScript #FrontendDevelopment #BackendDevelopment #ResponsiveDesign #DarkMode #WebAppDevelopment #Programming #DevCommunity #CodeWithMe #TechTutorial #LearnToCode #developerlife
On this page of the site you can watch the video online Full Stack UI Components Builder App Using, React, Next Js, Mongo DB, Tailwind CSS with a duration of hours minute second in good quality, which was uploaded by the user Dev Script 01 August 2024, share the link with friends and acquaintances, this video has already been watched 21,716 times on youtube and it was liked by 899 viewers. Enjoy your viewing!
![Case No.9 Episode 11 - [Eng Sub] - Presented by Happilac Paints & Nestle Bunyad - 29th October 2025](https://image.4k-video.ru/id-video/Eu6EpRNOSug)
