├── 13. Template ├── 2. With Template │ └── app │ │ ├── globals.css │ │ └── games │ │ ├── page.tsx │ │ ├── stats │ │ └── page.tsx │ │ ├── revenue │ │ └── page.tsx │ │ └── template.tsx └── 1. With Layout │ └── app │ └── analytics │ ├── page.tsx │ ├── stats │ └── page.tsx │ ├── revenue │ └── page.tsx │ └── layout.tsx ├── 23. Server Actions ├── 1. Todo List │ ├── src │ │ ├── app │ │ │ ├── globals.css │ │ │ └── layout.tsx │ │ ├── utils │ │ │ └── db.ts │ │ ├── components │ │ │ └── SaveButton.tsx │ │ └── actions │ │ │ └── index.ts │ ├── postcss.config.mjs │ ├── prisma │ │ ├── migrations │ │ │ ├── migration_lock.toml │ │ │ └── 20250310111520_init │ │ │ │ └── migration.sql │ │ └── schema.prisma │ ├── next.config.ts │ ├── eslint.config.mjs │ ├── .gitignore │ ├── tsconfig.json │ └── package.json └── 2. Movies Project │ ├── postcss.config.mjs │ ├── src │ ├── utils │ │ └── prisma.ts │ ├── lib │ │ └── utils.ts │ ├── app │ │ ├── all-movies │ │ │ └── page.tsx │ │ └── layout.tsx │ └── components │ │ └── ui │ │ └── label.tsx │ ├── prisma │ ├── migrations │ │ ├── migration_lock.toml │ │ └── 20250309130737_init │ │ │ └── migration.sql │ └── schema.prisma │ ├── next.config.ts │ ├── eslint.config.mjs │ ├── components.json │ ├── README.md │ ├── .gitignore │ └── tsconfig.json ├── 26. Motions & Animations ├── 3. Projects │ ├── 3. Draggable Cards │ │ └── src │ │ │ ├── app │ │ │ ├── globals.css │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ │ └── components │ │ │ └── DraggableCard.tsx │ ├── 6. Scroll Animation │ │ └── src │ │ │ └── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ ├── 7. Horizontal Scroll │ │ └── src │ │ │ ├── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ │ └── components │ │ │ ├── Card.tsx │ │ │ └── ScrollCarousel.tsx │ ├── 8. Sticky Navbar │ │ └── src │ │ │ ├── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ │ └── components │ │ │ └── Card.tsx │ ├── 9. Progress Steps │ │ └── src │ │ │ └── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ ├── 2. Loader │ │ └── src │ │ │ ├── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ │ └── components │ │ │ └── Loader.tsx │ ├── 1. Scroll Indicator │ │ └── src │ │ │ ├── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ │ └── components │ │ │ └── ScrollIndicator.tsx │ ├── 4. Carousel │ │ └── src │ │ │ └── app │ │ │ ├── page.tsx │ │ │ ├── globals.css │ │ │ └── layout.tsx │ └── 5. Advance Animation Navigation │ │ └── src │ │ └── app │ │ ├── page.tsx │ │ ├── globals.css │ │ └── layout.tsx ├── 1. Topics With Examples │ ├── 13. useScroll │ │ ├── 3. Example 3 │ │ │ └── app │ │ │ │ └── globals.css │ │ ├── 1. Demo │ │ │ └── app │ │ │ │ └── globals.css │ │ └── 2. Example 2 │ │ │ └── app │ │ │ ├── globals.css │ │ │ └── page.tsx │ ├── 3. Transitions │ │ └── app │ │ │ ├── globals.css │ │ │ └── page.tsx │ ├── 1. Basic Animations │ │ └── app │ │ │ ├── globals.css │ │ │ └── page.tsx │ ├── 2. Transformations │ │ └── app │ │ │ └── globals.css │ ├── 4. Keyframes │ │ ├── 1. Demo │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ ├── 2. Example 1 │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ └── 3. Example 2 │ │ │ └── app │ │ │ ├── globals.css │ │ │ └── page.tsx │ ├── 5. Variants │ │ ├── 1. Demos │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ ├── 2. Example 1 │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ └── 3. Example 2 │ │ │ └── app │ │ │ └── globals.css │ ├── 6. Gestures │ │ ├── 1. Demo │ │ │ └── app │ │ │ │ └── globals.css │ │ ├── 2. Example 1 │ │ │ └── app │ │ │ │ └── globals.css │ │ └── 3. Example 2 │ │ │ └── app │ │ │ └── globals.css │ ├── 8. useMotionValue │ │ ├── 1. Demo │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ ├── 2. Example 1 │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ └── 3. Example 2 │ │ │ └── app │ │ │ ├── globals.css │ │ │ └── page.tsx │ ├── 9. useSpring │ │ ├── 1. Example 1 │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ └── 2. Example 2 │ │ │ └── app │ │ │ ├── globals.css │ │ │ └── page.tsx │ ├── 7. Stagger Animation │ │ ├── 1. Example 1 │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ └── 2. Example 2 │ │ │ └── app │ │ │ └── globals.css │ ├── 12. whileInView │ │ ├── 1. Example 1 │ │ │ └── app │ │ │ │ ├── globals.css │ │ │ │ └── page.tsx │ │ └── 2. Example 2 │ │ │ └── app │ │ │ ├── globals.css │ │ │ └── page.tsx │ └── 10. useTransform │ │ ├── 2. Example 2 │ │ └── app │ │ │ └── globals.css │ │ └── 1. Demo │ │ └── index.tsx └── 2. Practice │ ├── 8. useSpring │ ├── Instructions │ │ └── useSpring.md │ └── src │ │ ├── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ │ └── components │ │ ├── 2. HoverLinkedScale.tsx │ │ ├── 4. DynamicRotation.tsx │ │ ├── 3. SpringAnimatedPosition.tsx │ │ └── 1. DraggableBox.tsx │ ├── 2. Transitions │ └── src │ │ ├── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ │ └── components │ │ ├── 4. ResponsiveButton.tsx │ │ ├── 1. FadeComponent.tsx │ │ └── 2. Sidebar.tsx │ ├── 3. Keyframes │ └── src │ │ ├── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ │ └── components │ │ ├── 4. SlidingText.tsx │ │ ├── 1. BouncingBall.tsx │ │ ├── 3. ColorChangeSquare.tsx │ │ ├── 5. ZigzagAnimation.tsx │ │ ├── 7. AnimatedBackground.tsx │ │ ├── 2. PulsatingButton.tsx │ │ └── 6. WaveEffect.tsx │ ├── 4. Variants │ └── src │ │ ├── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ │ └── components │ │ ├── 1. FadeInComponent.tsx │ │ ├── 4. ToggleSwitch.tsx │ │ └── 2. SlidingMenu.tsx │ ├── 5. Gestures │ └── src │ │ ├── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ │ └── components │ │ ├── 2. DraggableBox.tsx │ │ ├── 3. RotateOnDrag.tsx │ │ ├── 4. TapToChangeColor.tsx │ │ ├── 5. LongPressToChangeSize.tsx │ │ └── 1. SwipeableCard.tsx │ ├── 9. whileInView │ └── src │ │ ├── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ │ └── components │ │ ├── 4. InteractiveCards.tsx │ │ ├── 3. TimelineAnimation.tsx │ │ ├── 2. CardFlip.tsx │ │ └── 1. StaggeredList.tsx │ ├── 1. Transformations │ └── src │ │ ├── app │ │ ├── globals.css │ │ └── page.tsx │ │ └── components │ │ ├── Box.tsx │ │ ├── ComplexAnimation.tsx │ │ ├── BouncingCircle.tsx │ │ ├── SpinningIcon.tsx │ │ ├── SequentialBoxes.tsx │ │ └── SkewRectangle.tsx │ ├── 6. Stagger Animation │ └── src │ │ ├── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx │ │ └── components │ │ ├── 3. StaggeredButtonPress.tsx │ │ ├── 5. StaggeredTextReveal.tsx │ │ ├── 1. StaggeredList.tsx │ │ └── 4. StaggeredGridLayout.tsx │ └── 7. useMotionValue │ └── src │ ├── app │ ├── globals.css │ ├── page.tsx │ └── layout.tsx │ └── components │ ├── 2. HoverLinkedScale.tsx │ ├── 4. DynamicRotation.tsx │ ├── 1. DraggableBox.tsx │ └── 3. SpringAnimatedPosition.tsx ├── 04. Use Router ├── 2. Simple App │ ├── globals.css │ └── layout.tsx ├── 1. Live Coding │ └── app │ │ ├── colors │ │ └── page.tsx │ │ ├── about │ │ └── page.tsx │ │ ├── login │ │ └── page.tsx │ │ ├── page.tsx │ │ └── layout.tsx └── 3. Challenge │ ├── Solutions │ └── app │ │ ├── page2 │ │ └── page.tsx │ │ └── page1 │ │ └── page.tsx │ └── Instructions │ └── README.md ├── 10. Layout ├── 2. Simple Dashboard │ └── app │ │ ├── globals.css │ │ └── page.tsx ├── 3. Challenge │ └── Solution │ │ └── app │ │ ├── globals.css │ │ ├── blog │ │ ├── 1 │ │ │ └── page.tsx │ │ └── page.tsx │ │ ├── about │ │ └── page.tsx │ │ ├── contact │ │ └── page.tsx │ │ ├── page.tsx │ │ ├── admin │ │ └── dashboard │ │ │ └── page.tsx │ │ └── not-found.tsx └── 1. Layout Basics │ └── app │ └── login │ ├── loginadmin │ └── page.tsx │ ├── loginuser │ └── page.tsx │ ├── page.tsx │ └── layout.tsx ├── 01. Basic Routes ├── 2. Blogs Project │ └── app │ │ ├── globals.css │ │ ├── about │ │ └── page.tsx │ │ └── layout.tsx ├── 3. Challenge │ ├── Solution │ │ └── app │ │ │ ├── page.tsx │ │ │ ├── about │ │ │ └── page.tsx │ │ │ └── contact │ │ │ └── page.tsx │ └── Instructions │ │ └── README.md └── 1. Live Coding │ └── app │ ├── about │ └── page.tsx │ ├── login │ └── page.tsx │ ├── page.tsx │ └── layout.tsx ├── 02. Nested Routes ├── 2. Dashboard Project │ └── app │ │ ├── globals.css │ │ ├── layout.tsx │ │ └── page.tsx ├── 3. Challenge │ ├── Solution │ │ └── app │ │ │ ├── page.tsx │ │ │ └── products │ │ │ ├── allproducts │ │ │ └── page.tsx │ │ │ ├── specificproduct │ │ │ └── page.tsx │ │ │ └── page.tsx │ └── Instructions │ │ └── README.md └── 1. Live Coding │ └── app │ ├── users │ ├── page.tsx │ └── about │ │ ├── page.tsx │ │ └── projects │ │ └── page.tsx │ ├── page.tsx │ └── layout.tsx ├── 06. Dynamic Routes ├── 3. Simple Movies Info │ └── app │ │ ├── globals.css │ │ ├── movies │ │ └── page.tsx │ │ └── layout.tsx ├── 2. with-dynamic-routes │ └── app │ │ ├── page.tsx │ │ ├── userslist │ │ ├── [user] │ │ │ └── page.tsx │ │ └── page.tsx │ │ └── layout.tsx ├── 1. without-dynamic-routes │ └── app │ │ ├── page.tsx │ │ ├── userslist │ │ ├── huxn │ │ │ └── page.tsx │ │ ├── john │ │ │ └── page.tsx │ │ ├── alex │ │ │ └── page.tsx │ │ ├── jordan │ │ │ └── page.tsx │ │ └── page.tsx │ │ └── layout.tsx └── 4. Challenge │ ├── Solutions │ └── users │ │ └── [id] │ │ └── page.tsx │ └── Instructions │ └── README.md ├── 19. Advance Routing ├── 2. Intercepting Routes │ ├── 2. Ecommerce Refactor Using Dynamic Routes │ │ └── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ └── 1. Ecommerce App │ │ └── src │ │ └── app │ │ └── ecommerce │ │ ├── 1 │ │ └── page.tsx │ │ ├── 2 │ │ └── page.tsx │ │ └── 3 │ │ └── page.tsx ├── 4. Parallel Intercepting Routes │ ├── 1. Ecommerce App ( Refactor ) │ │ └── src │ │ │ └── app │ │ │ ├── globals.css │ │ │ ├── page.tsx │ │ │ ├── ecommerce │ │ │ ├── @product │ │ │ │ └── default.tsx │ │ │ └── layout.tsx │ │ │ └── layout.tsx │ └── 2. Games Project ( Refactor ) │ │ └── src │ │ ├── app │ │ └── games │ │ │ ├── @login │ │ │ └── default.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components │ │ └── GameCard.tsx │ │ └── db │ │ └── data.ts ├── 1. Parallel Routes │ ├── 2. With Parallel Routes │ │ └── src │ │ │ └── app │ │ │ └── members │ │ │ ├── page.tsx │ │ │ ├── @comments │ │ │ ├── loading.tsx │ │ │ ├── default.tsx │ │ │ └── page.tsx │ │ │ ├── @team │ │ │ ├── salaries │ │ │ │ └── page.tsx │ │ │ ├── error.tsx │ │ │ └── page.tsx │ │ │ ├── default.tsx │ │ │ └── layout.tsx │ └── 1. Without Parallel Routes │ │ └── src │ │ ├── app │ │ └── members │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ └── components │ │ ├── comments.tsx │ │ └── members.tsx └── 3. Games Project │ └── src │ ├── components │ └── GameCard.tsx │ ├── app │ └── games │ │ └── page.tsx │ └── db │ └── data.ts ├── 05. Skip Route ├── 2. Simple Login and Register │ └── app │ │ ├── globals.css │ │ ├── page.tsx │ │ └── layout.tsx ├── 1. Live Coding │ └── app │ │ ├── page.tsx │ │ ├── (auth) │ │ ├── login │ │ │ └── page.tsx │ │ └── register │ │ │ └── page.tsx │ │ └── layout.tsx └── 3. Challenge │ ├── Solution │ └── app │ │ ├── (auth) │ │ └── login │ │ │ └── page.tsx │ │ └── (users) │ │ └── userinfo │ │ └── page.tsx │ └── Instructions │ └── README.md ├── 08. Not Found ├── 1. Live Coding │ └── app │ │ ├── page.tsx │ │ ├── users │ │ └── page.tsx │ │ ├── not-found.tsx │ │ └── layout.tsx └── 2. Challenge │ ├── Instructions │ └── README.md │ └── Solutions │ └── app │ └── not-found.tsx ├── 11. Loading └── app │ └── users │ ├── loading.tsx │ └── page.tsx ├── 07. Catch All Routes ├── 1. Live Coding │ └── app │ │ ├── page.tsx │ │ ├── projects │ │ ├── page.tsx │ │ └── [...all] │ │ │ └── page.tsx │ │ └── layout.tsx └── 3. Challenge │ ├── Solutions │ └── products │ │ └── [...slug] │ │ └── page.tsx │ └── Instructions │ └── README.md ├── 03. Linking ├── 1. Live Coding │ ├── app │ │ ├── about │ │ │ └── page.tsx │ │ ├── page.tsx │ │ ├── portfolio │ │ │ └── page.tsx │ │ ├── style.css │ │ └── layout.tsx │ └── components │ │ └── Navbar.tsx └── 2. Challenge │ ├── Solutions │ └── app │ │ ├── dashboard │ │ ├── settings │ │ │ └── page.tsx │ │ ├── profile │ │ │ └── page.tsx │ │ └── page.tsx │ │ └── page.tsx │ └── Instructions │ └── README.md ├── 21. Data Fetching └── 2. server-side-data-fetching │ ├── loading.tsx │ ├── error.tsx │ └── page.tsx ├── 09. Redirects ├── 1. Live Coding │ └── app │ │ ├── about │ │ └── page.tsx │ │ └── user │ │ └── page.tsx └── 2. Challenge │ ├── Solutions │ └── app │ │ ├── old-page │ │ └── page.tsx │ │ ├── non-existing │ │ └── page.tsx │ │ ├── not-found.tsx │ │ └── new-page │ │ └── page.tsx │ └── Instructions │ └── README.md ├── 14. Images ├── 1. Internal Images │ ├── public │ │ └── florian-van-duyn.jpg │ └── app │ │ └── page.tsx └── 2. External Images │ ├── next.config.ts │ └── app │ └── page.tsx ├── 12. Error Handling └── app │ └── dashboard │ ├── error.tsx │ └── page.tsx ├── 15. Meta Data ├── 1. Static Metadata │ └── app │ │ ├── page.tsx │ │ ├── about │ │ └── page.tsx │ │ └── users │ │ └── page.tsx └── 2. Dynamic Metadata │ └── games │ └── [id] │ └── page.tsx ├── 20. Client vs Server Components ├── 4. Client Only Code │ └── src │ │ ├── lib │ │ └── utils.ts │ │ └── app │ │ ├── server-component │ │ └── page.tsx │ │ └── client-component │ │ └── page.tsx ├── 3. Server Only Code │ ├── 2. With Using The Package │ │ ├── lib │ │ │ └── utils.ts │ │ └── app │ │ │ ├── server-component │ │ │ └── page.tsx │ │ │ └── client-component │ │ │ └── page.tsx │ └── 1. Without Using The Package │ │ └── src │ │ ├── lib │ │ └── utils.ts │ │ └── app │ │ ├── server-component │ │ └── page.tsx │ │ └── client-component │ │ └── page.tsx ├── 5. Parent Affecting Childrens │ └── src │ │ ├── components │ │ ├── Password.tsx │ │ ├── Profile.tsx │ │ └── Settings.tsx │ │ └── app │ │ └── dashboard │ │ └── page.tsx ├── 1. Server Components │ └── movies │ │ └── page.tsx └── 2. Client Component │ └── movies │ └── page.tsx ├── 25. Form Validations ├── lib │ └── utils.ts ├── actions │ └── index.ts ├── components │ └── ui │ │ ├── label.tsx │ │ └── input.tsx └── app │ └── layout.tsx ├── 17. Backend ├── 1. GET │ └── app │ │ └── movies │ │ ├── route.ts │ │ └── db.ts ├── 2. POST │ └── movies │ │ ├── route.ts │ │ └── db.ts ├── 7. Middlewares │ ├── 1. Simple Redirects │ │ └── middleware.ts │ └── 2. Conditional Redirects │ │ └── middleware.ts ├── 3. Dynamic Routes │ └── movies │ │ ├── [id] │ │ └── route.ts │ │ └── db.ts ├── 6. URL Parameters │ └── movies │ │ ├── route.ts │ │ └── db.ts ├── 4. PATCH │ └── movies │ │ └── db.ts └── 5. DELETE │ └── movies │ ├── db.ts │ └── [id] │ └── route.ts ├── 16. Fonts └── app │ └── page.tsx ├── 22. Prisma └── prisma │ └── schema.prisma └── 18. Styling └── REAMDE.md /13. Template/2. With Template/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/3. Draggable Cards/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/6. Scroll Animation/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/7. Horizontal Scroll/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /04. Use Router/2. Simple App/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /10. Layout/2. Simple Dashboard/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/13. useScroll/3. Example 3/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /01. Basic Routes/2. Blogs Project/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /02. Nested Routes/2. Dashboard Project/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /06. Dynamic Routes/3. Simple Movies Info/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /19. Advance Routing/2. Intercepting Routes/2. Ecommerce Refactor Using Dynamic Routes/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/1. Ecommerce App ( Refactor )/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /05. Skip Route/2. Simple Login and Register/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /08. Not Found/1. Live Coding/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /05. Skip Route/1. Live Coding/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /10. Layout/2. Simple Dashboard/app/page.tsx: -------------------------------------------------------------------------------- 1 | const page = () => { 2 | return
page
; 3 | }; 4 | 5 | export default page; 6 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/blog/page.tsx: -------------------------------------------------------------------------------- 1 | const Blog = () => { 2 | return
Blog
; 3 | }; 4 | export default Blog; 5 | -------------------------------------------------------------------------------- /11. Loading/app/users/loading.tsx: -------------------------------------------------------------------------------- 1 | const Loading = () => { 2 | return
Loading...
; 3 | }; 4 | 5 | export default Loading; 6 | -------------------------------------------------------------------------------- /13. Template/2. With Template/app/games/page.tsx: -------------------------------------------------------------------------------- 1 | const Games = () => { 2 | return
Games
; 3 | }; 4 | export default Games; 5 | -------------------------------------------------------------------------------- /01. Basic Routes/3. Challenge/Solution/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /07. Catch All Routes/1. Live Coding/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /08. Not Found/1. Live Coding/app/users/page.tsx: -------------------------------------------------------------------------------- 1 | const Users = () => { 2 | return

Users

; 3 | }; 4 | 5 | export default Users; 6 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return
About
; 3 | }; 4 | export default About; 5 | -------------------------------------------------------------------------------- /13. Template/1. With Layout/app/analytics/page.tsx: -------------------------------------------------------------------------------- 1 | const Games = () => { 2 | return
Games
; 3 | }; 4 | export default Games; 5 | -------------------------------------------------------------------------------- /02. Nested Routes/3. Challenge/Solution/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /04. Use Router/1. Live Coding/app/colors/page.tsx: -------------------------------------------------------------------------------- 1 | const Colors = () => { 2 | return
Colors
; 3 | }; 4 | 5 | export default Colors; 6 | -------------------------------------------------------------------------------- /05. Skip Route/1. Live Coding/app/(auth)/login/page.tsx: -------------------------------------------------------------------------------- 1 | const Login = () => { 2 | return

Login

; 3 | }; 4 | 5 | export default Login; 6 | -------------------------------------------------------------------------------- /05. Skip Route/2. Simple Login and Register/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /06. Dynamic Routes/2. with-dynamic-routes/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/src/utils/db.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | export const db = new PrismaClient(); 4 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/8. Sticky Navbar/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #000; 5 | } 6 | -------------------------------------------------------------------------------- /03. Linking/1. Live Coding/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return

