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