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

Pubblicato il: 14 settembre 2023
sul canale di: 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

In questa pagina del sito puoi guardare il video online Fullstack Development Tutorial: From Setup to Completion | Book shelf Application della durata di ore minuti seconda in buona qualità , che l'utente ha caricato ridhwanio 14 settembre 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 1,059 volte e gli è piaciuto 25 spettatori. Buona visione!