This is About Page

; 3 | }; 4 | 5 | export default About; 6 | -------------------------------------------------------------------------------- /03. Linking/1. Live Coding/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Next.js Complete Course 🤜
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /06. Dynamic Routes/1. without-dynamic-routes/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/contact/page.tsx: -------------------------------------------------------------------------------- 1 | const Contact = () => { 2 | return
Contact
; 3 | }; 4 | export default Contact; 5 | -------------------------------------------------------------------------------- /13. Template/1. With Layout/app/analytics/stats/page.tsx: -------------------------------------------------------------------------------- 1 | const Stats = () => { 2 | return
Stats
; 3 | }; 4 | 5 | export default Stats; 6 | -------------------------------------------------------------------------------- /13. Template/2. With Template/app/games/stats/page.tsx: -------------------------------------------------------------------------------- 1 | const Stats = () => { 2 | return
Stats
; 3 | }; 4 | 5 | export default Stats; 6 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /01. Basic Routes/1. Live Coding/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return

This is About Page

; 3 | }; 4 | 5 | export default About; 6 | -------------------------------------------------------------------------------- /01. Basic Routes/1. Live Coding/app/login/page.tsx: -------------------------------------------------------------------------------- 1 | const Login = () => { 2 | return

This is Login Page

; 3 | }; 4 | 5 | export default Login; 6 | -------------------------------------------------------------------------------- /01. Basic Routes/1. Live Coding/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Next.js Complete Course 🤜
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /02. Nested Routes/1. Live Coding/app/users/page.tsx: -------------------------------------------------------------------------------- 1 | const Users = () => { 2 | return

This is Users Page

; 3 | }; 4 | 5 | export default Users; 6 | -------------------------------------------------------------------------------- /13. Template/2. With Template/app/games/revenue/page.tsx: -------------------------------------------------------------------------------- 1 | const Revenue = () => { 2 | return
Revenue
; 3 | }; 4 | 5 | export default Revenue; 6 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/postcss.config.mjs: -------------------------------------------------------------------------------- 1 | const config = { 2 | plugins: ["@tailwindcss/postcss"], 3 | }; 4 | 5 | export default config; 6 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/src/utils/prisma.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | export const db = new PrismaClient(); 4 | -------------------------------------------------------------------------------- /01. Basic Routes/3. Challenge/Solution/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return

Hello From About Page

; 3 | }; 4 | export default About; 5 | -------------------------------------------------------------------------------- /02. Nested Routes/1. Live Coding/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Next.js Complete Course 🤜
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /02. Nested Routes/1. Live Coding/app/users/about/page.tsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return

This is User About Page

; 3 | }; 4 | export default About; 5 | -------------------------------------------------------------------------------- /05. Skip Route/1. Live Coding/app/(auth)/register/page.tsx: -------------------------------------------------------------------------------- 1 | const Register = () => { 2 | return

Register

; 3 | }; 4 | 5 | export default Register; 6 | -------------------------------------------------------------------------------- /07. Catch All Routes/1. Live Coding/app/projects/page.tsx: -------------------------------------------------------------------------------- 1 | const Projects = () => { 2 | return
Projects
; 3 | }; 4 | 5 | export default Projects; 6 | -------------------------------------------------------------------------------- /08. Not Found/1. Live Coding/app/not-found.tsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return

404 Page Not Found 😔

; 3 | }; 4 | 5 | export default NotFound; 6 | -------------------------------------------------------------------------------- /13. Template/1. With Layout/app/analytics/revenue/page.tsx: -------------------------------------------------------------------------------- 1 | const Revenue = () => { 2 | return
Revenue
; 3 | }; 4 | 5 | export default Revenue; 6 | -------------------------------------------------------------------------------- /21. Data Fetching/2. server-side-data-fetching/loading.tsx: -------------------------------------------------------------------------------- 1 | const Loading = () => { 2 | return
Loading...
; 3 | }; 4 | 5 | export default Loading; 6 | -------------------------------------------------------------------------------- /03. Linking/1. Live Coding/app/portfolio/page.tsx: -------------------------------------------------------------------------------- 1 | const Portfolio = () => { 2 | return

This is Portfolio Page

; 3 | }; 4 | 5 | export default Portfolio; 6 | -------------------------------------------------------------------------------- /03. Linking/2. Challenge/Solutions/app/dashboard/settings/page.tsx: -------------------------------------------------------------------------------- 1 | const Settings = () => { 2 | return
Settings
; 3 | }; 4 | export default Settings; 5 | -------------------------------------------------------------------------------- /09. Redirects/1. Live Coding/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return

User redirected to About Page

; 3 | }; 4 | 5 | export default About; 6 | -------------------------------------------------------------------------------- /01. Basic Routes/3. Challenge/Solution/app/contact/page.tsx: -------------------------------------------------------------------------------- 1 | const Contact = () => { 2 | return

Hello From Contact Page

; 3 | }; 4 | export default Contact; 5 | -------------------------------------------------------------------------------- /10. Layout/1. Layout Basics/app/login/loginadmin/page.tsx: -------------------------------------------------------------------------------- 1 | const LoginTeacher = () => { 2 | return

Login As Admin

; 3 | }; 4 | 5 | export default LoginTeacher; 6 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/Instructions/useSpring.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/9. Progress Steps/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #0d1017; 5 | color: white; 6 | } 7 | -------------------------------------------------------------------------------- /05. Skip Route/3. Challenge/Solution/app/(auth)/login/page.tsx: -------------------------------------------------------------------------------- 1 | const Login = () => { 2 | return

Please Login To See The Content

; 3 | }; 4 | export default Login; 5 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/page.tsx: -------------------------------------------------------------------------------- 1 | const Members = () => { 2 | return <>Members; 3 | }; 4 | export default Members; 5 | -------------------------------------------------------------------------------- /10. Layout/1. Layout Basics/app/login/loginuser/page.tsx: -------------------------------------------------------------------------------- 1 | const LoginStudent = () => { 2 | return

Login Regular User 👤

; 3 | }; 4 | 5 | export default LoginStudent; 6 | -------------------------------------------------------------------------------- /02. Nested Routes/1. Live Coding/app/users/about/projects/page.tsx: -------------------------------------------------------------------------------- 1 | const Projects = () => { 2 | return

This is User Projects Page

; 3 | }; 4 | 5 | export default Projects; 6 | -------------------------------------------------------------------------------- /09. Redirects/2. Challenge/Solutions/app/old-page/page.tsx: -------------------------------------------------------------------------------- 1 | import { redirect } from "next/navigation"; 2 | 3 | export default function OldPage() { 4 | redirect("/new-page"); 5 | } 6 | -------------------------------------------------------------------------------- /14. Images/1. Internal Images/public/florian-van-duyn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HuXn-WebDev/Next.js-15-Masterclass/HEAD/14. Images/1. Internal Images/public/florian-van-duyn.jpg -------------------------------------------------------------------------------- /19. Advance Routing/2. Intercepting Routes/2. Ecommerce Refactor Using Dynamic Routes/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/1. Ecommerce App ( Refactor )/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return
Home
; 3 | }; 4 | 5 | export default Home; 6 | -------------------------------------------------------------------------------- /02. Nested Routes/3. Challenge/Solution/app/products/allproducts/page.tsx: -------------------------------------------------------------------------------- 1 | const AllProducts = () => { 2 | return

(1220) products in the store

; 3 | }; 4 | export default AllProducts; 5 | -------------------------------------------------------------------------------- /10. Layout/1. Layout Basics/app/login/page.tsx: -------------------------------------------------------------------------------- 1 | const Login = () => { 2 | return ( 3 |
4 |

Login

5 |
6 | ); 7 | }; 8 | 9 | export default Login; 10 | -------------------------------------------------------------------------------- /12. Error Handling/app/dashboard/error.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | const ErrorBoundary = () => { 4 | return
Error In Dashboard Page
; 5 | }; 6 | 7 | export default ErrorBoundary; 8 | -------------------------------------------------------------------------------- /09. Redirects/2. Challenge/Solutions/app/non-existing/page.tsx: -------------------------------------------------------------------------------- 1 | import { redirect } from "next/navigation"; 2 | 3 | export default function NonExistingPage() { 4 | redirect("/not-found"); 5 | } 6 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/1. Ecommerce App ( Refactor )/src/app/ecommerce/@product/default.tsx: -------------------------------------------------------------------------------- 1 | const Default = () => { 2 | return null; 3 | }; 4 | export default Default; 5 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/2. Games Project ( Refactor )/src/app/games/@login/default.tsx: -------------------------------------------------------------------------------- 1 | const Default = () => { 2 | return null; 3 | }; 4 | 5 | export default Default; 6 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/prisma/migrations/migration_lock.toml: -------------------------------------------------------------------------------- 1 | # Please do not edit this file manually 2 | # It should be added in your version-control system (e.g., Git) 3 | provider = "sqlite" -------------------------------------------------------------------------------- /15. Meta Data/1. Static Metadata/app/page.tsx: -------------------------------------------------------------------------------- 1 | const Home = () => { 2 | return ( 3 |
4 |

Welcome Home

5 |
6 | ); 7 | }; 8 | 9 | export default Home; 10 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/@comments/loading.tsx: -------------------------------------------------------------------------------- 1 | const Loading = () => { 2 | return
Loading...
; 3 | }; 4 | 5 | export default Loading; 6 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/prisma/migrations/migration_lock.toml: -------------------------------------------------------------------------------- 1 | # Please do not edit this file manually 2 | # It should be added in your version-control system (e.g., Git) 3 | provider = "sqlite" -------------------------------------------------------------------------------- /02. Nested Routes/3. Challenge/Solution/app/products/specificproduct/page.tsx: -------------------------------------------------------------------------------- 1 | const SpecificProduct = () => { 2 | return

Here is my one & only product

