Fullstack Development Tutorial: From Setup to Completion | Book shelf Application

Veröffentlicht am: 14 September 2023
auf dem Kanal: ridhwanio

1,059

Demo: https://ridhwandev.github.io/bookshelf/ 🧑🏽‍💻
Github links:
Bookshelf CDK: https://github.com/RidhwanDev/bookshe...
Bookshelf: https://github.com/RidhwanDev/bookshelf

Dive deep into the world of full-stack development with this comprehensive guide, taking you step by step from the setup phase all the way to completion. Whether you're a beginner eager to learn or a veteran looking to upgrade your skills, this masterclass is designed for you. Covering a wide range of tools and techniques including AWS CLI, CDK CLI, Vite, React, Material-UI, Apollo GraphQL, and more, we leave no stone unturned.

🔖 Chapters:

Introduction & Setup:
Setting your local environment up with Node, AWS CLI, CDK CLI, and initiating a Vite project. AWS SSO configuration included.
Cognito Authentication:
Dive into AWS services as you learn to set up a CDK project and establish Cognito User Pool with TypeScript. Later, integrate Amplify for authentication in a Vite & TypeScript-based React app.
React Router & Material UI:
Design a navigable React app with a responsive navigation menu leveraging Material UI and React Router DOM.
Backend API:
A comprehensive segment covering backend setup and optimizations.
Google Books API Integration:
Connect your app to the Google Books API using GraphQL and Apollo, learning to manage paginated requests and more.
UI Deep Dive into CRUD & Frontend Caching:
The final segment unveils the process of setting up a bookshelf with React CRUD operations, optimizing the user experience through frontend caching.
Closing Thoughts:
Bringing together everything learned to showcase the masterpiece created.

Remember to like, subscribe, and share this masterclass for more in-depth tutorials and walkthroughs. Happy coding!

Timestamps:
00:00 - Introduction
01:50 - Installing Node
02:51 - Installing AWS CLI
04:10 - Installing CDK CLI
05:06 - Installing and setting up Yarn
06:00 - Creating a project with Vite
06:23 - AWS SSO Configuration (IAM Identity Center)
11:16 - Setting up CDK Project
12:52 - Creating AWS Cognito User Pool with TypeScript
15:03 - Deploying with 'cdk deploy'
15:50 - Creating React App using Vite & TypeScript
17:15 - Configuring React project
19:41 - Integrating Amplify for Authentication
22:06 - Customizing Amplify UI for Login
34:59 - Setting up Material UI
36:00 - Creating Header component
37:54 - Amplify useAuthenticator hook
38:37 - Constructing Navigation menu
40:53 - Making the component responsive
45:22 - Setting up React Router Dom
46:46 - Constructing Layout component
47:56 - Maintainable routes architecture
49:42 - Navigation with React Router Dom
50:52 - Implementing scalable routes architecture
52:15 - (Start of Backend API content, considering 38 seconds intro)
80:43 - (End of Backend API content, considering 28 mins and 24 secs main content)
80:55 - Enabling Google Books API
82:33 - Connecting Google Books API with GraphQL
88:37 - Building title component
89:19 - Building a Debounce Mechanism for Search Bar
92:13 - Designing Book Cards
98:33 - Creating Books with mutation
102:03 - Designing Loading Skeletons
104:15 - Advanced: Updating Apollo Cache with Paginated Requests
106:41 - Creating a custom hook
113:44 - Setting up the bookshelf page
114:30 - Creating tabbed components
117:22 - Creating the book cards
134:02 - Creating Skeleton elements
135:47 - Apollo pagination and caching
143:08 - Closing Thoughts & Outro

Auf dieser Seite können Sie das Online-Video Fullstack Development Tutorial: From Setup to Completion | Book shelf Application mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer ridhwanio 14 September 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,059 Mal angesehen und es wurde von 25 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!