Learn Next.js in Urdu with our detailed YouTube video series! From routing and image optimization to TypeScript and CSS, master Next.js step-by-step and enhance your web development skills.
In today’s digital era, staying updated with cutting-edge technologies is crucial for web developers. Next.js, a React-based framework, has gained immense popularity for its simplicity and powerful features that enable developers to create high-performance, SEO-friendly web applications.
If you’re a developer or enthusiast eager to learn Next.js in Urdu, then this blog post is tailored just for you. We’ll take you through a comprehensive series of YouTube video tutorials, each meticulously crafted to help you master Next.js from the basics to advanced topics all in your native language.
Hacakathon 3 Day 5 TESTING, ERROR
HANDLING, AND BACKEND
INTEGRATION REFINEMENT
Day 5 focuses on preparing your marketplace for real-world deployment by ensuring all components are thoroughly tested, optimized for performance, and ready to handle customer-facing traƯic. The emphasis will be on testing backend integrations, implementing error handling, and refining the user experience
Key Learning Outcomes:
- Perform comprehensive testing, including functional, non-functional, user
acceptance, and security testing. - Implement robust error handling mechanisms with clear, user-friendly fallback
messages. - Optimize the marketplace for speed, responsiveness, and performance metrics.
- Ensure cross-browser compatibility and device responsiveness for a seamless
user experience. - Develop and submit professional testing documentation that meets industry
standards, including a CSV-based test report. - Handle API errors gracefully with fallback UI elements and logs.
- Optimize the marketplace for speed and responsiveness.
- Ensure cross-browser and device compatibility.
- Prepare detailed documentation for testing results and resolutions.
Hacakathon 3 Day 4 BUILDING DYNAMIC
FRONTEND COMPONENTS
FOR YOUR MARKETPLACE
On Day 4, students will focus on designing and developing dynamic frontend components to display marketplace data fetched from Sanity CMS or APIs. This site emphasizes modular, reusable component design and real-world practices for building scalable and responsive web applications.
Key Learning Outcomes:
- Build dynamic frontend components to display data from Sanity CMS or APIs.
- Implement reusable and modular components.
- Understand and apply state management techniques.
- Learn the importance of responsive design and UX/UI best practices.
- Prepare for real-world client projects by replicating professional workflows.
Hacakathon 3 Day 3 how to miigrate data to sanity using api
Hacakathon 3 Day 2 Planning The Technical Foundation
Submission Title:
“Marketplace Technical Foundation – [Mehak Ecommerce]”
sari diagram figma par bnani hai apko … jo batai hai picture dekh kr bnaty jao
This document describes the user journey flow for an eCommerce marketplace, focusing on key steps and their technical implementation. It is tailored for building a robust and user-friendly platform.
Flowchart Overview
Below is the complete user journey flow for an eCommerce marketplace:
Home Page:
User lands on the homepage.
Displays featured categories, popular products, and a search bar.
Product Browsing:
User selects a category or uses the search bar.
Products are displayed with options to filter by price, brand, or ratings.
Product Details:
User clicks on a product to view its details.
Page includes product description, price, availability, and user reviews.
Add to Cart:
User adds the product to the cart.
Cart updates dynamically with quantity and price.
Checkout:
User proceeds to the checkout page.
Provides shipping address and selects a delivery option.
Payment:
User enters payment details.
Secure payment gateway processes the transaction.
Order Confirmation:
Order details are displayed and sent via email.
Order status is updated in the backend.
Shipment Tracking:
User visits the “Order History” section.
Real-time shipment tracking is enabled via API integration.
Delivery:
Product is delivered to the user’s address.
Frontend Requirements:
User receives a notification and can leave a review.
User-friendly interface for browsing products.
Responsive design for mobile and desktop users.
Essential pages: Home, Product Listing, Product Details, Cart, Checkout, and Order Confirmation
Design System Architecture
Create a high-level diagram showing how your system components interact. Use tools
like pen and paper or software like Lucidchart, Figma or Excalidraw. For example, a
more detailed architecture might include workflows such as
Components and Roles:
Frontend (Next.js):
- Displays the user interface for browsing products, managing the cart, and placing orders.
- Handles user interactions and communicates with backend services via APIs.
Sanity CMS:
- Acts as the primary backend to manage product data, customer details, and order records.
- Provides APIs for the frontend to fetch and update data.
Product Data API:
Provides endpoints to fetch product listings, details, and inventory status.
Third-Party APIs:
Integrates services like shipment tracking and payment processing.
Payment Gateway:
Processes user payments securely and provides transaction confirmation.
Also make this EDR diagram in your project.
This diagram will define the relationships between entities in your database.
Example Entities:
- Food Items:
- Fields:
id,name,price,description,image,categoryId.
- Fields:
- Categories:
- Fields:
id,name.
- Fields:
- Users:
- Fields:
id,name,email,password.
- Fields:
- Orders:
- Fields:
id,userId,orderDate,status
- Fields:
APIEndpoints.xlsx
Workflow Diagram
SanitySchema.js
export default {
// Define the document type and its name
name: 'product',
type: 'document',
title: 'Product', // The title displayed in the CMS for this document
fields: [
{
// Field for the product's name
name: 'name',
type: 'string', // Basic text field
title: 'Product Name', // Label for the field in the CMS
validation: (Rule) =>
Rule.required() // Makes this field mandatory
.max(100) // Restricts the maximum length to 100 characters
.error('Product name is required and cannot exceed 100 characters.'),
},
{
// Slug field for generating a URL-friendly identifier
name: 'slug',
type: 'slug',
title: 'Slug',
description: 'URL-friendly identifier for the product.', // Helper text in the CMS
options: {
source: 'name', // Automatically generates the slug based on the product name
maxLength: 200, // Limits the slug length
},
validation: (Rule) =>
Rule.required().error('Slug is required for product identification.'),
},
{
// Field for a detailed description of the product
name: 'description',
type: 'text', // Multi-line text field
title: 'Description',
description: 'Detailed description of the product.',
validation: (Rule) =>
Rule.required() // Makes this field mandatory
.min(20) // Requires at least 20 characters
.max(500) // Limits to a maximum of 500 characters
.error('Description must be between 20 and 500 characters.'),
},
{
// Field for the product's price
name: 'price',
type: 'number', // Numeric field
title: 'Product Price',
validation: (Rule) =>
Rule.required() // Makes this field mandatory
.min(0) // Ensures the price is non-negative
.error('Product price must be a positive value.'),
},
{
// Field for the discount percentage
name: 'discountPercentage',
type: 'number',
title: 'Discount Percentage',
description: 'Percentage discount on the product.',
validation: (Rule) =>
Rule.min(0) // Ensures the discount is not negative
.max(100) // Ensures the discount does not exceed 100%
.error('Discount percentage must be between 0 and 100.'),
},
{
// Field for the price before the discount
name: 'priceWithoutDiscount',
type: 'number',
title: 'Price Without Discount',
description: 'Original price of the product before discount.',
readOnly: true, // Makes this field non-editable in the CMS
// Optional: Auto-calculate this field based on price and discount
initialValue: (doc) => doc.price / (1 - doc.discountPercentage / 100),
},
{
// Field for the product's rating
name: 'rating',
type: 'number',
title: 'Rating',
description: 'Average rating of the product.',
validation: (Rule) =>
Rule.min(0) // Ensures the rating is not negative
.max(5) // Limits the rating to a maximum of 5
.precision(1) // Allows one decimal place
.error('Rating must be between 0 and 5.'),
},
{
// Field for the number of ratings the product has received
name: 'ratingCount',
type: 'number',
title: 'Rating Count',
description: 'Total number of ratings received by the product.',
validation: (Rule) => Rule.min(0).error('Rating count must be a non-negative number.'),
},
{
// Array field for tags associated with the product
name: 'tags',
type: 'array',
title: 'Tags',
of: [{ type: 'string' }], // Each tag is a string
options: {
layout: 'tags', // Allows for tag-style input
},
description: 'Add tags such as "new arrival", "bestseller", or "limited edition".',
},
{
// Array field for available product sizes
name: 'sizes',
type: 'array',
title: 'Sizes',
of: [{ type: 'string' }], // Each size is a string
options: {
layout: 'tags', // Allows for tag-style input
},
description: 'Available sizes for the product (e.g., S, M, L, XL, XXL).',
},
{
// Field for the product image
name: 'image',
type: 'image',
title: 'Product Image',
description: 'High-quality image of the product.',
options: {
hotspot: true, // Enables cropping and focal point selection
},
validation: (Rule) => Rule.required().error('Product image is required.'),
},
{
// Field for the SEO-friendly title
name: 'seoTitle',
type: 'string',
title: 'SEO Title',
description: 'Title for SEO optimization (max 60 characters).',
validation: (Rule) => Rule.max(60).error('SEO title cannot exceed 60 characters.'),
},
{
// Field for the SEO-friendly description
name: 'seoDescription',
type: 'text',
title: 'SEO Description',
description: 'Meta description for SEO optimization (max 160 characters).',
validation: (Rule) => Rule.max(160).error('SEO description cannot exceed 160 characters.'),
},
],
};
Hacakathon 3 Day 1 Laying the foundation for your marketplace journey
Hackathon 3 : How to create ecommerce mock API for free.
Milestone 3: Assignments:
– Create a dynamic blog with multiple posts using Next.js routing.
– Implement a comments section using React state.
Milestone 3: (Project) Develop a basic e-commerce site featuring products, product details, and a shopping cart.
– Integrate basic API routes for handling products data.
How To Test Books API Using Next Js And Thunder Client
Nextjs + API Integration | Crypto Dashboard Tutorial
Milestone 2: Basic UI Design, Custom CSS & Tailwind CSS
Objective: Learn the basics of UI design with React components and implement styling using Custom CSS and Tailwind CSS.
- Assignments:
- Build a simple multi-page website using React components.
- Apply Custom CSS to style the website, ensuring responsiveness.
- Apply Tailwind CSS to style the website, ensuring responsiveness.
Milestone 2: Portfolio Project
– Design and develop a personal portfolio website with at least three pages (Home, About, Contact).
– Use Tailwind CSS for layout and styling.
Milestone 1: Installation & Hello World
Objective: Establish a foundational understanding of Next.js by setting up the environment and creating your first application.
- Assignments:
- Create a “Hello World” Next.js application.
- Explore and document the folder structure of a Next.js project.
- Project:
- Develop a simple webpage that displays a personalized “Hello World” message with basic styling
Step 0: Hackathon – Milestone-Based Interactive Resume Builder – Submission Form
Submission Guidelines:
1- Milestone 1 (Static Resume Builder): Submit Milestone 2, which contains your HTML, CSS, and TypeScript code.
2- Milestone 2 (Publish and Deploy): Share the link to your GitHub repository and your deployed Vercel URL.
3- Milestone 3 (Dynamic Resume Builder): Ensure the form functionality is working. Submit a link to your live project and GitHub repository.
4- Milestone 4 (Editable Resume): Make sure the resume is editable. Submit the updated code and live project link.
5- Milestone 5 (Unique Path and Shareable Link): Submit the project with unique URL functionality and sharing options.
Theory Lectures
Routing and Static Routes in Next.js In Urdu
Video Overview:
Routing is at the core of any web application, defining how users navigate through your site. This video introduces you to the basics of routing in Next.js, covering static routes, which are essential for creating pages like “About Us” or “Contact” that don’t change dynamically.
Key Learnings:
- Setting up your first static route.
- Understanding the file-based routing system in Next.js.
- Practical examples of when to use static routes versus dynamic routing.
Why It Matters: Mastering routing is essential for creating seamless user experiences, ensuring users can easily find and access the content they need.
Images in Next.js In Urdu
Video Overview:
Efficiently handling images is vital for optimizing your website’s performance. This video delves into Next.js’s powerful image component, which allows for automatic image optimization, lazy loading, and responsive image sizes.
Key Learnings:
- How to use the Next.js
<Image>component. - Understanding the importance of image optimization for web performance.
- Techniques for implementing responsive images.
Why It Matters: Proper image management can significantly reduce page load times, improve SEO, and provide a better user experience.
Title Tag in Next.js In Urdu
Video Overview:
Styling is what makes a website visually appealing. This tutorial walks you through how to incorporate CSS tags into your Next.js project, helping you to apply global and component-level styles effectively.
Key Learnings:
- Implementing global styles using
_app.js. - Applying component-specific styles.
- Best practices for maintaining clean and organized CSS.
Why It Matters: CSS is essential for creating visually cohesive and user-friendly interfaces, making it a critical skill in your Next.js toolkit.
Facebook Online Avtar Tags in Next.js
Facebook uses Open Graph (OG) meta tags to determine how your content is displayed when shared. These tags control everything from the title, description, and image to the URL and type of the content. Adding these tags to your Next.js pages ensures that when someone shares a link to your site on Facebook, it looks appealing and provides relevant information.
Adding Open Graph Tags in Next.js
To add Facebook Open Graph meta tags in a Next.js application, you can use the Head component from next/head. The Head component allows you to inject elements into the <head> section of your page.
Adding Facebook Open Graph tags to your Next.js application is a simple but powerful way to enhance the appearance of your content on social media.
Navigation Bar Tutorial (Step-by-Step)
Video Overview:
The navigation bar is a key component of any website, providing users with an easy way to explore different sections. This video offers a step-by-step guide to creating a responsive and user-friendly navigation bar in Next.js.
Key Learnings:
- Structuring your navigation bar using Next.js components.
- Styling the navigation bar with CSS or Tailwind CSS.
- Implementing responsive design for better usability on mobile devices.
Why It Matters: A well-designed navigation bar enhances user experience by making it easier for visitors to find the information they’re looking for.