; 3 | }; 4 | export default SpecificProduct; 5 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | }; 6 | 7 | export default nextConfig; 8 | -------------------------------------------------------------------------------- /20. Client vs Server Components/4. Client Only Code/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import "client-only"; 2 | 3 | export const add = (a: number, b: number) => a + b; 4 | export const subtract = (a: number, b: number) => a - b; 5 | -------------------------------------------------------------------------------- /25. Form Validations/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /09. Redirects/1. Live Coding/app/user/page.tsx: -------------------------------------------------------------------------------- 1 | import { redirect } from "next/navigation"; 2 | 3 | const Users = () => { 4 | redirect("/about"); 5 | 6 | return
Users
; 7 | }; 8 | 9 | export default Users; 10 | -------------------------------------------------------------------------------- /12. Error Handling/app/dashboard/page.tsx: -------------------------------------------------------------------------------- 1 | const Dashboard = () => { 2 | if (2 < 5) { 3 | throw new Error("Error in Dashboard"); 4 | } 5 | 6 | return
Dashboard
; 7 | }; 8 | 9 | export default Dashboard; 10 | -------------------------------------------------------------------------------- /20. Client vs Server Components/3. Server Only Code/2. With Using The Package/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import "server-only"; 2 | 3 | export const add = (a: number, b: number) => a + b; 4 | export const subtract = (a: number, b: number) => a - b; 5 | -------------------------------------------------------------------------------- /20. Client vs Server Components/5. Parent Affecting Childrens/src/components/Password.tsx: -------------------------------------------------------------------------------- 1 | const Password = () => { 2 | console.log("Password Component"); 3 | return
Password
; 4 | }; 5 | 6 | export default Password; 7 | -------------------------------------------------------------------------------- /20. Client vs Server Components/5. Parent Affecting Childrens/src/components/Profile.tsx: -------------------------------------------------------------------------------- 1 | const Profile = () => { 2 | console.log("Profile Component"); 3 | return
Profile Component
; 4 | }; 5 | 6 | export default Profile; 7 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /20. Client vs Server Components/5. Parent Affecting Childrens/src/components/Settings.tsx: -------------------------------------------------------------------------------- 1 | const Settings = () => { 2 | console.log("Settings Component"); 3 | return
Settings Component
; 4 | }; 5 | 6 | export default Settings; 7 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/2. Loader/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /21. Data Fetching/2. server-side-data-fetching/error.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | const ErrorBoundary = () => { 4 | return ( 5 |
6 |

Oooo Noo Error

7 |
8 | ); 9 | }; 10 | 11 | export default ErrorBoundary; 12 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/2. Transitions/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/4. Variants/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/9. whileInView/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /17. Backend/1. GET/app/movies/route.ts: -------------------------------------------------------------------------------- 1 | // export async function GET() { 2 | // return new Response("Hello World"); 3 | // } 4 | 5 | import { movies } from "./db"; 6 | 7 | export async function GET() { 8 | return Response.json(movies); 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #15141b; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/6. Stagger Animation/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/7. useMotionValue/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/1. Scroll Indicator/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | -------------------------------------------------------------------------------- /06. Dynamic Routes/1. without-dynamic-routes/app/userslist/huxn/page.tsx: -------------------------------------------------------------------------------- 1 | const HuXn = () => { 2 | return ( 3 |
4 |

Info About HuXn

5 |

Hello I'm HuXn

6 |
7 | ); 8 | }; 9 | 10 | export default HuXn; 11 | -------------------------------------------------------------------------------- /06. Dynamic Routes/1. without-dynamic-routes/app/userslist/john/page.tsx: -------------------------------------------------------------------------------- 1 | const John = () => { 2 | return ( 3 |
4 |

Info About John

5 |

Hello I'm John

6 |
7 | ); 8 | }; 9 | 10 | export default John; 11 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/2. Loader/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Loader from "@/components/Loader"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /01. Basic Routes/2. Blogs Project/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | const About = () => { 2 | return ( 3 |
4 |

About Me

5 |

This is a simple blog built with Next.js 15

6 |
7 | ); 8 | }; 9 | 10 | export default About; 11 | -------------------------------------------------------------------------------- /06. Dynamic Routes/1. without-dynamic-routes/app/userslist/alex/page.tsx: -------------------------------------------------------------------------------- 1 | const Alex = () => { 2 | return ( 3 |
4 |

Info About Alex

5 |

Hello I'm Alex

6 |
7 | ); 8 | }; 9 | 10 | export default Alex; 11 | -------------------------------------------------------------------------------- /15. Meta Data/1. Static Metadata/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | export const metadata = { 2 | title: "About Page", 3 | description: "This is the about page", 4 | }; 5 | 6 | const About = () => { 7 | return
About Page
; 8 | }; 9 | export default About; 10 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/prisma/migrations/20250310111520_init/migration.sql: -------------------------------------------------------------------------------- 1 | -- CreateTable 2 | CREATE TABLE "Todo" ( 3 | "id" TEXT NOT NULL PRIMARY KEY, 4 | "input" TEXT NOT NULL, 5 | "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP 6 | ); 7 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/8. Sticky Navbar/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import StickyNav from "@/components/StickyNav"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | export default App; 11 | -------------------------------------------------------------------------------- /06. Dynamic Routes/1. without-dynamic-routes/app/userslist/jordan/page.tsx: -------------------------------------------------------------------------------- 1 | const Jordan = () => { 2 | return ( 3 |
4 |

Info About Jordan

5 |

Hello I'm Jordan

6 |
7 | ); 8 | }; 9 | 10 | export default Jordan; 11 | -------------------------------------------------------------------------------- /15. Meta Data/1. Static Metadata/app/users/page.tsx: -------------------------------------------------------------------------------- 1 | export const metadata = { 2 | title: "Users Page", 3 | description: "This is the users page", 4 | }; 5 | 6 | const Users = () => { 7 | return

Users Page

; 8 | }; 9 | 10 | export default Users; 11 | -------------------------------------------------------------------------------- /04. Use Router/1. Live Coding/app/about/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const About = () => { 4 | return ( 5 |
6 |

About

7 | Home 8 |
9 | ); 10 | }; 11 | 12 | export default About; 13 | -------------------------------------------------------------------------------- /14. Images/2. External Images/next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | /* config options here */ 5 | images: { 6 | domains: ["images.unsplash.com"], 7 | }, 8 | }; 9 | 10 | export default nextConfig; 11 | -------------------------------------------------------------------------------- /04. Use Router/1. Live Coding/app/login/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const Login = () => { 4 | return ( 5 |
6 |

Login

7 | About 8 |
9 | ); 10 | }; 11 | 12 | export default Login; 13 | -------------------------------------------------------------------------------- /05. Skip Route/3. Challenge/Solution/app/(users)/userinfo/page.tsx: -------------------------------------------------------------------------------- 1 | const UsersInfo = () => { 2 | return ( 3 |
4 |

User Information

5 |

Here are the details about the user.

6 |
7 | ); 8 | }; 9 | export default UsersInfo; 10 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/page.tsx: -------------------------------------------------------------------------------- 1 | const HomePage = () => { 2 | return ( 3 |
4 |

Welcome to the Homepage

5 |

This is the main public page of the website.

6 |
7 | ); 8 | }; 9 | 10 | export default HomePage; 11 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/1. Without Parallel Routes/src/app/members/page.tsx: -------------------------------------------------------------------------------- 1 | const Members = () => { 2 | return ( 3 |
4 |

Here is some random content

5 |
6 | ); 7 | }; 8 | 9 | export default Members; 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/9. Progress Steps/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import ProgressSteps from "@/components/ProgressSteps"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | ; 7 |
8 | ); 9 | }; 10 | export default App; 11 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/admin/dashboard/page.tsx: -------------------------------------------------------------------------------- 1 | const DashboardPage = () => { 2 | return ( 3 |
4 |

Admin Dashboard

5 |

Welcome to the admin dashboard.

6 |
7 | ); 8 | }; 9 | 10 | export default DashboardPage; 11 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/not-found.tsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return ( 3 |
4 |

404 - Page Not Found

5 |

Sorry, the page you're looking for does not exist.

6 |
7 | ); 8 | }; 9 | 10 | export default NotFound; 11 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/6. Scroll Animation/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import ScrollAnimation from "@/components/ScrollAnimation"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | }; 10 | export default App; 11 | -------------------------------------------------------------------------------- /09. Redirects/2. Challenge/Solutions/app/not-found.tsx: -------------------------------------------------------------------------------- 1 | const NotFound = () => { 2 | return ( 3 |
4 |

404 - Page Not Found

5 |

Sorry, the page you're looking for does not exist.

6 |
7 | ); 8 | }; 9 | 10 | export default NotFound; 11 | -------------------------------------------------------------------------------- /11. Loading/app/users/page.tsx: -------------------------------------------------------------------------------- 1 | const Users = async () => { 2 | await new Promise((resolve) => 3 | setTimeout(() => { 4 | resolve("Content is currently loading..."); 5 | }, 4000) 6 | ); 7 | 8 | return

Users Page

; 9 | }; 10 | 11 | export default Users; 12 | -------------------------------------------------------------------------------- /17. Backend/2. POST/movies/route.ts: -------------------------------------------------------------------------------- 1 | import { movies } from "./db"; 2 | 3 | export async function POST(req: Request) { 4 | let movie = await req.json(); 5 | 6 | const newMovie = { ...movie }; 7 | movies.push(newMovie); 8 | return new Response(JSON.stringify(newMovie)); 9 | } 10 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/@comments/default.tsx: -------------------------------------------------------------------------------- 1 | const Default = () => { 2 | return ( 3 |
4 |

This is some default content coming from the default.tsx file.

5 |
6 | ); 7 | }; 8 | export default Default; 9 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/7. Horizontal Scroll/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import ScrollCarousel from "@/components/ScrollCarousel"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | ; 7 |
8 | ); 9 | }; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/@team/salaries/page.tsx: -------------------------------------------------------------------------------- 1 | const Salaries = () => { 2 | return ( 3 |
4 |

Check out my billion dollars salary in am month

5 |
6 | ); 7 | }; 8 | 9 | export default Salaries; 10 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/default.tsx: -------------------------------------------------------------------------------- 1 | const Default = () => { 2 | return ( 3 |
4 |

This is some default content coming from the default.tsx file.

5 |
6 | ); 7 | }; 8 | 9 | export default Default; 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/1. Scroll Indicator/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import ScrollIndicator from "@/components/ScrollIndicator"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | ; 7 |
8 | ); 9 | }; 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /06. Dynamic Routes/4. Challenge/Solutions/users/[id]/page.tsx: -------------------------------------------------------------------------------- 1 | const UserProfile = ({ params }: { params: { id: string } }) => { 2 | const { id } = params; 3 | 4 | return ( 5 |
6 |

User Profile: {id}

7 |
8 | ); 9 | }; 10 | 11 | export default UserProfile; 12 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/@team/error.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | const ErrorBoundary = () => { 4 | return ( 5 |
6 |

Oooo Noooo Some Error Occurred

7 |
8 | ); 9 | }; 10 | 11 | export default ErrorBoundary; 12 | -------------------------------------------------------------------------------- /20. Client vs Server Components/1. Server Components/movies/page.tsx: -------------------------------------------------------------------------------- 1 | // By Default Every Component is a "Server Component" 2 | 3 | const Movies = () => { 4 | console.log("This message is coming from server component"); 5 | 6 | return
Movies
; 7 | }; 8 | 9 | export default Movies; 10 | -------------------------------------------------------------------------------- /09. Redirects/2. Challenge/Solutions/app/new-page/page.tsx: -------------------------------------------------------------------------------- 1 | const NewPage = () => { 2 | return ( 3 |
4 |

Welcome to the New Page

5 |

This is the new page that users are redirected to from /old-page.

6 |
7 | ); 8 | }; 9 | 10 | export default NewPage; 11 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/4. Carousel/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Carousel from "@/components/Carousel"; 2 | 3 | const App = () => { 4 | return ( 5 |
6 | ; 7 |
8 | ); 9 | }; 10 | export default App; 11 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/1. Without Parallel Routes/src/components/comments.tsx: -------------------------------------------------------------------------------- 1 | const Comments = () => { 2 | // if (2 < 5) { 3 | // throw new Error("Error"); 4 | // } 5 | 6 | return
Comments
; 7 | }; 8 | 9 | export default Comments; 10 | -------------------------------------------------------------------------------- /20. Client vs Server Components/3. Server Only Code/1. Without Using The Package/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | // This code suppose to run inside the server component 2 | // - and not inside the client component 3 | 4 | export const add = (a: number, b: number) => a + b; 5 | export const subtract = (a: number, b: number) => a - b; 6 | -------------------------------------------------------------------------------- /03. Linking/1. Live Coding/app/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: sans-serif; 3 | } 4 | 5 | ul { 6 | display: flex; 7 | justify-content: space-around; 8 | } 9 | 10 | .link { 11 | list-style-type: none; 12 | text-decoration: none; 13 | margin: 10px; 14 | } 15 | 16 | h1 { 17 | text-align: center; 18 | } 19 | -------------------------------------------------------------------------------- /14. Images/1. Internal Images/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import NatureImage from "../../public/florian-van-duyn.jpg"; 3 | 4 | const Home = () => { 5 | return ( 6 |
7 | Nature Image 8 |
9 | ); 10 | }; 11 | 12 | export default Home; 13 | -------------------------------------------------------------------------------- /17. Backend/7. Middlewares/1. Simple Redirects/middleware.ts: -------------------------------------------------------------------------------- 1 | import { NextRequest, NextResponse } from "next/server"; 2 | 3 | export function middleware(request: NextRequest) { 4 | return NextResponse.redirect(new URL("/register", request.url)); 5 | } 6 | 7 | export const config = { 8 | matchers: "/dashboard", 9 | }; 10 | -------------------------------------------------------------------------------- /02. Nested Routes/3. Challenge/Solution/app/products/page.tsx: -------------------------------------------------------------------------------- 1 | const Products = () => { 2 | return ( 3 |
4 |

You can view all the products by going to /products/allproducts

5 |

You can view specific product by going to /products/specificproduct

6 |
7 | ); 8 | }; 9 | export default Products; 10 | -------------------------------------------------------------------------------- /10. Layout/3. Challenge/Solution/app/blog/1/page.tsx: -------------------------------------------------------------------------------- 1 | import BlogLayout from "../layout"; 2 | 3 | const BlogPost = () => { 4 | return ( 5 | 6 |

Blog Post Title

7 |

This is the content of the blog post.

8 | 9 | ); 10 | }; 11 | 12 | export default BlogPost; 13 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/components/Box.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const Box = () => ( 4 | 10 | ); 11 | 12 | export default Box; 13 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/@comments/page.tsx: -------------------------------------------------------------------------------- 1 | const Comments = async () => { 2 | await new Promise((resolve) => 3 | setTimeout(() => { 4 | resolve("Content is currently loading..."); 5 | }, 4000) 6 | ); 7 | 8 | return
Comments
; 9 | }; 10 | 11 | export default Comments; 12 | -------------------------------------------------------------------------------- /03. Linking/2. Challenge/Solutions/app/dashboard/profile/page.tsx: -------------------------------------------------------------------------------- 1 | const Profile = () => { 2 | return ( 3 |
4 |

User Profile

5 |

6 | Welcome to your dashboard. Here, you can manage your account settings, 7 | view your profile, and more. 8 |

9 |
10 | ); 11 | }; 12 | export default Profile; 13 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/5. Advance Animation Navigation/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Sidebar from "@/components/Sidebar"; 2 | 3 | const App = () => { 4 | return ( 5 |
9 | 10 |
11 | ); 12 | }; 13 | export default App; 14 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/3. Transitions/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /06. Dynamic Routes/2. with-dynamic-routes/app/userslist/[user]/page.tsx: -------------------------------------------------------------------------------- 1 | const User = async ({ params }: { params: { user: string } }) => { 2 | const { user } = await params; 3 | console.log(user); 4 | 5 | return ( 6 |
7 |

Info About {user}

8 |

Hello I'm {user}

9 |
10 | ); 11 | }; 12 | 13 | export default User; 14 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/prisma/migrations/20250309130737_init/migration.sql: -------------------------------------------------------------------------------- 1 | -- CreateTable 2 | CREATE TABLE "Movie" ( 3 | "id" TEXT NOT NULL PRIMARY KEY, 4 | "title" TEXT NOT NULL, 5 | "description" TEXT NOT NULL, 6 | "image" TEXT NOT NULL, 7 | "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP, 8 | "updatedAt" DATETIME NOT NULL 9 | ); 10 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/1. Basic Animations/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/2. Transformations/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/4. Keyframes/1. Demo/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/5. Variants/1. Demos/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/6. Gestures/1. Demo/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/4. Keyframes/2. Example 1/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/4. Keyframes/3. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/5. Variants/2. Example 1/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/6. Gestures/2. Example 1/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/6. Gestures/3. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/8. useMotionValue/1. Demo/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/9. useSpring/1. Example 1/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/9. useSpring/2. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/1. Without Parallel Routes/src/components/members.tsx: -------------------------------------------------------------------------------- 1 | const Members = async () => { 2 | await new Promise((resolve) => 3 | setTimeout(() => { 4 | resolve("Content is currently loading..."); 5 | }, 4000) 6 | ); 7 | 8 | return
Members
; 9 | }; 10 | 11 | export default Members; 12 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/1. Ecommerce App ( Refactor )/src/app/ecommerce/layout.tsx: -------------------------------------------------------------------------------- 1 | const EcommerceLayout = ({ 2 | children, 3 | product, 4 | }: { 5 | children: React.ReactNode; 6 | product: string; 7 | }) => { 8 | return ( 9 |
10 | {children} 11 | {product} 12 |
13 | ); 14 | }; 15 | export default EcommerceLayout; 16 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/8. useMotionValue/2. Example 1/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/8. useMotionValue/3. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /20. Client vs Server Components/4. Client Only Code/src/app/server-component/page.tsx: -------------------------------------------------------------------------------- 1 | import { add, subtract } from "@/lib/utils"; 2 | 3 | const ServerComponent = () => { 4 | const result = add(1, 2); 5 | const result2 = subtract(1, 2); 6 | console.log(result); 7 | console.log(result2); 8 | 9 | return
Server Component
; 10 | }; 11 | 12 | export default ServerComponent; 13 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/7. Stagger Animation/1. Example 1/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/7. Stagger Animation/2. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/components/ComplexAnimation.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const ComplexAnimation = () => ( 4 | 9 | ); 10 | 11 | export default ComplexAnimation; 12 | -------------------------------------------------------------------------------- /16. Fonts/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { Bebas_Neue } from "next/font/google"; 2 | 3 | const bebasFont = Bebas_Neue({ 4 | subsets: ["latin"], 5 | weight: "400", 6 | }); 7 | 8 | const Home = () => { 9 | return ( 10 |
11 |

Bebas Neue

12 |

This is some random text.

13 |
14 | ); 15 | }; 16 | 17 | export default Home; 18 | -------------------------------------------------------------------------------- /17. Backend/7. Middlewares/2. Conditional Redirects/middleware.ts: -------------------------------------------------------------------------------- 1 | import { NextRequest, NextResponse } from "next/server"; 2 | 3 | export function middleware(request: NextRequest) { 4 | if (request.nextUrl.pathname === "/dashboard") { 5 | return NextResponse.redirect(new URL("/register", request.nextUrl)); 6 | } 7 | } 8 | 9 | export const config = { 10 | matchers: "/dashboard", 11 | }; 12 | -------------------------------------------------------------------------------- /03. Linking/2. Challenge/Solutions/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const Home = () => { 4 | return ( 5 |
6 |

Welcome to the Home Page

7 |

This is the landing page of the website. Feel free to explore!

8 | 9 | Go to Dashboard 10 | 11 |
12 | ); 13 | }; 14 | 15 | export default Home; 16 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/2. Games Project ( Refactor )/src/app/games/layout.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | 3 | const GamesLayout = ({ 4 | children, 5 | login, 6 | }: { 7 | children: ReactNode; 8 | login: ReactNode; 9 | }) => { 10 | return ( 11 |
12 | {children} 13 | {login} 14 |
15 | ); 16 | }; 17 | 18 | export default GamesLayout; 19 | -------------------------------------------------------------------------------- /20. Client vs Server Components/3. Server Only Code/2. With Using The Package/app/server-component/page.tsx: -------------------------------------------------------------------------------- 1 | import { add, subtract } from "@/lib/utils"; 2 | 3 | const ServerComponent = () => { 4 | const result = add(1, 2); 5 | const result2 = subtract(1, 2); 6 | console.log(result); 7 | console.log(result2); 8 | 9 | return
Server Component
; 10 | }; 11 | 12 | export default ServerComponent; 13 | -------------------------------------------------------------------------------- /20. Client vs Server Components/4. Client Only Code/src/app/client-component/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { add, subtract } from "@/lib/utils"; 4 | 5 | const ClientComponent = () => { 6 | const result = add(1, 2); 7 | const result2 = subtract(1, 2); 8 | console.log(result); 9 | console.log(result2); 10 | 11 | return
Client Component
; 12 | }; 13 | 14 | export default ClientComponent; 15 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/components/BouncingCircle.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const BouncingCircle = () => ( 4 | 9 | ); 10 | 11 | export default BouncingCircle; 12 | -------------------------------------------------------------------------------- /17. Backend/3. Dynamic Routes/movies/[id]/route.ts: -------------------------------------------------------------------------------- 1 | import { movies } from "../db"; 2 | 3 | export async function GET( 4 | _req: Request, 5 | { params }: { params: { id: string } } 6 | ) { 7 | const { id } = await params; 8 | const movie = movies.find((m) => m.id === +id); 9 | 10 | return movie 11 | ? new Response(JSON.stringify(movie)) 12 | : new Response("Movie not found", { status: 404 }); 13 | } 14 | -------------------------------------------------------------------------------- /20. Client vs Server Components/3. Server Only Code/1. Without Using The Package/src/app/server-component/page.tsx: -------------------------------------------------------------------------------- 1 | import { add, subtract } from "@/lib/utils"; 2 | 3 | const ServerComponent = () => { 4 | const result = add(1, 2); 5 | const result2 = subtract(1, 2); 6 | console.log(result); 7 | console.log(result2); 8 | 9 | return
Server Component
; 10 | }; 11 | 12 | export default ServerComponent; 13 | -------------------------------------------------------------------------------- /04. Use Router/3. Challenge/Solutions/app/page2/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useRouter } from "next/navigation"; 3 | 4 | const PageTwo = () => { 5 | const router = useRouter(); 6 | 7 | return ( 8 |
9 |

Welcome to Page 2

10 |

You're now on page 2!

11 | 12 |
13 | ); 14 | }; 15 | 16 | export default PageTwo; 17 | -------------------------------------------------------------------------------- /07. Catch All Routes/1. Live Coding/app/projects/[...all]/page.tsx: -------------------------------------------------------------------------------- 1 | const Project = async ({ params }: { params: { all: string[] } }) => { 2 | const { all } = await params; 3 | 4 | return ( 5 |
6 |

Project {all}


7 |
8 | All Routes 9 | {all.map((p) => ( 10 |
  • {p}
    • 11 | ))} 12 |
    13 | ); 14 | }; 15 | 16 | export default Project; 17 | -------------------------------------------------------------------------------- /06. Dynamic Routes/4. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Challenge: Create a Dynamic User Profile Page 2 | 3 | 1. Create a dynamic route to display user profiles based on their ID. 4 | 5 | 2. **What should happen:** 6 | - If you visit `/users/1`, the page should display "User Profile: 1". 7 | - If you visit `/users/2`, the page should display "User Profile: 2". 8 | - The page should dynamically change based on the ID in the URL. 9 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/@team/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const TeamMembers = () => { 4 | // if (2 < 5) { 5 | // throw new Error("Error happened"); 6 | // } 7 | 8 | return ( 9 | <> 10 |

    TeamMembers

    11 | Check Out My Salaries 12 | 13 | ); 14 | }; 15 | 16 | export default TeamMembers; 17 | -------------------------------------------------------------------------------- /20. Client vs Server Components/3. Server Only Code/2. With Using The Package/app/client-component/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { add, subtract } from "@/lib/utils"; 4 | 5 | const ClientComponent = () => { 6 | const result = add(1, 2); 7 | const result2 = subtract(1, 2); 8 | console.log(result); 9 | console.log(result2); 10 | 11 | return
    Client Component
    ; 12 | }; 13 | 14 | export default ClientComponent; 15 | -------------------------------------------------------------------------------- /04. Use Router/3. Challenge/Solutions/app/page1/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useRouter } from "next/navigation"; 4 | 5 | const PageOne = () => { 6 | const router = useRouter(); 7 | 8 | const goToPage2 = () => router.push("/page2"); 9 | 10 | return ( 11 |
    12 |

    Welcome to Page 1

    13 | 14 |
    15 | ); 16 | }; 17 | export default PageOne; 18 | -------------------------------------------------------------------------------- /20. Client vs Server Components/3. Server Only Code/1. Without Using The Package/src/app/client-component/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { add, subtract } from "@/lib/utils"; 4 | 5 | const ClientComponent = () => { 6 | const result = add(1, 2); 7 | const result2 = subtract(1, 2); 8 | console.log(result); 9 | console.log(result2); 10 | 11 | return
    Client Component
    ; 12 | }; 13 | 14 | export default ClientComponent; 15 | -------------------------------------------------------------------------------- /21. Data Fetching/2. server-side-data-fetching/page.tsx: -------------------------------------------------------------------------------- 1 | const TodoComponent = async () => { 2 | const response = await fetch("https://jsonplaceholder.typicode.com/todos/1"); 3 | const data = await response.json(); 4 | console.log(data); 5 | 6 | return ( 7 |
    8 |

    {data.title}

    9 |

    {data.completed ? "Completed" : "Not Completed"}

    10 |
    11 | ); 12 | }; 13 | 14 | export default TodoComponent; 15 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | // This is your Prisma schema file, 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema 3 | 4 | generator client { 5 | provider = "prisma-client-js" 6 | } 7 | 8 | datasource db { 9 | provider = "sqlite" 10 | url = "file:app.db" 11 | } 12 | 13 | model Todo { 14 | id String @id @default(uuid()) 15 | input String 16 | createdAt DateTime @default(now()) 17 | } -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/components/SpinningIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const SpinningIcon = () => ( 4 | 10 | ); 11 | 12 | export default SpinningIcon; 13 | -------------------------------------------------------------------------------- /22. Prisma/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | generator client { 2 | provider = "prisma-client-js" 3 | } 4 | 5 | datasource db { 6 | provider = "sqlite" 7 | url = env("DATABASE_URL") 8 | } 9 | 10 | model Movie { 11 | id Int @id @default(autoincrement()) 12 | title String 13 | description String 14 | genre String 15 | releaseDate DateTime 16 | rating Float? 17 | createdAt DateTime @default(now()) 18 | updatedAt DateTime @updatedAt 19 | } 20 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/components/2. DraggableBox.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const DraggableBox = () => { 4 | return ( 5 | 10 | Drag me! 11 | 12 | ); 13 | }; 14 | 15 | export default DraggableBox; 16 | -------------------------------------------------------------------------------- /01. Basic Routes/3. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Exercise: Basic Routing in Next.js 2 | 3 | The goal of this exercise is to create a simple Next.js application with multiple pages and implement basic routing using Next.js's built-in routing system. 4 | 5 | #### Instructions: 6 | 7 | 1. Create a new Next.js project. 8 | 9 | 2. Create two routes named "about" and "contact". 10 | 11 | 3. Verify that you can navigate between the "about" and "contact" pages. 12 | -------------------------------------------------------------------------------- /15. Meta Data/2. Dynamic Metadata/games/[id]/page.tsx: -------------------------------------------------------------------------------- 1 | type GameProps = { 2 | params: Promise<{ id: string }>; 3 | }; 4 | 5 | export const generateMetadata = async ({ params }: GameProps) => { 6 | const { id } = await params; 7 | return { 8 | title: `Game: ${id}`, 9 | }; 10 | }; 11 | 12 | const Game = async ({ params }: GameProps) => { 13 | const { id } = await params; 14 | 15 | return
    Game ID: {id}
    ; 16 | }; 17 | 18 | export default Game; 19 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/components/4. SlidingText.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const SlidingText = () => { 4 | return ( 5 | 11 | Slide In Text 12 | 13 | ); 14 | }; 15 | 16 | export default SlidingText; 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/1. Basic Animations/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const BasicAnimations = () => { 4 | return ( 5 |
    6 | 7 | {/* */} 8 | {/* */} 9 |
    10 | ); 11 | }; 12 | 13 | export default BasicAnimations; 14 | -------------------------------------------------------------------------------- /17. Backend/6. URL Parameters/movies/route.ts: -------------------------------------------------------------------------------- 1 | import { NextRequest } from "next/server"; 2 | import { movies } from "./db"; 3 | 4 | export async function GET(request: NextRequest) { 5 | const searchParams = request.nextUrl.searchParams; 6 | const query = searchParams.get("query"); 7 | 8 | const filteredMovies = query 9 | ? movies.filter((m) => m.name.toLowerCase().includes(query)) 10 | : movies; 11 | 12 | return new Response(JSON.stringify(filteredMovies)); 13 | } 14 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/4. Carousel/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #000; 5 | } 6 | 7 | button { 8 | background-color: rgba(0, 0, 0, 0.5); 9 | border: none; 10 | padding: 10px; 11 | cursor: pointer; 12 | position: absolute; 13 | top: 50%; 14 | transform: translateY(-50%); 15 | z-index: 10; 16 | color: white; 17 | font-size: 1.5rem; 18 | } 19 | 20 | button:hover { 21 | background-color: rgba(0, 0, 0, 0.7); 22 | } 23 | -------------------------------------------------------------------------------- /07. Catch All Routes/3. Challenge/Solutions/products/[...slug]/page.tsx: -------------------------------------------------------------------------------- 1 | const Product = async ({ params }: { params: { slug: string[] } }) => { 2 | const { slug } = await params; 3 | 4 | return ( 5 |
    6 |

    Product ID: {slug.join(", ")}

    7 |
    8 | URL Segments: 9 |
      10 | {slug.map((id, index) => ( 11 |
    • {id}
      • 12 | ))} 13 |
    14 |
    15 | ); 16 | }; 17 | 18 | export default Product; 19 | -------------------------------------------------------------------------------- /18. Styling/REAMDE.md: -------------------------------------------------------------------------------- 1 | 1. CSS Module 2 | 3 | 2. UI Verse 4 | https://uiverse.io/ 5 | 6 | 3. TailwindCSS 7 | https://tailwindcss.com/ 8 | 9 | 4. UI Lukacho 10 | https://ui.lukacho.com/ 11 | 12 | 5. ShadCN UI 13 | https://ui.shadcn.com/ 14 | 15 | 6. Magic UI 16 | https://magicui.design/ 17 | 18 | 7. Motion Primitives 19 | https://motion-primitives.com/ 20 | 21 | 8. NextUI / HeroUI 22 | https://www.heroui.com/ 23 | 24 | 9. Aceternity UI 25 | https://ui.aceternity.com/ 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/components/SequentialBoxes.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const SequentialBoxes = () => ( 4 | <> 5 | {[...Array(3)].map((_, i) => ( 6 | 12 | ))} 13 | 14 | ); 15 | 16 | export default SequentialBoxes; 17 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/13. useScroll/1. Demo/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | /* border-radius: 100%; */ 16 | } 17 | 18 | ul li { 19 | width: 10px; 20 | height: 50px; 21 | border-radius: 40px; 22 | background: teal; 23 | } 24 | -------------------------------------------------------------------------------- /20. Client vs Server Components/2. Client Component/movies/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | 5 | const Movies = () => { 6 | const [movies, setMovies] = useState([]); 7 | 8 | console.log("This message is coming from client component"); 9 | 10 | return ( 11 |
    12 |

    Checking out the Client Component

    13 | 14 |
    15 | ); 16 | }; 17 | 18 | export default Movies; 19 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/13. useScroll/2. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | /* border-radius: 100%; */ 16 | } 17 | 18 | ul li { 19 | width: 10px; 20 | height: 50px; 21 | border-radius: 40px; 22 | background: teal; 23 | } 24 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/2. Transitions/src/components/4. ResponsiveButton.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const ResponsiveButton = () => { 4 | return ( 5 | 10 | Click Me! 11 | 12 | ); 13 | }; 14 | 15 | export default ResponsiveButton; 16 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/5. Advance Animation Navigation/src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #000; 5 | } 6 | 7 | button { 8 | background-color: rgba(0, 0, 0, 0.5); 9 | border: none; 10 | padding: 10px; 11 | cursor: pointer; 12 | position: absolute; 13 | top: 50%; 14 | transform: translateY(-50%); 15 | z-index: 10; 16 | color: white; 17 | font-size: 1.5rem; 18 | } 19 | 20 | button:hover { 21 | background-color: rgba(0, 0, 0, 0.7); 22 | } 23 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/1. Without Parallel Routes/src/app/members/layout.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | 3 | import Members from "@/components/members"; 4 | import Comments from "@/components/comments"; 5 | 6 | const MembersLayout = ({ children }: ReactNode) => { 7 | return ( 8 |
    9 |

    {children}

    10 |
    11 | 12 | 13 |
    14 |
    15 | ); 16 | }; 17 | 18 | export default MembersLayout; 19 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/src/components/SaveButton.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useFormStatus } from "react-dom"; 3 | 4 | const SaveButton = () => { 5 | const { pending } = useFormStatus(); 6 | 7 | return ( 8 | 15 | ); 16 | }; 17 | 18 | export default SaveButton; 19 | -------------------------------------------------------------------------------- /25. Form Validations/actions/index.ts: -------------------------------------------------------------------------------- 1 | "use server"; 2 | 3 | import { signupSchema } from "@/schema"; 4 | import { z } from "zod"; 5 | 6 | export async function createUser(values: z.infer) { 7 | const result = signupSchema.safeParse(values); 8 | 9 | if (!result.success) { 10 | return { status: "error", message: result.error.message }; 11 | } 12 | 13 | // console.log(values.name, values.email, values.password); 14 | 15 | return { status: "success", message: "User created successfully" }; 16 | } 17 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/5. Variants/3. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | border-radius: 100%; 16 | } 17 | 18 | .perspective-1000 { 19 | perspective: 1000px; 20 | } 21 | 22 | .transform-style-preserve-3d { 23 | transform-style: preserve-3d; 24 | } 25 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | // This is your Prisma schema file, 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema 3 | 4 | generator client { 5 | provider = "prisma-client-js" 6 | } 7 | 8 | datasource db { 9 | provider = "sqlite" 10 | url = "file:app.db" 11 | } 12 | 13 | model Movie { 14 | id String @id @default(uuid()) 15 | title String 16 | description String 17 | image String 18 | createdAt DateTime @default(now()) 19 | updatedAt DateTime @updatedAt 20 | } -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/12. whileInView/1. Example 1/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | position: fixed; 16 | bottom: 20rem; 17 | /* border-radius: 100%; */ 18 | } 19 | 20 | ul li { 21 | width: 10px; 22 | height: 50px; 23 | border-radius: 40px; 24 | background: teal; 25 | } 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/12. whileInView/2. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | position: fixed; 16 | bottom: 20rem; 17 | /* border-radius: 100%; */ 18 | } 19 | 20 | ul li { 21 | width: 10px; 22 | height: 50px; 23 | border-radius: 40px; 24 | background: teal; 25 | } 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/components/1. BouncingBall.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const BouncingBall = () => { 4 | return ( 5 | 17 | ); 18 | }; 19 | 20 | export default BouncingBall; 21 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/components/3. ColorChangeSquare.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const ColorChangeSquare = () => { 4 | return ( 5 | 16 | ); 17 | }; 18 | 19 | export default ColorChangeSquare; 20 | -------------------------------------------------------------------------------- /14. Images/2. External Images/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import NatureImage from "../../public/florian-van-duyn.jpg"; 3 | 4 | const Home = () => { 5 | return ( 6 |
    7 | Nature Image 13 |
    14 | ); 15 | }; 16 | 17 | export default Home; 18 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/10. useTransform/2. Example 2/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | body { 4 | background: #101010; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 80vh; 9 | } 10 | 11 | .box { 12 | width: 100px; 13 | height: 100px; 14 | background: yellow; 15 | position: fixed; 16 | bottom: 20rem; 17 | /* border-radius: 100%; */ 18 | } 19 | 20 | ul li { 21 | width: 10px; 22 | height: 50px; 23 | border-radius: 40px; 24 | background: teal; 25 | } 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/components/5. ZigzagAnimation.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const ZigzagAnimation = () => { 4 | return ( 5 | 17 | ); 18 | }; 19 | 20 | export default ZigzagAnimation; 21 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/4. Keyframes/1. Demo/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const Keyframes = () => { 4 | return ( 5 |
    6 | 15 |
    16 | ); 17 | }; 18 | 19 | export default Keyframes; 20 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/components/7. AnimatedBackground.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const AnimatedBackground = () => { 4 | return ( 5 | 16 | ); 17 | }; 18 | 19 | export default AnimatedBackground; 20 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/src/components/2. HoverLinkedScale.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useSpring } from "motion/react"; 3 | 4 | const HoverLinkedScale = () => { 5 | const scale = useSpring(1); 6 | 7 | return ( 8 | scale.set(1.2)} 10 | onHoverEnd={() => scale.set(1)} 11 | style={{ scale }} 12 | className="p-4 bg-blue-500 text-white rounded" 13 | > 14 | Hover Me 15 | 16 | ); 17 | }; 18 | 19 | export default HoverLinkedScale; 20 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/components/SkewRectangle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion } from "motion/react"; 3 | import { useState } from "react"; 4 | 5 | const SkewRectangle = () => { 6 | const [isSkewed, setIsSkewed] = useState(true); 7 | 8 | return ( 9 | setIsSkewed(!isSkewed)} 12 | animate={{ skewX: isSkewed ? 20 : 0 }} 13 | transition={{ duration: 0.5 }} 14 | /> 15 | ); 16 | }; 17 | 18 | export default SkewRectangle; 19 | -------------------------------------------------------------------------------- /20. Client vs Server Components/5. Parent Affecting Childrens/src/app/dashboard/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Password from "@/components/Password"; 4 | import Profile from "@/components/Profile"; 5 | import Settings from "@/components/Settings"; 6 | 7 | const Dashboard = () => { 8 | return ( 9 |
    10 | {/* All of these components are now client 11 | components because the parent is client component */} 12 | 13 | 14 | 15 |
    16 | ); 17 | }; 18 | 19 | export default Dashboard; 20 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/7. useMotionValue/src/components/2. HoverLinkedScale.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useMotionValue } from "motion/react"; 3 | 4 | const HoverLinkedScale = () => { 5 | const scale = useMotionValue(1); 6 | 7 | return ( 8 | scale.set(1.2)} 10 | onHoverEnd={() => scale.set(1)} 11 | style={{ scale }} 12 | className="p-4 bg-blue-500 text-white rounded" 13 | > 14 | Hover Me 15 | 16 | ); 17 | }; 18 | 19 | export default HoverLinkedScale; 20 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/9. whileInView/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import StaggeredList from "@/components/1. StaggeredList"; 2 | import CardFlip from "@/components/2. CardFlip"; 3 | import TimelineAnimation from "@/components/3. TimelineAnimation"; 4 | import InteractiveCards from "@/components/4. InteractiveCards"; 5 | 6 | const App = () => { 7 | return ( 8 |
    9 | {/* */} 10 | {/* */} 11 | {/* */} 12 | 13 |
    14 | ); 15 | }; 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/src/components/4. DynamicRotation.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useSpring } from "motion/react"; 3 | 4 | const DynamicRotation = () => { 5 | const rotation = useSpring(0); 6 | 7 | const rotateBox = () => { 8 | rotation.set(rotation.get() + 45); 9 | }; 10 | 11 | return ( 12 | 17 | Click Me 18 | 19 | ); 20 | }; 21 | 22 | export default DynamicRotation; 23 | -------------------------------------------------------------------------------- /02. Nested Routes/3. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Exercise: Nested Routes in Next.js 2 | 3 | The goal of this exercise is to demonstrate understanding of how to create nested routes in a Next.js application. 4 | 5 | #### Instructions: 6 | 7 | 1. Create a "products" route and inside that same folder create two more folders name "allproducts" & "specificproduct" 8 | 2. Inside the "allproducts" folder create a component which will show this text: "(1220) products in the store" 9 | 3. Inside the "specificproduct" folder create a component which will show this text: "Here is my one & only product" 10 | -------------------------------------------------------------------------------- /19. Advance Routing/3. Games Project/src/components/GameCard.tsx: -------------------------------------------------------------------------------- 1 | type GameProps = { 2 | game: { 3 | id: number; 4 | name: string; 5 | img: string; 6 | }; 7 | }; 8 | 9 | const GameCard = ({ game }: GameProps) => { 10 | return ( 11 |
    12 | {game.name} 17 |

    {game.name}

    18 |
    19 | ); 20 | }; 21 | 22 | export default GameCard; 23 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/README.md: -------------------------------------------------------------------------------- 1 | 1. npm i prisma -D 2 | 2. npx prisma init --datasource-provider sqlite 3 | 4 | 3. Go to the .gitignore file and provide the following 5 | /prisma/app.db 6 | 7 | 4. Add the model 8 | 9 | ```prisma 10 | model Movie { 11 | id String @id @default(uuid()) 12 | title String 13 | description String 14 | image String 15 | createdAt DateTime @default(now()) 16 | updatedAt DateTime @updatedAt 17 | } 18 | ``` 19 | 20 | 6. Finally migrate your data 21 | 22 | ```bash 23 | 24 | npx prisma migrate dev --name init 25 | 26 | ``` 27 | -------------------------------------------------------------------------------- /03. Linking/2. Challenge/Solutions/app/dashboard/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const Dashboard = () => { 4 | return ( 5 |
    6 |

    Dashboard

    7 | 20 |
    21 | ); 22 | }; 23 | export default Dashboard; 24 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/components/2. PulsatingButton.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const PulsatingButton = () => { 4 | return ( 5 | 17 | Pulse Me 18 | 19 | ); 20 | }; 21 | 22 | export default PulsatingButton; 23 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/7. useMotionValue/src/components/4. DynamicRotation.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useMotionValue } from "motion/react"; 3 | 4 | const DynamicRotation = () => { 5 | const rotation = useMotionValue(0); 6 | 7 | const rotateBox = () => { 8 | rotation.set(rotation.get() + 45); 9 | }; 10 | 11 | return ( 12 | 17 | Click Me 18 | 19 | ); 20 | }; 21 | 22 | export default DynamicRotation; 23 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import DraggableBox from "@/components/1. DraggableBox"; 2 | import HoverLinkedScale from "@/components/2. HoverLinkedScale"; 3 | import SpringAnimatedPosition from "@/components/3. SpringAnimatedPosition"; 4 | import DynamicRotation from "@/components/4. DynamicRotation"; 5 | 6 | const App = () => { 7 | return ( 8 |
    9 | {/* */} 10 | {/* */} 11 | {/* */} 12 | 13 |
    14 | ); 15 | }; 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/7. useMotionValue/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import DraggableBox from "@/components/1. DraggableBox"; 2 | import HoverLinkedScale from "@/components/2. HoverLinkedScale"; 3 | import SpringAnimatedPosition from "@/components/3. SpringAnimatedPosition"; 4 | import DynamicRotation from "@/components/4. DynamicRotation"; 5 | 6 | const App = () => { 7 | return ( 8 |
    9 | {/* */} 10 | {/* */} 11 | {/* */} 12 | 13 |
    14 | ); 15 | }; 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /19. Advance Routing/2. Intercepting Routes/1. Ecommerce App/src/app/ecommerce/3/page.tsx: -------------------------------------------------------------------------------- 1 | const ProductThree = () => { 2 | return ( 3 |
    4 |

    Sofa

    5 | 6 | Macbook Pic 11 | 12 |

    Price: $500

    13 |
    14 | ); 15 | }; 16 | 17 | export default ProductThree; 18 | -------------------------------------------------------------------------------- /05. Skip Route/3. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Exercise: Route Organization and Ignoring Routes in Next.js 2 | 3 | The goal of this exercise is to practice organizing routes using folders and excluding certain folders from being treated as routes in a Next.js application. 4 | 5 | #### Instructions: 6 | 7 | 1. Create the "users" folder (but it shouldn't be a route). 8 | 2. Inside the "users" folder create a "userinfo" route. 9 | 3. Inside the "app" directory create another folder name "auth" but it (shouldn't be a route). 10 | 4. Inside the "auth" folder create a login route which will only print (Please Login To See The Content) 11 | -------------------------------------------------------------------------------- /19. Advance Routing/2. Intercepting Routes/1. Ecommerce App/src/app/ecommerce/2/page.tsx: -------------------------------------------------------------------------------- 1 | const ProductTwo = () => { 2 | return ( 3 |
    4 |

    Football

    5 | 6 | Macbook Pic 11 | 12 |

    Price: $200

    13 |
    14 | ); 15 | }; 16 | 17 | export default ProductTwo; 18 | -------------------------------------------------------------------------------- /17. Backend/2. POST/movies/db.ts: -------------------------------------------------------------------------------- 1 | export const movies = [ 2 | { 3 | id: 1, 4 | name: "John Wick", 5 | ratings: 1, 6 | genre: "Action", 7 | }, 8 | 9 | { 10 | id: 2, 11 | name: "The Shawshank Redemption", 12 | ratings: 2, 13 | genre: "Drama", 14 | }, 15 | 16 | { 17 | id: 3, 18 | name: "The Godfather", 19 | ratings: 3, 20 | genre: "Drama", 21 | }, 22 | 23 | { 24 | id: 4, 25 | name: "The Dark Knight", 26 | ratings: 4, 27 | genre: "Action", 28 | }, 29 | 30 | { 31 | id: 5, 32 | name: "Inception", 33 | ratings: 5, 34 | genre: "Action", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /17. Backend/4. PATCH/movies/db.ts: -------------------------------------------------------------------------------- 1 | export const movies = [ 2 | { 3 | id: 1, 4 | name: "John Wick", 5 | ratings: 1, 6 | genre: "Action", 7 | }, 8 | 9 | { 10 | id: 2, 11 | name: "The Shawshank Redemption", 12 | ratings: 2, 13 | genre: "Drama", 14 | }, 15 | 16 | { 17 | id: 3, 18 | name: "The Godfather", 19 | ratings: 3, 20 | genre: "Drama", 21 | }, 22 | 23 | { 24 | id: 4, 25 | name: "The Dark Knight", 26 | ratings: 4, 27 | genre: "Action", 28 | }, 29 | 30 | { 31 | id: 5, 32 | name: "Inception", 33 | ratings: 5, 34 | genre: "Action", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /03. Linking/1. Live Coding/components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const Navbar = () => { 4 | return ( 5 | 23 | ); 24 | }; 25 | 26 | export default Navbar; 27 | -------------------------------------------------------------------------------- /10. Layout/1. Layout Basics/app/login/layout.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { ReactNode } from "react"; 3 | 4 | const Layout = ({ children }: { children: ReactNode }) => { 5 | return ( 6 |
    7 |
      8 |
    • 9 | Login Main 10 |
      • 11 |
    • 12 | Login Regular User 13 |
      • 14 |
    • 15 | Login Admin 16 |
      • 17 |
    18 | {children} 19 |
    20 | ); 21 | }; 22 | 23 | export default Layout; 24 | -------------------------------------------------------------------------------- /17. Backend/1. GET/app/movies/db.ts: -------------------------------------------------------------------------------- 1 | export const movies = [ 2 | { 3 | id: 1, 4 | name: "John Wick", 5 | ratings: 1, 6 | genre: "Action", 7 | }, 8 | 9 | { 10 | id: 2, 11 | name: "The Shawshank Redemption", 12 | ratings: 2, 13 | genre: "Drama", 14 | }, 15 | 16 | { 17 | id: 3, 18 | name: "The Godfather", 19 | ratings: 3, 20 | genre: "Drama", 21 | }, 22 | 23 | { 24 | id: 4, 25 | name: "The Dark Knight", 26 | ratings: 4, 27 | genre: "Action", 28 | }, 29 | 30 | { 31 | id: 5, 32 | name: "Inception", 33 | ratings: 5, 34 | genre: "Action", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /17. Backend/5. DELETE/movies/db.ts: -------------------------------------------------------------------------------- 1 | export const movies = [ 2 | { 3 | id: 1, 4 | name: "John Wick", 5 | ratings: 1, 6 | genre: "Action", 7 | }, 8 | 9 | { 10 | id: 2, 11 | name: "The Shawshank Redemption", 12 | ratings: 2, 13 | genre: "Drama", 14 | }, 15 | 16 | { 17 | id: 3, 18 | name: "The Godfather", 19 | ratings: 3, 20 | genre: "Drama", 21 | }, 22 | 23 | { 24 | id: 4, 25 | name: "The Dark Knight", 26 | ratings: 4, 27 | genre: "Action", 28 | }, 29 | 30 | { 31 | id: 5, 32 | name: "Inception", 33 | ratings: 5, 34 | genre: "Action", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/2. Games Project ( Refactor )/src/components/GameCard.tsx: -------------------------------------------------------------------------------- 1 | type GameProps = { 2 | game: { 3 | id: number; 4 | name: string; 5 | img: string; 6 | }; 7 | }; 8 | 9 | const GameCard = ({ game }: GameProps) => { 10 | return ( 11 |
    12 | {game.name} 17 |

    {game.name}

    18 |
    19 | ); 20 | }; 21 | 22 | export default GameCard; 23 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/4. Variants/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import FadeInComponent from "@/components/1. FadeInComponent"; 2 | import SlidingMenu from "@/components/2. SlidingMenu"; 3 | import Tooltip from "@/components/3. Tooltip"; 4 | import ToggleSwitch from "@/components/4. ToggleSwitch"; 5 | import DynamicList from "@/components/5. DynamicList"; 6 | 7 | const App = () => { 8 | return ( 9 |
    10 | {/* */} 11 | {/* */} 12 | {/* */} 13 | {/* */} 14 | 15 |
    16 | ); 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/4. Variants/src/components/1. FadeInComponent.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const fadeInVariant = { 4 | hidden: { opacity: 0 }, 5 | visible: { opacity: 1 }, 6 | }; 7 | 8 | const FadeInComponent = () => { 9 | return ( 10 | 17 |

    Fade In Component

    18 |     19 | ); 20 | }; 21 | 22 | export default FadeInComponent; 23 | -------------------------------------------------------------------------------- /17. Backend/3. Dynamic Routes/movies/db.ts: -------------------------------------------------------------------------------- 1 | export const movies = [ 2 | { 3 | id: 1, 4 | name: "John Wick", 5 | ratings: 1, 6 | genre: "Action", 7 | }, 8 | 9 | { 10 | id: 2, 11 | name: "The Shawshank Redemption", 12 | ratings: 2, 13 | genre: "Drama", 14 | }, 15 | 16 | { 17 | id: 3, 18 | name: "The Godfather", 19 | ratings: 3, 20 | genre: "Drama", 21 | }, 22 | 23 | { 24 | id: 4, 25 | name: "The Dark Knight", 26 | ratings: 4, 27 | genre: "Action", 28 | }, 29 | 30 | { 31 | id: 5, 32 | name: "Inception", 33 | ratings: 5, 34 | genre: "Action", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /17. Backend/6. URL Parameters/movies/db.ts: -------------------------------------------------------------------------------- 1 | export const movies = [ 2 | { 3 | id: 1, 4 | name: "John Wick", 5 | ratings: 1, 6 | genre: "Action", 7 | }, 8 | 9 | { 10 | id: 2, 11 | name: "The Shawshank Redemption", 12 | ratings: 2, 13 | genre: "Drama", 14 | }, 15 | 16 | { 17 | id: 3, 18 | name: "The Godfather", 19 | ratings: 3, 20 | genre: "Drama", 21 | }, 22 | 23 | { 24 | id: 4, 25 | name: "The Dark Knight", 26 | ratings: 4, 27 | genre: "Action", 28 | }, 29 | 30 | { 31 | id: 5, 32 | name: "Inception", 33 | ratings: 5, 34 | genre: "Action", 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /06. Dynamic Routes/1. without-dynamic-routes/app/userslist/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const UsersList = () => { 4 | return ( 5 |
    6 |

    Users List

    7 |
      8 |
    • 9 | Alex 10 |
      • 11 |
    • 12 | Jordan 13 |
      • 14 |
    • 15 | HuXn 16 |
      • 17 |
    • 18 | John 19 |
      • 20 |
    21 |
    22 | ); 23 | }; 24 | 25 | export default UsersList; 26 | -------------------------------------------------------------------------------- /06. Dynamic Routes/2. with-dynamic-routes/app/userslist/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const UsersList = () => { 4 | return ( 5 |
    6 |

    Users List

    7 |
      8 |
    • 9 | Alex 10 |
      • 11 |
    • 12 | Jordan 13 |
      • 14 |
    • 15 | HuXn 16 |
      • 17 |
    • 18 | John 19 |
      • 20 |
    21 |
    22 | ); 23 | }; 24 | 25 | export default UsersList; 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/7. Horizontal Scroll/src/components/Card.tsx: -------------------------------------------------------------------------------- 1 | const Card = ({ card }: any) => { 2 | return ( 3 |
    8 |
    17 |
    18 | ); 19 | }; 20 | 21 | export default Card; 22 | -------------------------------------------------------------------------------- /19. Advance Routing/2. Intercepting Routes/1. Ecommerce App/src/app/ecommerce/1/page.tsx: -------------------------------------------------------------------------------- 1 | const ProductOne = () => { 2 | return ( 3 |
    4 |

    Macbook Pro

    5 | 6 | Macbook Pic 11 | 12 |

    Price: $1000

    13 |
    14 | ); 15 | }; 16 | 17 | export default ProductOne; 18 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/7. useMotionValue/src/components/1. DraggableBox.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useMotionValue } from "motion/react"; 3 | 4 | const DraggableBox = () => { 5 | const x = useMotionValue(0); 6 | const y = useMotionValue(0); 7 | 8 | return ( 9 |
    10 | 15 |

    16 | Position: ({x.get().toFixed(2)}, {y.get().toFixed(2)}) 17 |

    18 |
    19 | ); 20 | }; 21 | 22 | export default DraggableBox; 23 | -------------------------------------------------------------------------------- /19. Advance Routing/3. Games Project/src/app/games/page.tsx: -------------------------------------------------------------------------------- 1 | import GameCard from "@/components/GameCard"; 2 | import { games } from "@/db/data"; 3 | import Sidebar from "@/components/Sidebar"; 4 | 5 | const Games = () => { 6 | return ( 7 |
    8 | 9 |
    10 |

    Featured Games

    11 |
    12 | {games.map((game) => ( 13 | 14 | ))} 15 |
    16 |
    17 |
    18 | ); 19 | }; 20 | 21 | export default Games; 22 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/8. Sticky Navbar/src/components/Card.tsx: -------------------------------------------------------------------------------- 1 | interface CardProps { 2 | title: string; 3 | description: string; 4 | imageUrl: string; 5 | } 6 | 7 | const Card = ({ title, description, imageUrl }: CardProps) => { 8 | return ( 9 |
    10 | {title} 11 |
    12 |

    {title}

    13 |

    {description}

    14 |
    15 |
    16 | ); 17 | }; 18 | 19 | export default Card; 20 | -------------------------------------------------------------------------------- /07. Catch All Routes/3. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Challenge: Handling Dynamic URL Segments in Next.js 2 | 3 | Practice catch all routes segments in Next.js. Your task is to create a route that dynamically processes and displays multiple URL segments. 4 | 5 | #### Instructions: 6 | 7 | - Inside the `app` directory, create a new folder named `products`. 8 | 9 | - Inside the `products` folder, create a folder named `[...slug]`. 10 | 11 | - Inside the `[...slug]` folder, create a `page.tsx` file that will render information based on the dynamic segments from the URL. 12 | 13 | - Inside `page.tsx`, display the entire `slug` array, showing each segment of the URL dynamically. 14 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/4. Keyframes/2. Example 1/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const PulsingButton = () => { 4 | return ( 5 |
    6 | 18 | Click Me! 19 | 20 |
    21 | ); 22 | }; 23 | 24 | export default PulsingButton; 25 | -------------------------------------------------------------------------------- /17. Backend/5. DELETE/movies/[id]/route.ts: -------------------------------------------------------------------------------- 1 | import { movies } from "../db"; 2 | 3 | export async function DELETE( 4 | req: Request, 5 | { params }: { params: { id: string } } 6 | ) { 7 | const { id } = params; 8 | const movieId = +id; 9 | 10 | // Find the movie index 11 | const index = movies.findIndex((m) => m.id === movieId); 12 | 13 | if (index === -1) { 14 | return new Response(JSON.stringify({ error: "Movie not found" }), { 15 | status: 404, 16 | }); 17 | } 18 | 19 | // Remove the movie from the collection 20 | movies.splice(index, 1); 21 | 22 | return new Response( 23 | JSON.stringify({ message: "Movie deleted successfully" }), 24 | { status: 200 } 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/2. Games Project ( Refactor )/src/app/games/page.tsx: -------------------------------------------------------------------------------- 1 | import GameCard from "@/components/GameCard"; 2 | import { games } from "@/db/data"; 3 | import Sidebar from "@/components/Sidebar"; 4 | 5 | const Games = () => { 6 | return ( 7 |
    8 | 9 |
    10 |

    Featured Games

    11 |
    12 | {games.map((game) => ( 13 | 14 | ))} 15 |
    16 |
    17 |
    18 | ); 19 | }; 20 | 21 | export default Games; 22 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/src/app/all-movies/page.tsx: -------------------------------------------------------------------------------- 1 | import ShowMovie from "@/components/custom-components/show-movie"; 2 | import { db } from "@/utils/prisma"; 3 | 4 | const AllMovies = async () => { 5 | const movies = await db.movie.findMany(); 6 | 7 | return ( 8 |
    9 |

    All Movies

    10 |
    11 | {movies.length > 0 ? ( 12 | movies.map((movie) => ) 13 | ) : ( 14 |

    No movies added yet.

    15 | )} 16 |
    17 |
    18 | ); 19 | }; 20 | 21 | export default AllMovies; 22 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/src/components/3. SpringAnimatedPosition.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useSpring } from "motion/react"; 3 | 4 | const SpringAnimatedPosition = () => { 5 | const x = useSpring(0); 6 | const y = useSpring(0); 7 | 8 | const moveBox = () => { 9 | x.set(Math.random() * 300); 10 | y.set(Math.random() * 300); 11 | }; 12 | 13 | return ( 14 |
    15 | 20 | Click Me 21 | 22 |
    23 | ); 24 | }; 25 | 26 | export default SpringAnimatedPosition; 27 | -------------------------------------------------------------------------------- /19. Advance Routing/1. Parallel Routes/2. With Parallel Routes/src/app/members/layout.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | import "../globals.css"; 3 | 4 | type LayoutProps = { 5 | children: ReactNode; 6 | team: ReactNode; 7 | comments: ReactNode; 8 | }; 9 | 10 | export const metadata = { 11 | title: "Members", 12 | description: "members page", 13 | }; 14 | 15 | const Layout = ({ children, team, comments }: LayoutProps) => { 16 | return ( 17 | <> 18 |
    {children}
    19 |
    {team}
    20 |
    {comments}
    21 | 22 | ); 23 | }; 24 | 25 | export default Layout; 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/8. useMotionValue/1. Demo/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion, useMotionValue, useMotionValueEvent } from "motion/react"; 4 | 5 | const MotionValueComponent = () => { 6 | const x = useMotionValue(0); 7 | 8 | useMotionValueEvent(x, "animationStart", () => { 9 | console.log("animation started on x"); 10 | }); 11 | 12 | useMotionValueEvent(x, "change", (latest) => { 13 | console.log("x changed to", latest); 14 | }); 15 | 16 | return ( 17 | 23 | ); 24 | }; 25 | 26 | export default MotionValueComponent; 27 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/7. useMotionValue/src/components/3. SpringAnimatedPosition.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useMotionValue } from "motion/react"; 3 | 4 | const SpringAnimatedPosition = () => { 5 | const x = useMotionValue(0); 6 | const y = useMotionValue(0); 7 | 8 | const moveBox = () => { 9 | x.set(Math.random() * 300); 10 | y.set(Math.random() * 300); 11 | }; 12 | 13 | return ( 14 |
    15 | 20 | Click Me 21 | 22 |
    23 | ); 24 | }; 25 | 26 | export default SpringAnimatedPosition; 27 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/13. useScroll/2. Example 2/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useScroll, useTransform } from "motion/react"; 3 | 4 | const ScrollAnimation = () => { 5 | const { scrollY } = useScroll(); 6 | const scale = useTransform(scrollY, [0, 300], [1, 1.5]); 7 | const opacity = useTransform(scrollY, [0, 100], [1, 0]); 8 | 9 | return ( 10 |
    11 | 15 |
    16 |
    17 | ); 18 | }; 19 | 20 | export default ScrollAnimation; 21 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/components/6. WaveEffect.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const WaveEffect = () => { 4 | const boxes = Array.from({ length: 5 }); 5 | 6 | return ( 7 |
    8 | {boxes.map((_, index) => ( 9 | 20 | ))} 21 |
    22 | ); 23 | }; 24 | 25 | export default WaveEffect; 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/components/3. RotateOnDrag.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { motion } from "motion/react"; 4 | 5 | const RotateOnDrag = () => { 6 | const [rotation, setRotation] = useState(0); 7 | 8 | const handleDrag = (_: any, info: any) => { 9 | const newRotation = rotation + info.offset.x; 10 | setRotation(newRotation); 11 | }; 12 | 13 | return ( 14 | 20 | Drag me! 21 | 22 | ); 23 | }; 24 | 25 | export default RotateOnDrag; 26 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | 43 | 44 | # Database 45 | /prisma/app.db -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | 43 | # Database 44 | /prisma/app.db -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/2. Transitions/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import FadeComponent from "@/components/1. FadeComponent"; 2 | import Sidebar from "@/components/2. Sidebar"; 3 | import Modal from "@/components/3. Modal"; 4 | import ResponsiveButton from "@/components/4. ResponsiveButton"; 5 | import Accordion from "@/components/5. Accordion"; 6 | import ToastNotification from "@/components/6. ToastNotification"; 7 | 8 | const App = () => { 9 | return ( 10 |
    11 | {/* */} 12 | {/* */} 13 | {/* */} 14 | {/* */} 15 | {/* */} 16 | 17 |
    18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /09. Redirects/2. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Exercise: Implementing Redirects in Next.js 2 | 3 | The goal of this exercise is to practice setting up and managing redirects in a Next.js application to enhance user experience and ensure proper page navigation. 4 | 5 | #### Instructions: 6 | 7 | - Create a custom error page named "not-found.tsx" in the "app" directory. This page will serve as the custom not-found error page for your application. 8 | 9 | - Implement redirects for the following scenarios: 10 | 11 | - Create a redirection rule that redirects users from the route "/old-page" to the new page "/new-page." 12 | - Create a rule that redirects users from a non-existing route "/non-existing" to the custom 404 error page "not-found.tsx." 13 | -------------------------------------------------------------------------------- /25. Form Validations/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Label({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ) 22 | } 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/4. Keyframes/3. Example 2/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const BouncingLoader = () => { 4 | return ( 5 |
    6 | {[...Array(3)].map((_, index) => ( 7 | 20 | ))} 21 |
    22 | ); 23 | }; 24 | 25 | export default BouncingLoader; 26 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/components/4. TapToChangeColor.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | import { motion } from "motion/react"; 5 | 6 | const colors = ["bg-blue-500", "bg-green-500", "bg-red-500", "bg-yellow-500"]; 7 | 8 | const TapToChangeColor = () => { 9 | const [colorIndex, setColorIndex] = useState(0); 10 | 11 | const handleTap = () => { 12 | setColorIndex((prev) => (prev + 1) % colors.length); 13 | }; 14 | 15 | return ( 16 | 20 | Tap me! 21 | 22 | ); 23 | }; 24 | 25 | export default TapToChangeColor; 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/6. Stagger Animation/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import StaggeredList from "@/components/1. StaggeredList"; 2 | import StaggeredImageGallery from "@/components/2. StaggeredImageGallery"; 3 | import StaggeredButtonPress from "@/components/3. StaggeredButtonPress"; 4 | import StaggeredGridLayout from "@/components/4. StaggeredGridLayout"; 5 | import StaggeredTextReveal from "@/components/5. StaggeredTextReveal"; 6 | 7 | const App = () => { 8 | return ( 9 |
    10 | {/* */} 11 | {/* */} 12 | {/* */} 13 | {/* */} 14 | 15 |
    16 | ); 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /04. Use Router/1. Live Coding/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import Link from "next/link"; 3 | import { useRouter } from "next/navigation"; 4 | 5 | export default function Home() { 6 | const router = useRouter(); 7 | console.log("-----", router); 8 | 9 | const navigate = (page: string) => { 10 | router.push(`/${page}`); 11 | }; 12 | 13 | return ( 14 |
    15 |

    Routing | Navigation

    16 | Login
    17 | About
    18 | 19 | {/* Alternative (create separate function) */} 20 | 21 |
    22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as LabelPrimitive from "@radix-ui/react-label" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Label({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ) 22 | } 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/1. Transformations/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import BouncingCircle from "@/components/BouncingCircle"; 2 | import Box from "@/components/Box"; 3 | import ComplexAnimation from "@/components/ComplexAnimation"; 4 | import SequentialBoxes from "@/components/SequentialBoxes"; 5 | import SkewRectangle from "@/components/SkewRectangle"; 6 | import SpinningIcon from "@/components/SpinningIcon"; 7 | 8 | const Transformation = () => { 9 | return ( 10 |
    11 | {/* */} 12 | {/* */} 13 | {/* */} 14 | {/* */} 15 | {/* */} 16 | 17 |
    18 | ); 19 | }; 20 | 21 | export default Transformation; 22 | -------------------------------------------------------------------------------- /13. Template/2. With Template/app/games/template.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import { useState } from "react"; 5 | 6 | const Layout = () => { 7 | const [name, setName] = useState(""); 8 | 9 | return ( 10 |
    11 | setName(e.target.value)} 15 | placeholder="Hello" 16 | className="border border-black" 17 | />{" "} 18 |
    19 | 20 | Revenue 21 | {" "} 22 |
    23 | 24 | Stats 25 | 26 |
    27 | ); 28 | }; 29 | 30 | export default Layout; 31 | -------------------------------------------------------------------------------- /13. Template/1. With Layout/app/analytics/layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import { useState } from "react"; 5 | 6 | const Layout = () => { 7 | const [name, setName] = useState(""); 8 | 9 | return ( 10 |
    11 | setName(e.target.value)} 15 | placeholder="Hello" 16 | className="border border-black" 17 | /> 18 |
    19 | 20 | Revenue 21 | {" "} 22 |
    23 | 24 | Stats 25 | 26 |
    27 | ); 28 | }; 29 | 30 | export default Layout; 31 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/6. Stagger Animation/src/components/3. StaggeredButtonPress.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const buttons = ["Button 1", "Button 2", "Button 3", "Button 4"]; 4 | 5 | const StaggeredButtonPress = () => { 6 | return ( 7 | 11 | {buttons.map((label, index) => ( 12 | 17 | {label} 18 | 19 | ))} 20 | 21 | ); 22 | }; 23 | 24 | export default StaggeredButtonPress; 25 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-version", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@prisma/client": "^6.4.1", 13 | "next": "15.2.1", 14 | "react": "^19.0.0", 15 | "react-dom": "^19.0.0" 16 | }, 17 | "devDependencies": { 18 | "@eslint/eslintrc": "^3", 19 | "@tailwindcss/postcss": "^4", 20 | "@types/node": "^20", 21 | "@types/react": "^19", 22 | "@types/react-dom": "^19", 23 | "eslint": "^9", 24 | "eslint-config-next": "15.2.1", 25 | "prisma": "^6.4.1", 26 | "tailwindcss": "^4", 27 | "typescript": "^5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/9. whileInView/src/components/4. InteractiveCards.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const InteractiveCards = () => { 4 | return ( 5 |
    6 | {[1, 2, 3, 4].map((item) => ( 7 | 15 |

    Card {item}

    16 |     17 | ))} 18 |
    19 | ); 20 | }; 21 | 22 | export default InteractiveCards; 23 | -------------------------------------------------------------------------------- /08. Not Found/2. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Exercise: Creating a Custom "Not Found" Page in Next.js 2 | 3 | The goal of this exercise is to practice creating a custom "Not Found" (404) page in a Next.js application to improve the user experience when accessing non-existing routes. 4 | 5 | #### Instructions: 6 | 7 | 1. In your Next.js project, create a custom error page named "not-found.tsx" in the "app" directory. This page will serve as the custom "Not Found" page for your application. 8 | 9 | 2. Customize the "not-found.tsx" page with a message or content to inform users that the page they are looking for does not exist. 10 | 11 | 3. Verify that when accessing a non-existing route, users are redirected to the custom "Not Found" page (not-found.tsx) and see the message you provided. 12 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/5. Variants/1. Demos/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | import { motion } from "motion/react"; 5 | 6 | const variants = { 7 | hidden: { opacity: 0, scale: 0.8 }, 8 | visible: { opacity: 1, scale: 1 }, 9 | exit: { opacity: 0, scale: 0.5 }, 10 | }; 11 | 12 | const Variants = () => { 13 | const [isVisible, setIsVisible] = useState(true); 14 | 15 | return ( 16 | setIsVisible(!isVisible)} 23 | className="box" 24 | > 25 | ); 26 | }; 27 | 28 | export default Variants; 29 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/5. Variants/2. Example 1/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const AnimatedShape = () => { 4 | const boxVariants = { 5 | initial: { scale: 1, rotate: 0, skew: 0 }, 6 | hover: { 7 | scale: 1.2, 8 | rotate: 15, 9 | skew: "10deg", 10 | transition: { duration: 0.3 }, 11 | }, 12 | click: { scale: 0.9, rotate: -15, transition: { duration: 0.3 } }, 13 | }; 14 | 15 | return ( 16 |
    17 | 24 |
    25 | ); 26 | }; 27 | 28 | export default AnimatedShape; 29 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/9. useSpring/1. Example 1/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion, useSpring } from "motion/react"; 4 | import { ChangeEvent } from "react"; 5 | 6 | const RangeSlider = () => { 7 | const scale = useSpring(1); 8 | 9 | const changeHandler = (e: ChangeEvent) => 10 | scale.set(parseFloat(e.target.value)); 11 | 12 | return ( 13 |
    14 | 15 |
    16 | 24 |
    25 |
    26 | ); 27 | }; 28 | 29 | export default RangeSlider; 30 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/10. useTransform/1. Demo/index.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useMotionValue, useTransform } from "motion/react"; 3 | 4 | const Home = () => { 5 | const x = useMotionValue(0); 6 | const y = useMotionValue(0); 7 | 8 | const backgroundColor = useTransform(x, [-100, 100], ["#ff0000", "#00ff00"]); 9 | 10 | return ( 11 | 22 | Drag Me! 23 | 24 | ); 25 | }; 26 | 27 | export default Home; 28 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/8. useMotionValue/2. Example 1/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useMotionValue } from "motion/react"; 3 | import { ChangeEvent } from "react"; 4 | 5 | const RangeSlider = () => { 6 | const scale = useMotionValue(1); 7 | 8 | const changeHandler = (e: ChangeEvent) => 9 | scale.set(parseFloat(e.target.value)); 10 | 11 | return ( 12 |
    13 | 14 | 15 |
    16 | 24 |
    25 |
    26 | ); 27 | }; 28 | 29 | export default RangeSlider; 30 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import SwipeableCard from "@/components/1. SwipeableCard"; 2 | import DraggableBox from "@/components/2. DraggableBox"; 3 | import RotateOnDrag from "@/components/3. RotateOnDrag"; 4 | import TapToChangeColor from "@/components/4. TapToChangeColor"; 5 | import LongPressToChangeSize from "@/components/5. LongPressToChangeSize"; 6 | import GestureBasedImageGallery from "@/components/6. GestureBasedImageGallery"; 7 | 8 | const App = () => { 9 | return ( 10 |
    11 | {/* */} 12 | {/* */} 13 | {/* */} 14 | {/* */} 15 | {/* */} 16 | 17 |
    18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/3. Draggable Cards/src/components/DraggableCard.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | import { CSSProperties, ReactNode } from "react"; 3 | 4 | interface DraggableCardProps { 5 | children: ReactNode; 6 | style?: CSSProperties; 7 | } 8 | 9 | const DraggableCard = ({ children, style }: DraggableCardProps) => { 10 | return ( 11 | 20 | {children} 21 | 22 | ); 23 | }; 24 | 25 | export default DraggableCard; 26 | -------------------------------------------------------------------------------- /04. Use Router/3. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Exercise: Using `useRouter` in Next.js 2 | 3 | The goal of this exercise is to practice using the `useRouter` hook in a Next.js application for programmatic navigation and accessing route information. 4 | 5 | #### Instructions: 6 | 7 | 1. Create two routes: "page1" and "page2". 8 | 9 | 2. In the "page1" route, create a simple landing page with a message and a button. 10 | 11 | 3. In the "page2" route, create a second page with information or content. 12 | 13 | 4. Implement a programmatic navigation from "page1" to "page2" using the `useRouter` hook from Next. When the user clicks a button on "page1," they should be navigated to "page2." 14 | 15 | 5. Verify that programmatic navigation from "page1" to "page2" works as expected, and that the route information is displayed on "page2." 16 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/src/components/1. DraggableBox.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useSpring } from "motion/react"; 3 | 4 | const DraggableBox = () => { 5 | const x = useSpring(0); 6 | const y = useSpring(0); 7 | 8 | return ( 9 |
    10 | { 16 | x.set(info.offset.x); 17 | y.set(info.offset.y); 18 | }} 19 | /> 20 |

    21 | Position: ({x.get().toFixed(2)}, {y.get().toFixed(2)}) 22 |

    23 |
    24 | ); 25 | }; 26 | 27 | export default DraggableBox; 28 | -------------------------------------------------------------------------------- /01. Basic Routes/1. Live Coding/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /02. Nested Routes/1. Live Coding/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /04. Use Router/1. Live Coding/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /05. Skip Route/1. Live Coding/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /08. Not Found/1. Live Coding/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /07. Catch All Routes/1. Live Coding/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /06. Dynamic Routes/2. with-dynamic-routes/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /06. Dynamic Routes/1. without-dynamic-routes/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | 4 | const geistSans = Geist({ 5 | variable: "--font-geist-sans", 6 | subsets: ["latin"], 7 | }); 8 | 9 | const geistMono = Geist_Mono({ 10 | variable: "--font-geist-mono", 11 | subsets: ["latin"], 12 | }); 13 | 14 | export const metadata: Metadata = { 15 | title: "Create Next App", 16 | description: "Generated by create next app", 17 | }; 18 | 19 | export default function RootLayout({ 20 | children, 21 | }: Readonly<{ 22 | children: React.ReactNode; 23 | }>) { 24 | return ( 25 | 26 | 29 | {children} 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /06. Dynamic Routes/3. Simple Movies Info/app/movies/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | export default function MoviesPage() { 4 | const movies = [ 5 | { id: "1", title: "Inception" }, 6 | { id: "2", title: "Interstellar" }, 7 | { id: "3", title: "The Dark Knight" }, 8 | ]; 9 | 10 | return ( 11 |
    12 |

    Movies List

    13 |
      14 | {movies.map((movie) => ( 15 |
    • 16 | 20 | {movie.title} 21 | 22 |
      • 23 | ))} 24 |
    25 |
    26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /25. Form Validations/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /04. Use Router/2. Simple App/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/6. Stagger Animation/src/components/5. StaggeredTextReveal.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const text = "Hello World!"; 4 | 5 | const staggerVariants = { 6 | hidden: { opacity: 0 }, 7 | visible: { opacity: 1 }, 8 | }; 9 | 10 | const StaggeredTextReveal = () => { 11 | return ( 12 | 22 | {text.split("").map((char, index) => ( 23 | 24 | {char} 25 | 26 | ))} 27 | 28 | ); 29 | }; 30 | 31 | export default StaggeredTextReveal; 32 | -------------------------------------------------------------------------------- /01. Basic Routes/2. Blogs Project/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/src/actions/index.ts: -------------------------------------------------------------------------------- 1 | "use server"; 2 | import { db } from "@/utils/db"; 3 | 4 | export async function createTodo(formData: FormData) { 5 | "use server"; 6 | 7 | const input = formData.get("input") as string; 8 | 9 | await db.todo.create({ 10 | data: { input: input }, 11 | }); 12 | } 13 | 14 | export async function editTodo(formData: FormData) { 15 | "use server"; 16 | 17 | const input = formData.get("input") as string; 18 | const inputId = formData.get("inputId") as string; 19 | 20 | await db.todo.update({ 21 | where: { id: inputId }, 22 | data: { input: input }, 23 | }); 24 | } 25 | 26 | export async function deleteTodo(formData: FormData) { 27 | "use server"; 28 | 29 | const inputId = formData.get("inputId") as string; 30 | 31 | await db.todo.delete({ 32 | where: { id: inputId }, 33 | }); 34 | } 35 | -------------------------------------------------------------------------------- /02. Nested Routes/2. Dashboard Project/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /23. Server Actions/1. Todo List/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/7. Stagger Animation/1. Example 1/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const parentVariants = { 4 | hidden: { opacity: 0 }, 5 | visible: { 6 | opacity: 1, 7 | transition: { 8 | staggerChildren: 0.8, 9 | }, 10 | }, 11 | }; 12 | 13 | const childVariants = { 14 | hidden: { opacity: 0, y: 20 }, 15 | visible: { opacity: 1, y: 0 }, 16 | }; 17 | 18 | const StaggerAnimation = () => { 19 | return ( 20 | 26 | {[...Array(5)].map((_, index) => ( 27 | 28 | ))} 29 | 30 | ); 31 | }; 32 | 33 | export default StaggerAnimation; 34 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/components/5. LongPressToChangeSize.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { motion } from "motion/react"; 4 | 5 | const LongPressToChangeSize = () => { 6 | const [isLarge, setIsLarge] = useState(false); 7 | 8 | const handleLongPressStart = () => setIsLarge(true); 9 | const handleLongPressEnd = () => setIsLarge(false); 10 | 11 | return ( 12 | 20 | Long Press Me! 21 | 22 | ); 23 | }; 24 | 25 | export default LongPressToChangeSize; 26 | -------------------------------------------------------------------------------- /05. Skip Route/2. Simple Login and Register/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /06. Dynamic Routes/3. Simple Movies Info/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /19. Advance Routing/3. Games Project/src/db/data.ts: -------------------------------------------------------------------------------- 1 | export const games = [ 2 | { 3 | id: 1, 4 | name: "Cyberpunk 2077", 5 | img: "https://variety.com/wp-content/uploads/2023/10/cyberpunk.jpeg?w=1000&h=667&crop=1", 6 | }, 7 | { 8 | id: 2, 9 | name: "The Witcher 3", 10 | img: "https://sm.ign.com/ign_za/preview/w/we-played-/we-played-the-witcher-3-wild-hunt-for-6-hours-ign_3v48.jpg", 11 | }, 12 | { 13 | id: 3, 14 | name: "Red Dead Redemption 2", 15 | img: "https://platform.polygon.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/10137177/49c7d29293f89dfef95969fde62f5c27e7cc780c.jpg?quality=90&strip=all&crop=7.8125,0,84.375,100", 16 | }, 17 | { 18 | id: 4, 19 | name: "Elden Ring", 20 | img: "https://static.bandainamcoent.eu/high/elden-ring/elden-ring/00-page-setup/elden-ring-new-header-mobile.jpg", 21 | }, 22 | ]; 23 | -------------------------------------------------------------------------------- /23. Server Actions/2. Movies Project/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/3. Transitions/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | // Duration 👉 How long the animation takes. 4 | // Easing 👉 The speed curve of the animation. 5 | // Delay 👉 How long to wait before starting the animation. 6 | 7 | const Transitions = () => { 8 | return ( 9 |
    10 | 21 |
    22 | ); 23 | }; 24 | 25 | export default Transitions; 26 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import BouncingBall from "@/components/1. BouncingBall"; 2 | import PulsatingButton from "@/components/2. PulsatingButton"; 3 | import ColorChangeSquare from "@/components/3. ColorChangeSquare"; 4 | import SlidingText from "@/components/4. SlidingText"; 5 | import ZigzagAnimation from "@/components/5. ZigzagAnimation"; 6 | import WaveEffect from "@/components/6. WaveEffect"; 7 | import AnimatedBackground from "@/components/7. AnimatedBackground"; 8 | 9 | const App = () => { 10 | return ( 11 |
    12 | {/* */} 13 | {/* */} 14 | {/* */} 15 | {/* */} 16 | {/* */} 17 | {/* */} 18 | 19 |
    20 | ); 21 | }; 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/3. Keyframes/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/4. Variants/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/8. useSpring/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/2. Loader/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/4. Carousel/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/2. Transitions/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/7. useMotionValue/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/9. whileInView/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/8. Sticky Navbar/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/9. Progress Steps/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/6. Stagger Animation/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/1. Scroll Indicator/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/3. Draggable Cards/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/6. Scroll Animation/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/7. Horizontal Scroll/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/5. Gestures/src/components/1. SwipeableCard.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { motion } from "motion/react"; 4 | 5 | const SwipeableCard = () => { 6 | const [isRemoved, setIsRemoved] = useState(false); 7 | 8 | const handleSwipe = (_: any, info: any) => { 9 | if (info.offset.x > 100) { 10 | setIsRemoved(true); 11 | } else if (info.offset.x < -100) { 12 | setIsRemoved(true); 13 | } 14 | }; 15 | 16 | return ( 17 | 25 | Swipe me! 26 | 27 | ); 28 | }; 29 | 30 | export default SwipeableCard; 31 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/9. whileInView/src/components/3. TimelineAnimation.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const TimelineAnimation = () => { 4 | const itemVariants = { 5 | hidden: { opacity: 0, scale: 0.5, rotate: 180 }, 6 | visible: { opacity: 1, scale: 1, rotate: 0 }, 7 | }; 8 | 9 | return ( 10 | 16 | {[1, 2, 3].map((item) => ( 17 | 23 | Item {item} 24 | 25 | ))} 26 | 27 | ); 28 | }; 29 | 30 | export default TimelineAnimation; 31 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/5. Advance Animation Navigation/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /03. Linking/2. Challenge/Instructions/README.md: -------------------------------------------------------------------------------- 1 | ### Exercise: Linking and Navigation in Next.js 2 | 3 | The goal of this exercise is to practice using Next.js's `` component for client-side navigation in a Next.js application. 4 | 5 | #### Instructions: 6 | 7 | 1. Create two routes "home" and "dashboard" 8 | 9 | 2. In the "home" page, create a simple landing page with a welcoming message and some content. 10 | 11 | 3. In the "dashboard" page, create a dashboard with various components, such as a navigation menu, user profile, and other related information. 12 | 13 | 4. In the "dashboard" page, implement a navigation menu that includes links to the "home" page and other sections within the dashboard. 14 | 15 | 5. Use Next.js's `` component to create these navigation links. Ensure that clicking on these links navigates the user to the corresponding pages within the application without a full page refresh. 16 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/6. Stagger Animation/src/components/1. StaggeredList.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; 4 | 5 | const staggerVariants = { 6 | hidden: { opacity: 0 }, 7 | visible: { opacity: 1 }, 8 | }; 9 | 10 | const StaggeredList = () => { 11 | return ( 12 | 21 | {items.map((item, index) => ( 22 | 27 | {item} 28 | 29 | ))} 30 | 31 | ); 32 | }; 33 | 34 | export default StaggeredList; 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/2. Loader/src/components/Loader.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const Loader = () => { 4 | return ( 5 |
    6 | 12 | 19 | 20 |
    21 | ); 22 | }; 23 | 24 | export default Loader; 25 | -------------------------------------------------------------------------------- /19. Advance Routing/2. Intercepting Routes/2. Ecommerce Refactor Using Dynamic Routes/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/1. Ecommerce App ( Refactor )/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const geistSans = Geist({ 6 | variable: "--font-geist-sans", 7 | subsets: ["latin"], 8 | }); 9 | 10 | const geistMono = Geist_Mono({ 11 | variable: "--font-geist-mono", 12 | subsets: ["latin"], 13 | }); 14 | 15 | export const metadata: Metadata = { 16 | title: "Create Next App", 17 | description: "Generated by create next app", 18 | }; 19 | 20 | export default function RootLayout({ 21 | children, 22 | }: Readonly<{ 23 | children: React.ReactNode; 24 | }>) { 25 | return ( 26 | 27 | 30 | {children} 31 | 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /19. Advance Routing/4. Parallel Intercepting Routes/2. Games Project ( Refactor )/src/db/data.ts: -------------------------------------------------------------------------------- 1 | export const games = [ 2 | { 3 | id: 1, 4 | name: "Cyberpunk 2077", 5 | img: "https://variety.com/wp-content/uploads/2023/10/cyberpunk.jpeg?w=1000&h=667&crop=1", 6 | }, 7 | { 8 | id: 2, 9 | name: "The Witcher 3", 10 | img: "https://sm.ign.com/ign_za/preview/w/we-played-/we-played-the-witcher-3-wild-hunt-for-6-hours-ign_3v48.jpg", 11 | }, 12 | { 13 | id: 3, 14 | name: "Red Dead Redemption 2", 15 | img: "https://platform.polygon.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/10137177/49c7d29293f89dfef95969fde62f5c27e7cc780c.jpg?quality=90&strip=all&crop=7.8125,0,84.375,100", 16 | }, 17 | { 18 | id: 4, 19 | name: "Elden Ring", 20 | img: "https://static.bandainamcoent.eu/high/elden-ring/elden-ring/00-page-setup/elden-ring-new-header-mobile.jpg", 21 | }, 22 | ]; 23 | -------------------------------------------------------------------------------- /03. Linking/1. Live Coding/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Geist, Geist_Mono } from "next/font/google"; 3 | import Navbar from "@/components/Navbar"; 4 | import "./style.css"; 5 | 6 | const geistSans = Geist({ 7 | variable: "--font-geist-sans", 8 | subsets: ["latin"], 9 | }); 10 | 11 | const geistMono = Geist_Mono({ 12 | variable: "--font-geist-mono", 13 | subsets: ["latin"], 14 | }); 15 | 16 | export const metadata: Metadata = { 17 | title: "Create Next App", 18 | description: "Generated by create next app", 19 | }; 20 | 21 | export default function RootLayout({ 22 | children, 23 | }: Readonly<{ 24 | children: React.ReactNode; 25 | }>) { 26 | return ( 27 | 28 | 31 | 32 | {children} 33 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/4. Variants/src/components/4. ToggleSwitch.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { motion } from "motion/react"; 4 | 5 | const switchVariants = { 6 | off: { x: 0 }, 7 | on: { x: 70 }, 8 | }; 9 | 10 | const ToggleSwitch = () => { 11 | const [isOn, setIsOn] = useState(false); 12 | 13 | return ( 14 |
    15 |
    setIsOn(!isOn)} 20 | /> 21 | 27 |
    28 | ); 29 | }; 30 | 31 | export default ToggleSwitch; 32 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/12. whileInView/1. Example 1/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const Home = () => { 4 | return ( 5 |
    6 |
    7 | 17 |

    Amazing Card

    18 |

    19 | This card animates beautifully into view! 20 |

    21 |     22 |
    23 |
    24 | ); 25 | }; 26 | 27 | export default Home; 28 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/2. Transitions/src/components/1. FadeComponent.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState } from "react"; 4 | import { motion } from "motion/react"; 5 | 6 | const FadeComponent = () => { 7 | const [visible, setVisible] = useState(false); 8 | 9 | return ( 10 |
    11 | 17 | {visible && ( 18 | 25 | Hello, I'm a fading component! 26 | 27 | )} 28 |
    29 | ); 30 | }; 31 | 32 | export default FadeComponent; 33 | -------------------------------------------------------------------------------- /08. Not Found/2. Challenge/Solutions/app/not-found.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const NotFound = () => { 4 | return ( 5 |
    6 |
    7 |

    8 | 404 - Page Not Found 9 |

    10 |

    11 | The page you're looking for does not exist. 12 |

    13 |

    14 | You might want to check the URL or 15 | 19 | go back to the homepage 20 | 21 | . 22 |

    23 |
    24 |
    25 | ); 26 | }; 27 | 28 | export default NotFound; 29 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/2. Transitions/src/components/2. Sidebar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { motion } from "motion/react"; 4 | 5 | const Sidebar = () => { 6 | const [isOpen, setIsOpen] = useState(false); 7 | 8 | return ( 9 |
    10 | 16 | 23 |

    Sidebar

    24 |

    Content goes here!

    25 |     26 |
    27 | ); 28 | }; 29 | 30 | export default Sidebar; 31 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/3. Draggable Cards/src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import DraggableCard from "@/components/DraggableCard"; 2 | 3 | const App = () => { 4 | return ( 5 |
    6 |
    7 | 12 | Card 1 13 | 14 | 19 | Card 2 20 | 21 | 26 | Card 3 27 | 28 |
    29 |
    30 | ); 31 | }; 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/8. useMotionValue/3. Example 2/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useMotionValue, useTransform } from "motion/react"; 3 | import { ChangeEvent } from "react"; 4 | 5 | const ColorChanger = () => { 6 | const hue = useMotionValue(0); 7 | const backgroundColor = useTransform(hue, (h) => `hsl(${h}, 100%, 50%)`); 8 | 9 | const changeHandler = (e: ChangeEvent) => { 10 | hue.set(parseFloat(e.target.value)); 11 | }; 12 | 13 | return ( 14 |
    15 | 19 |
    20 | 28 |
    29 |
    30 | ); 31 | }; 32 | 33 | export default ColorChanger; 34 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/6. Stagger Animation/src/components/4. StaggeredGridLayout.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]; 4 | 5 | const staggerVariants = { 6 | hidden: { opacity: 0 }, 7 | visible: { opacity: 1 }, 8 | }; 9 | 10 | const StaggeredGridLayout = () => { 11 | return ( 12 | 22 | {items.map((item, index) => ( 23 | 28 | {item} 29 | 30 | ))} 31 | 32 | ); 33 | }; 34 | 35 | export default StaggeredGridLayout; 36 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/9. whileInView/src/components/2. CardFlip.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const CardFlip = () => { 4 | return ( 5 | 6 | 13 |
    14 | Front 15 |
    16 |
    20 | Back 21 |
    22 |     23 |     24 | ); 25 | }; 26 | 27 | export default CardFlip; 28 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/7. Horizontal Scroll/src/components/ScrollCarousel.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion, useScroll, useTransform } from "motion/react"; 4 | import { useRef } from "react"; 5 | import Card from "./Card"; 6 | import { cards } from "../utils/data"; 7 | 8 | const ScrollCarousel = () => { 9 | const targetRef = useRef(null); 10 | 11 | const { scrollYProgress } = useScroll({ 12 | target: targetRef, 13 | }); 14 | 15 | const x = useTransform(scrollYProgress, [0, 1], ["1%", "-95%"]); 16 | 17 | return ( 18 |
    19 |
    20 | 21 | {cards.map((card) => ( 22 | 23 | ))} 24 | 25 |
    26 |
    27 | ); 28 | }; 29 | 30 | export default ScrollCarousel; 31 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/9. useSpring/2. Example 2/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { motion, useSpring, useTransform } from "motion/react"; 3 | import { ChangeEvent } from "react"; 4 | 5 | const ColorChanger = () => { 6 | const hue = useSpring(0, { stiffness: 300, damping: 30 }); 7 | const backgroundColor = useTransform(hue, (h) => `hsl(${h}, 100%, 50%)`); 8 | 9 | const changeHandler = (e: ChangeEvent) => { 10 | hue.set(parseFloat(e.target.value)); 11 | }; 12 | 13 | return ( 14 |
    15 | 19 |
    20 | 28 |
    29 |
    30 | ); 31 | }; 32 | 33 | export default ColorChanger; 34 | -------------------------------------------------------------------------------- /02. Nested Routes/2. Dashboard Project/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | export default function Home() { 4 | return ( 5 |
    9 |
    10 |

    11 | Welcome to the Dashboard App 12 |

    13 |

    14 | Manage your tasks, track analytics, and stay organized with our 15 | powerful dashboard. 16 |

    17 | 23 | Go to Dashboard 24 | 25 |
    26 |
    27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/9. whileInView/src/components/1. StaggeredList.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const StaggeredList = () => { 4 | const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; 5 | 6 | const listVariants = { 7 | hidden: { opacity: 0 }, 8 | visible: { opacity: 1 }, 9 | }; 10 | 11 | return ( 12 | 19 | {items.map((item, index) => ( 20 | 27 | {item} 28 | 29 | ))} 30 | 31 | ); 32 | }; 33 | 34 | export default StaggeredList; 35 | -------------------------------------------------------------------------------- /26. Motions & Animations/3. Projects/1. Scroll Indicator/src/components/ScrollIndicator.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion, useScroll, useTransform } from "motion/react"; 4 | 5 | const ScrollIndicator = () => { 6 | const { scrollYProgress } = useScroll(); 7 | 8 | const lineWidth = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]); 9 | 10 | return ( 11 |
    12 | 19 | 20 |
    21 | {[...Array(100)].map((_, i) => ( 22 |

    23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do 24 | eiusmod tempor incididunt ut labore et dolore magna aliqua. 25 |

    26 | ))} 27 |
    28 |
    29 | ); 30 | }; 31 | 32 | export default ScrollIndicator; 33 | -------------------------------------------------------------------------------- /25. Form Validations/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) { 6 | return ( 7 | 18 | ) 19 | } 20 | 21 | export { Input } 22 | -------------------------------------------------------------------------------- /26. Motions & Animations/1. Topics With Examples/12. whileInView/2. Example 2/app/page.tsx: -------------------------------------------------------------------------------- 1 | import * as motion from "motion/react-client"; 2 | 3 | const boxes = Array.from({ length: 6 }, (_, index) => index + 1); 4 | 5 | const AnimatedBoxes = () => { 6 | return ( 7 |
    8 |

    Scroll to Animate

    9 |
    10 | {boxes.map((box) => ( 11 | 19 | Box {box} 20 | 21 | ))} 22 |
    23 |
    24 | ); 25 | }; 26 | 27 | export default AnimatedBoxes; 28 | -------------------------------------------------------------------------------- /26. Motions & Animations/2. Practice/4. Variants/src/components/2. SlidingMenu.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { useState } from "react"; 3 | import { motion } from "motion/react"; 4 | 5 | const menuVariants = { 6 | closed: { x: "-100%" }, 7 | open: { x: 0 }, 8 | }; 9 | 10 | const SlidingMenu = () => { 11 | const [isOpen, setIsOpen] = useState(false); 12 | 13 | return ( 14 |
    15 | 21 | 28 |
      29 |
    • Home
      • 30 |
    • About
      • 31 |
    • Contact
      • 32 |
    33 |     34 |
    35 | ); 36 | }; 37 | 38 | export default SlidingMenu; 39 | --------------------------------------------------------------------------------