, , , Subscribe to newsletter
+
+
+```
+
+#### 5) Radio Button
+
+Used for selecting one option from a set.
+
+```bash copy filename="Html"
+
+Male
+Female
+
+
+```
+
+#### 6) Select Dropdown
+
+Used for selecting one option from a dropdown list
+
+```bash copy filename="Html"
+
+
+ Volvo
+ Saab
+ Mercedes
+ Audi
+
+
+```
+
+```bash copy filename="Css"
+
+select {
+ width: 100%;
+ padding: 10px;
+ margin: 5px 0 20px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+}
+
+
+```
+
+#### 7) Button
+
+Used for submitting forms or triggering actions
+
+```bash copy filename="Html"
+
+Submit
+
+```
+
+```bash copy filename="Css"
+
+button {
+ background-color: #4CAF50;
+ color: white;
+ padding: 15px 20px;
+ margin: 5px 0;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #45a049;
+}
+
+
+```
+
+**Form Example**
+
+```bash copy filename="Html"
+
+
+
+
+```
+
+```bash copy filename="Css"
+
+.card {
+ width: 100%;
+ max-width: 24rem;
+ padding: 1rem;
+ background-color: white;
+ border: 1px solid #e5e7eb;
+ border-radius: 0.5rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+}
+
+.form-title {
+ font-size: 1.25rem;
+ font-weight: 500;
+ color: #111827;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.form-label {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: #111827;
+}
+
+.form-input {
+ background-color: #f9fafb;
+ border: 1px solid #d1d5db;
+ color: #111827;
+ font-size: 0.875rem;
+ border-radius: 0.5rem;
+ padding: 0.625rem;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.form-input:focus {
+ border-color: #3b82f6;
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.form-options {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.form-remember {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.form-checkbox {
+ width: 1rem;
+ height: 1rem;
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ background-color: #f9fafb;
+}
+
+.form-checkbox:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.form-checkbox-label {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: #111827;
+}
+
+.form-link {
+ font-size: 0.875rem;
+ color: #3b82f6;
+ text-decoration: none;
+}
+
+.form-link:hover {
+ text-decoration: underline;
+}
+
+.form-button {
+ width: 100%;
+ color: white;
+ background-color: #3b82f6;
+ border: none;
+ font-size: 0.875rem;
+ font-weight: 500;
+ border-radius: 0.5rem;
+ padding: 0.625rem;
+ cursor: pointer;
+ text-align: center;
+ box-sizing: border-box;
+}
+
+.form-button:hover {
+ background-color: #2563eb;
+}
+
+.form-button:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+.form-footer {
+ font-size: 0.875rem;
+ color: #6b7280;
+}
+
+.form-footer .form-link {
+ color: #3b82f6;
+}
+
+
+```
+
+
+ Styling forms with CSS enhances the user experience by making forms more
+ visually appealing and easier to use. By understanding and applying various
+ CSS properties, you can create beautiful and responsive forms that fit
+ seamlessly into your web design
+
diff --git a/pages/programming-tutorials/html-and-css/css-fundamentals.mdx b/pages/programming-tutorials/html-and-css/css-fundamentals.mdx
new file mode 100644
index 00000000..7f6d5dfa
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/css-fundamentals.mdx
@@ -0,0 +1,113 @@
+import { Tabs } from "nextra/components";
+import { Callout } from "nextra/components";
+
+# Introduction to CSS
+
+CSS (Cascading Style Sheets) is a language used to describe the style and layout of web pages. It separates the content (HTML) from the visual presentation, allowing you to control the look and feel of multiple web pages with a single CSS file. By defining styles in a CSS file, you can easily manage and update the design of your website without altering the HTML structure
+
+### Usage of CSS
+
+CSS is used to enhance the appearance of web pages by defining styles for elements. This includes setting colors, fonts, spacing, layout, and more. It allows for a consistent look and feel across a website, making it easier to maintain and update.
+
+### CSS Syntax
+
+CSS rules are composed of selectors and declaration blocks. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a property and a value, defining how the selected element should be styled
+
+**Declaration Block:** Contains one or more declarations separated by semicolons
+
+```bash copy filename="Css"
+p {
+color: blue;
+ font-size: 16px;
+}
+
+```
+
+### Introduction to Types of CSS
+
+When learning CSS, it's important to understand the three main ways to apply styles to HTML documents: Inline, Internal, and External CSS. Each method has its advantages and use cases. By mastering these methods, you can choose the best approach for different scenarios, ensuring your web pages are styled efficiently and effectively.
+
+**Inline CSS**
+
+Description: Inline CSS involves adding style directly within an HTML element using the style attribute. This method is useful for applying unique styles to a single element.
+
+ ```bash copy filename="Html"
+
+This is an inline styled paragraph.
+
+````
+
+**Usage:** Best for quick, specific styling of individual elements without affecting
+other parts of the document
+
+**Internal CSS**
+
+Description: Internal CSS involves placing CSS rules within the style tag inside the head section of an HTML document. This method allows you to style the entire document without creating an external file
+
+ ```bash copy filename="Html & Css"
+
+
+
+
+
+````
+
+**Usage**: Ideal for applying styles to a single document, especially when the styles are document-specific and do not need to be reused elsewhere.
+
+**External CSS**
+
+Description: External CSS involves linking an external .css file to an HTML document using the link tag. This method is the most efficient for managing styles across multiple web pages.
+
+**HTML File (index.html):**
+
+```bash copy filename="Html"
+
+
+
+
+ External CSS Example
+ This is a heading
+ This is a paragraph with external CSS.
+
+
+
+```
+
+**CSS File (styles.css):**
+
+```bash copy filename="Css"
+
+body {
+ background-color: lightblue;
+}
+
+h1 {
+ color: navy;
+}
+
+p {
+ font-size: 16px;
+}
+
+```
+
+**Usage**:
+In this example, the HTML file index.html links to an external CSS file styles.css using the link tag. The external CSS file contains styles that set the body background color to light blue, the heading color to navy, and the paragraph font size to 16 pixels. These styles are applied to the HTML document and can be reused across multiple HTML files by linking the same CSS file.
+
+**Inline CSS**: Styles are applied directly within the HTML element using the style attribute.
+
+**Internal CSS**: Styles are defined within the style tag inside the head section of the HTML document.
+
+**External CSS**: Styles are defined in a separate CSS file and linked to the HTML document using the link tag
+
+
+ Each type of CSS Type has its use cases, and understanding them allows you to
+ choose the most appropriate method for styling your web pages
+
diff --git a/pages/programming-tutorials/html-and-css/css-grid.mdx b/pages/programming-tutorials/html-and-css/css-grid.mdx
new file mode 100644
index 00000000..9faa2c0f
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/css-grid.mdx
@@ -0,0 +1,222 @@
+import { Callout } from "nextra/components";
+
+## Grid
+
+CSS Grid Layout, or simply Grid, is a powerful layout system in CSS that allows for the creation of complex, responsive web designs. It enables you to arrange elements in rows and columns, providing greater control over layout compared to older methods like floats or flexbox.
+
+
+
+### Grid Container Properties
+
+#### 1) display: grid
+
+**Description:** Defines an element as a grid container, transforming its direct children into grid items
+
+```bash copy filename="Css"
+css Grid
+.container {
+ display: grid;
+}
+
+```
+
+#### 2) grid-column-gap and grid-row-gap (or gap)
+
+**Description:** Specifies the space (gaps) between columns and rows
+
+```bash copy filename="Css"
+
+.container {
+ display: grid;
+ gap: 10px; /* 10px gap between both rows and columns */
+}
+
+
+```
+
+#### 3) grid-template-columns and grid-template-rows:
+
+**Description:** Defines the columns and rows of the grid with a space-separated list of values
+
+**Values:** Can be specified in units such as pixels (px), percentages (%), fractions (fr), or auto.
+
+```bash copy filename="Css"
+.container {
+ display: grid;
+ grid-template-columns: repeat(3, 300px); /* Three columns: first and last are 1 fraction, middle is 2 fractions */
+ grid-template-rows: 100px auto 100px; /* Three rows: first and last are 100px, middle adjusts to content */
+ or
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); */
+ grid-template-rows: repeat(auto-fit, minmax(400px, 1fr)); */
+}
+
+```
+
+### CSS Grid: Responsive Layout with auto-fit and minmax
+
+CSS Grid's repeat, auto-fit, and minmax functions are incredibly powerful for creating responsive layouts. This combination allows you to create a flexible grid that adjusts the number of columns based on the available space, ensuring that each column maintains a minimum and maximum size
+
+**Key Concepts**
+
+#### 1) grid-template-columns:
+
+Defines the column structure of the grid.
+
+#### 2) repeat():
+
+A function that repeats a set of columns or rows.
+
+**repeat(auto-fit, ...):** Creates as many columns as will fit into the container.
+
+**repeat(auto-fill, ...):** Similar to auto-fit, but may create empty columns if the space is available.
+
+#### 3) minmax(min, max):
+
+Defines a size range for the columns or rows.
+
+**min:** The minimum size.,
+**max:** The maximum size
+
+Html page
+
+```bash copy filename="Html"
+
+.grid {
+
+
+
+ Responsive Grid Layout
+
+
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
Item 6
+
+ Just like Flexbox, CSS Grid also provides powerful properties for aligning and
+ justifying items within the grid container. These properties allow you to
+ control the placement and alignment of grid items, ensuring a consistent and
+ visually appealing layout
+
+
+**align-items:**
+
+**Description:** Aligns Grid items along the cross axis (vertical by default).
+
+**Values:**
+
+**stretch (default):** Items stretch to fill the container.
+
+**start:** Items are aligned to the start of the cross axis.
+
+**End:** Items are aligned to the end of the cross axis.
+
+**center:** Items are centered along the cross axis.
+
+**baseline:** Items are aligned along their baselines.
+
+```bash copy
+
+Css Grid
+.container {
+ display: grid;
+ gap: 10px;
+ align-content: center; /* Aligns all rows to the center vertically */
+}
+
+```
+
+**justify-content:**
+
+**Description:** Aligns Grid items along the main axis (horizontal by default).
+
+**Values:**
+
+**start (default):** Items are aligned to the start of the container.
+
+**End:** Items are aligned to the end of the container.
+
+**center:** Items are centered along the main axis.
+
+**space-between:** Items are evenly distributed, with the first item at the start and the last item at the end.
+
+**space-around:** Items are evenly distributed with equal space around them.
+
+**space-evenly:** Items are evenly distributed with equal space between them
+
+
+
+
+ CSS Grid is a powerful layout system in CSS that allows the creation of
+ complex and responsive grid-based layouts with ease. It offers flexibility and
+ control over both rows and columns, making it a versatile tool for web
+ designers and developers.
+
diff --git a/pages/programming-tutorials/html-and-css/css-variables.mdx b/pages/programming-tutorials/html-and-css/css-variables.mdx
new file mode 100644
index 00000000..f8169ba8
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/css-variables.mdx
@@ -0,0 +1,69 @@
+import { Callout } from "nextra/components";
+
+## Css Variables
+
+CSS Variables, also known as CSS Custom Properties, allow you to store values in a reusable way within your CSS. They are useful for maintaining consistency across a website and making global changes to styles easy. CSS Variables are defined with a custom property name that starts with -- and are accessed using the var() function
+
+
+
+### Defining and Using CSS Variables
+
+#### 1) Defining Variables
+
+CSS Variables are defined within a CSS rule, typically within the :root selector to make them globally available throughout the document.
+
+```bash copy filename="Css"
+
+:root {
+ --primary-color: #4CAF50;
+ --secondary-color: #f4f4f4;
+ --padding: 10px;
+ --font-size: 16px;
+}
+
+```
+
+#### 2) Using Variables
+
+To use a CSS variable, you use the var() function, passing the variable name as an argument.
+
+```bash copy filename="Css"
+
+body {
+ background-color: var(--secondary-color);
+ font-size: var(--font-size);
+}
+
+.header {
+ background-color: var(--primary-color);
+ padding: var(--padding);
+}
+
+
+```
+
+
+
+**Explanation:**
+
+Defining Variables:
+
+In the :root selector, variables such as --primary-color, --secondary-color, --accent-color, --padding, and --font-size are defined.
+This makes these variables accessible throughout the CSS.
+Using Variables:
+
+The var() function is used to apply the variables in different CSS rules.
+For example, var(--primary-color) is used to set the background color of the .header.
+Hover State:
+
+A pseudo-class (:hover) is used for the button to change its background color on hover.
+The darken() function, often part of a CSS preprocessor like Sass, would be used to darken the color by 10%.
+
+
+ CSS Variables provide a powerful way to manage and maintain styles in a web
+ project. By using variables for common values like colors, spacing, and fonts,
+ you can ensure consistency, simplify maintenance, and create dynamic,
+ responsive designs. Integrating CSS Variables with JavaScript further enhances
+ their capabilities, allowing for real-time updates to the styling of your web
+ pages
+
diff --git a/pages/programming-tutorials/html-and-css/css-videos.mdx b/pages/programming-tutorials/html-and-css/css-videos.mdx
new file mode 100644
index 00000000..0a280113
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/css-videos.mdx
@@ -0,0 +1,247 @@
+import { Callout } from "nextra/components";
+
+import Link from "next/link";
+
+## Css Videos
+
+Styling videos with CSS allows you to control their appearance and layout on your web page. You can set dimensions, apply borders, shadows, and control the display of video elements to create a more engaging and polished user experience.
+
+
+
+### Basic Video Styling
+
+##### Setting Dimensions:
+
+```bash copy filename="Css"
+
+video {
+ width: 100%;
+ height: auto;
+}
+
+```
+
+**You can set the width and height of the video element using CSS.**
+
+##### Adding Borders and Shadows:
+
+```bash copy filename="Css"
+
+video {
+ border: 5px solid #4CAF50;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+```
+
+**Borders and shadows can enhance the appearance of your videos.**
+
+##### Rounding Corners:
+
+```bash copy filename="Css"
+
+video {
+ border-radius: 10px;
+}
+
+```
+
+**Applying a border-radius can give your videos rounded corners.**
+
+### Css Video Examples
+
+#### 1. Video Tag
+
+The video tag is used to embed video content directly into your HTML. It supports various attributes for control, such as autoplay, loop, and controls
+
+```bash copy filename="Html"
+
+
+
+
+
+ Css Videos
+ Css Videos
+
+ Videos
+
+
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui alias
+ minus quis aliquid! Sit dolor aliquid numquam reiciendis expedita.
+ Repellat aliquam, rem numquam totam ex cupiditate amet non earum
+ doloremque.
+
+
Learn More
+
+
+
+
+```
+
+```bash copy filename="Css"
+
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+section {
+ background: aliceblue;
+ min-height: 100vh;
+ padding: 2rem;
+ position: relative;
+ overflow: hidden;
+}
+
+h2 {
+ font-size: 2rem;
+ font-weight: 800;
+}
+.video-section video {
+ width: 100%;
+}
+
+.content {
+ position: absolute;
+ top: 50%;
+ max-width: 40%;
+ padding: 1rem;
+}
+p {
+ font-weight: 600;
+ font-size: 2rem;
+ color: aliceblue;
+}
+
+button {
+ padding: 0.5rem 2rem;
+ border-radius: 5px;
+ background: aqua;
+ cursor: pointer;
+ border: none;
+}
+
+```
+
+#### 3. Iframe Embed
+
+The iframe tag is used to embed videos hosted on platforms like YouTube and Vimeo. This method allows you to display external video content within your webpage.
+
+```bash copy filename="Html"
+
+
+
+
+ Css Videos
+
+ Styling videos with CSS allows you to create visually appealing and responsive
+ media elements. By using basic styling techniques, you can control the
+ dimensions, borders, and shadows of video elements. Advanced techniques, such
+ as responsive design and overlay text, enhance the user experience and make
+ your web pages more engaging. Mastering these CSS techniques will enable you
+ to effectively integrate and style videos within your web projects
+
diff --git a/pages/programming-tutorials/html-and-css/deploying.mdx b/pages/programming-tutorials/html-and-css/deploying.mdx
new file mode 100644
index 00000000..ba7ec13c
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/deploying.mdx
@@ -0,0 +1,95 @@
+import { Steps } from 'nextra/components'
+
+# Deployment and Hosting
+
+### Deployment
+
+Refers to the process of transferring a web application from a local development environment to a live server where it can be accessed by users.
+
+##### Steps under taken during deployment
+
+
+### Build Process
+
+Converting source code into a format that can be efficiently run on a server. This might include compiling, bundling, and minifying code.
+
+### Configuration
+
+Setting environment variables, configuring servers, and setting up databases.
+
+### Testing
+
+Ensuring that the application works as expected in the live environment. This may involve running automated tests or manual testing.
+
+### Transfer
+
+Uploading the application files to the server. This can be done via FTP, SSH, or through deployment tools and services.
+
+### Monitoring and Maintenance
+
+Continuously monitoring the application for issues and making updates as needed.
+
+
+### Hosting
+
+This is the service that provides the space (storage) for your website's files and the computing power to run it, or provides the infrastructure necessary to run a website or the web application which include;
+
+**Web Server:** A server that delivers web pages to users' browsers upon request. Popular web servers include Apache, Nginx, and Microsoft's Internet Information Services (IIS).
+
+**Domain Name:** A human-readable address (like example.com) that users can type into their browsers to access the website. Domain names are registered through domain registrars.
+
+**Storage:** Space on a server to store the website's files, including HTML, CSS, JavaScript, images, and other assets.
+
+**Bandwidth:** The amount of data that can be transferred from the server to users over a period. Higher bandwidth allows more users to access the site simultaneously.
+
+**Security:** Measures to protect the website from threats such as DDoS **(Distributed Denial-of-Service)** attacks, hacking attempts, and malware. This includes SSL certificates for HTTPS, firewalls, and regular security updates.
+
+#### Types of Hosting
+
+**Shared Hosting:** Multiple websites share the same server and resources. This is cost-effective but can be slower and less secure.
+
+**VPS Hosting:** A Virtual Private Server (VPS) provides more control and resources than shared hosting, with each website running on its own virtual environment.
+
+**Dedicated Hosting:** An entire server is dedicated to one website. This offers maximum performance and control but is more expensive.
+
+**Cloud Hosting**: Websites are hosted on a network of servers in the cloud, offering scalability and reliability. Examples include Amazon Web Services (AWS), Google Cloud Platform (GCP), and Microsoft Azure.
+
+**Managed Hosting:** The hosting provider takes care of server management tasks, including updates, security, and backups.
+
+### Deployment and Hosting Services.
+
+#### Vercel
+ A service for hosting websites and web applications with continuous deployment from Git repositories.
+ ##### Deployment and Hosting using Vercel
+
+
+### Prepare Your Application
+
+Ensuring your code is clean and free of errors,
+setting environment variables for production,
+building your application (if necessary).
+
+### Create a Vercel Account
+
+Sign up for a free or paid Vercel account using your gitHub credentials in oreder link your Git provider account to Vercel.
+
+### Import your Project
+
+Select the Git repository containing your website code and import it into Vercel.
+
+### Framework (Optional)
+
+Vercel often automatically detects the framework your project uses (e.g., Next.js, Gatsby). You can confirm or adjust this setting if needed.
+
+### Set Environment Variables
+
+If your application requires environment variables
+
+**Go to Project Settings:** Navigate to your project settings on Vercel.
+
+**Environment Variables:** Add the required environment variables under the "Environment Variables" section.
+
+### Deploy Your Project
+
+Press the deploy button and Vercel will build and deploy your website. You'll be provided with a live URL for your website. If connected to a Git repository, Vercel will automatically deploy your project every time you push changes to the connected branch.
+
\ No newline at end of file
diff --git a/pages/programming-tutorials/html-and-css/github.mdx b/pages/programming-tutorials/html-and-css/github.mdx
new file mode 100644
index 00000000..5db9fb0d
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/github.mdx
@@ -0,0 +1,137 @@
+import { Callout } from 'nextra/components';
+import Link from 'next/link';
+import { Steps } from 'nextra/components';
+
+## GITHUB
+**Definition :**
+GitHub is a cloud-based service that helps developers store their repositories(projects) online,
+collaborate with other programmers on code projects,share code publicly or privately and access a vast array of open-source projects and contribute to them.
+
+#### Getting started with GitHub.
+Go to
+```
+This command clones(copy) an existing repository using its URL provided by github to your local machine.
+
+**3. Checking the Status**
+```bash copy filename="Terminal"
+git status
+```
+This command shows the status of the working directory. It lets you see which changes have been staged(made), which haven't, and which files aren't being tracked by Git.
+
+**4. Adding Files**
+```bash copy
+git add .
+```
+This command adds all changes in the directory.
+
+**5. Committing Changes**
+```bash copy filename="Terminal"
+git commit -m "commit message"
+```
+This command commits the staged changes under a descriptive message.
+
+**6. Pushing Changes to a Remote Repository**
+```bash copy
+git push origin
+```
+This command pushes the committed changes to the specified branch of the remote repository.
+
+**7. Pulling Changes from a Remote Repository**
+```bash copy
+git pull origin
+```
+This command fetches and merges changes from the specified branch of the remote repository into your current branch.
+
+**8. Creating a New Branch**
+```bash copy
+git branch
+```
+This command creates a new branch with the specified name.
+```bash copy
+git branch
+```
+Lists all branches in your local repository.
+
+**9. Merging a Branch**
+```bash copy
+git merge
+```
+This command merges the specified branch into the current branch.
+
+**10. Deleting a Branch**
+```bash copy
+git branch -d
+```
+This command deletes the specified branch.
+
+
+## GITHUB DESKTOP
+**Definition :**
+Is a graphical user interface (GUI) application that provides a convenient way to interact with GitHub repositories(projects). It simplifies the Git workflow, making it accessible to developers who prefer a visual approach over the command line.
+
+##### IMPORTANCE
+
+**Cloning Repositories:** simplifies cloning of repositories from GitHub to your local machine.
+
+ **Cloning:** is making a copy of a repository stored on GitHub and putting it on your machine.
+
+**Committing Changes:** Stage and commit changes with a user-friendly interface.
+
+**Branch Management:** Create, switch, and merge branches visually.
+
+**Pull Requests:** Review and create pull requests directly from the application.
+
+**Syncing Changes:** Push and pull changes between local and remote repositories.
+
+#### Getting Started with GitHub Desktop.
+
+
+#### Download and Install GitHub Desktop
+
+Go to
+
+
+#### Implementing GitHub Desktop Features.
+
+**1. Cloning**
+
+Click on the **File** menu at the top left corner of the GitHub Desktop window.
+
+Select **Clone repository...** from the dropdown menu.
+
+In the **Clone a repository** window that appears, select the tab **GitHub.com** if it's not already selected.
+
+Browse or search for the repository you want to clone and click on the it to select it.
+
+Choose where you want to clone the repository on your local machine by clicking **Choose...** next to **Local Path**. Select or create a folder/directory where you want the repository to be saved locally.
+
+Finally click the clone button to start cloning.
+
+**2. Add a Local Repository**
+
+Launch GitHub Desktop on your computer. In the top menu, click on **File** and select **Add Local Repository...**
+
+A dialog box will appear. Click the **Choose...** button to navigate to the directory where your local repository is stored. Select the folder and click **Open.**
+
+After selecting the folder, confirm by clicking the "Add Repository" button.
+
+If the repository is new and hasn't been published to GitHub yet, once you click the **Publish repository** button, a dialog box will appear asking for details about your repository, enter a name for your repository, optionally, you can add a description and Choose the visibility of your repository (Public or Private).
+
+Finally click on the **Publish Repository** button to publish your local repository to GitHub.
diff --git a/pages/programming-tutorials/html-and-css/html-css-projects.mdx b/pages/programming-tutorials/html-and-css/html-css-projects.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/html-and-css/html-fundamentals.mdx b/pages/programming-tutorials/html-and-css/html-fundamentals.mdx
new file mode 100644
index 00000000..689fc327
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/html-fundamentals.mdx
@@ -0,0 +1,244 @@
+import { Callout } from "nextra/components";
+import { Steps } from "nextra/components";
+
+# **WHAT IS HTML?**
+
+HTML (HyperText Markup Language) is a markup language that web developers use to structure and describe the content of a webpage (not a programming language). For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. Web browsers understand HTML and render HTML code as websites.
+
+
+
+## **HTML Document Layout**
+
+```HTML filename="Html"
+
+
+
+
+Page Title
+
+
+
+My First Heading
+My first paragraph.
+
+
+
+
+```
+
+### Layout Exaplanations
+
+`` : Is used to define the document type and version of HTML being used in a webpage and ensures that the web browser renders the page correctly according to the HTML5 specifications.
+
+`` : is the root element of an HTML document. It encompasses all the content of the webpage.
+
+`
+#### Download and Install VS Code
+
+If you haven't already, download and install VS Code from the official website(link and procedures in the html and css tutorials introduction).
+
+#### Set Up Your Project Folder
+
+On your computer, create a new folder where you'll store your website files. Open the folder in Vs code.
+
+#### Create your first HTML file
+
+In VS Code, go to the "File" menu again and select "New File" (or press Ctrl+N).
+Name your new file **index.html** ( this is a common naming convention for the main page of a website).
+
+#### Add Basic HTML Structure
+
+Open the **index.html** file.
+Type **!** and press **Tab** or **Enter**. This is a shortcut provided by Emmet, a plugin included in VS Code that helps you write HTML and CSS faster. It will generate a basic HTML structure for you, and it should look like this;
+
+```HTML5 copy filename="Html"
+
+
+
+ Document
+
+
+
+
+
+
+```
+
+
+
+## HTML Elements
+
+HTML elements are the building blocks of HTML documents and consist of an opening tag, content, and a closing tag.
+
+**Attributes**; are used to provide additional information about HTML elements. Attributes are always included in the opening tag of an element and consist of a name and a value. They modify the default behavior or appearance of the elements they are associated with.
+
+### Examples include;
+
+`
` : Used to write paragraphs in an HTML page.
+
+```HTML5 copy
+This is a paragraph tag/element
+```
+
+`This is a the biggest heading...
+This is a the smallest heading...
+```
+
+`This is a the heading ...
+```
+
+`This is a the link...
+```
+
+`Username
+```
+
+`Submit
+ Reset
+```
+
+`
`: It's like a box that you can use to group other HTML elements like the paragraphs together.
+
+```HTML5 copy filename="Html"
+
+
Content inside a div.
+
+### Unordered lists
+
+Used for lists where the order of items doesn't matter.
+They are created using the `` and `` tags.
+Each list item is preceded by a bullet point.
+```HTML5 copy
+
+ Item 1
+ Item 2
+ Item 3
+
+```
+
+### Ordered lists
+
+Used for lists where the order of items is important.
+They are created using the `` and `` tags.
+Each list item is preceded by a number.
+
+```HTML5 copy filename="Html"
+
+ First item
+ Second item
+ Third item
+
+```
+
+
+
+
+ There are some element that don't have a closing tag and are known as self
+ closing elements
+
+
+`First line
+```
+
+`
+
London
+
London is the capital of England.
+
`: Bold text.
+
+``: Italic text.
+
+``: Underlined text.
+
+``: Larger text.
+
+``: Smaller text.
+
+``: Superscript text.
+
+``: Subscript text.
+
+``: Important text (often rendered bold).
+
+#### HtmlTables
\ No newline at end of file
diff --git a/pages/programming-tutorials/html-and-css/index.mdx b/pages/programming-tutorials/html-and-css/index.mdx
new file mode 100644
index 00000000..6bf1040e
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/index.mdx
@@ -0,0 +1,53 @@
+import { Steps } from "nextra/components";
+import Link from "next/link";
+import { Callout } from "nextra/components";
+
+# Introduction to HTML and CSS
+
+Welcome to the exciting world of web development! HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies used to create and style websites. HTML provides the structure of the page, while CSS is used to control the visual presentation, including layout, colors, and fonts. Together, they enable you to build visually appealing and interactive websites.
+
+**HTML (HyperText Markup Language)**: Imagine HTML as the skeleton of a website. It defines the structure and content of a webpage, using tags to tell the browser what to display and how to organize it. Think of headings, paragraphs, images, and links – these are all created with HTML tags.
+
+
+
+
+ HTML tags are the building blocks of web pages. Each HTML tag consists of a
+ keyword enclosed in angle brackets, and they often come in pairs: an opening
+ tag and a closing tag eg `
`.
+
+
+**CSS (Cascading Style Sheets)**: Once the webpage structure is set with HTML, CSS is like the designer's toolbox. It allows you to add style and visual flair to your webpage. You can control fonts, colors, layouts, backgrounds, and more, making your website come alive!
+
+
+
+### IDE( Integrated Development Environment)
+
+Is a software application that provides comprehensive facilities to computer programmers for software development. In simple terms an IDE (Integrated Development Environment) is like a toolbox for programmers. An IDE can be extremely helpful because it brings together many tools into a single application, making the process of writing, testing, and debugging code easier and more efficient.
+
+#### Setting Up Your IDE
+
+An IDE ( Integrated Development Environment) offers features like syntax highlighting, code completion, and debugging tools, making coding easier and more efficient. Here is the commonly used beginner-friendly IDE:
+
+**Visual Studio Code (VS Code)**
+
+Visual Studio Code is a powerful, free, and open-source code editor developed by Microsoft. It supports a wide range of programming languages like; HTML, CSS, JavaScript,etc, and comes with a variety of extensions to enhance your coding experience.
+
+
+
+**installation Steps**
+
+
+#### Download VS Code:
+
+Click here 👉👉
diff --git a/pages/programming-tutorials/html-and-css/intro-to-web.mdx.mdx b/pages/programming-tutorials/html-and-css/intro-to-web.mdx.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/html-and-css/layouts-responsive.mdx b/pages/programming-tutorials/html-and-css/layouts-responsive.mdx
new file mode 100644
index 00000000..f14a3d28
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/layouts-responsive.mdx
@@ -0,0 +1,92 @@
+import { Callout } from "nextra/components";
+
+## CSS Layout and Responsive Design
+
+CSS layout and responsive design are fundamental skills for creating modern web pages that are both visually appealing and functional across various devices and screen sizes. This involves using CSS to control the positioning, sizing, and responsiveness of elements on a webpage.
+
+**CSS Responsive Design**
+is an approach to web design that ensures web pages look good and function well on a variety of devices and screen sizes. By using CSS, you can create layouts that adapt to different screens, providing an optimal viewing experience for users, whether they're on a desktop, tablet, or mobile device
+
+
+
+
+
+
+
+**Example 2)**
+
+```bash copy filename="Html"
+
+
+
+ Responsive Design
+
+
+
+
+
+
Desishub Codding School
+
+
+
+
+
+```
+
+```bash copy filename="Css"
+
+ * {
+ font-family: Arial, sans-serif;
+ padding:0;
+ margin:0;
+ box-sizing: border-box;
+ }
+ .container {
+ background: blue;
+ min-height: 100vh;
+ display:flex;
+ align-items:center;
+ justify-items:center;
+ }
+ .header {
+ padding: 20px;
+ font-size:4rem;
+ font-weight:800;
+ }
+
+ /* Responsive adjustments */
+
+ @media (max-width: 768px) {
+ .container {
+ background: red;
+ }
+ . header {
+ font-size:2rem;
+ font-weight:600;
+ }
+ }
+ @media (max-width: 380px) {
+ .container {
+ background: black;
+ }
+ . header {
+ font-size:1rem;
+ font-weight:400;
+ }
+ }
+
+```
+
+
+
+
+ Responsive design ensures that web pages look good and function well on all
+ devices. By using fluid grids, flexible images, and media queries, you can
+ create layouts that adapt to different screen sizes, providing an optimal
+ viewing experience for users. Mastering these techniques will enable you to
+ design websites that are both visually appealing and highly functional across
+ a wide range of devices
+
diff --git a/pages/programming-tutorials/html-and-css/sass.mdx b/pages/programming-tutorials/html-and-css/sass.mdx
new file mode 100644
index 00000000..77e64bd5
--- /dev/null
+++ b/pages/programming-tutorials/html-and-css/sass.mdx
@@ -0,0 +1,119 @@
+import { Steps } from 'nextra/components';
+import { FileTree } from 'nextra/components';
+import { Callout } from 'nextra/components';
+
+#### Introduction
+
+Sass (Syntactically Awesome Style Sheets) is a pre-processor language that extends the capabilities of CSS. It provides a more dynamic and efficient way to write CSS, making it easier to manage large stylesheets by offering features such as variables, nested rules, mixins, and functions.
+
+**Sass compiler:** In order to use sass efficiently an extension was Introduced to avoid the installation of sass using the commandline and it is called **live sass compiler by Glenn Marks.**
+
+### installation of sass live compiler
+
+
+### Open VS Code
+
+Launch Visual Studio Code.
+
+### Access Extensions
+
+ Go to the Extensions tab in the sidebar (usually on the left) or use the shortcut (Ctrl+Shift+X). In the search bar, type "Live Sass Compiler and locate the extension by Glenn Marks and click the "Install" button.
+
+
+#### Enabling Live Compilation
+
+**Open an SCSS File:** Create or open an SCSS file (.scss extension) in your project.
+
+**Activate Live Sass:**
+On the status Bar, Look for a button in the status bar at the bottom that might say "Click to Watch Sass" or a similar indication. Click it to enable live compilation.
+
+
+#### **Why we use Sass?**
+
+**Improved Maintainability:** Sass makes your stylesheets more organized and readable. Variables and mixins allow you to manage styles centrally, making updates easier and reducing the risk of errors.
+
+**Enhanced Features:** Sass offers functionalities not available in vanilla CSS, including operations, functions for color manipulation, and control flow statements.
+
+### **Key Features of Sass**
+
+##### An HTML example to use
+
+```HTML5 copy filename="index.html"
+
+
+
+ Document
+
+
+
+
+
+
+
+```
+
+**Variables:** Variables in Sass make it easy to manage and reuse values eg colors, fonts etc throughout your stylesheet.
+```SCSS copy
+//variables//
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+ //usage of variables//
+body {
+ font-family: $font-stack;
+ color: $primary-color;
+}
+```
+
+**Nesting:** Nesting in Sass allows you to write your CSS in a nested hierarchy that follows the same visual structure of your HTML. This makes it easier to read and maintain.
+```SCSS copy filename="Html"
+//all other tags are placed inside a the nav tag
+nav {
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ li { display: inline-block; }
+
+ a {
+ display: block;
+ padding: 6px 12px;
+ text-decoration: none;
+ }
+}
+```
+
+**Partials:** Partials are Sass files that contain little code snippets of CSS that can be included in other Sass files. They are named with a leading underscore '(_)'. This helps in keeping your styles organized and maintainable, especially in large projects. All these files can be inside one folder which is mostly named as **partials.** In that folder there are two files to always start and they include;
+
+the one which includes all the variables for example variables for fonts, colors and many more and it usually name **_variables.scss.**
+
+the one which includes all the changes that afffect the whole websites eg fonts, colors and many more and it usually name **_globels.scss.**
+
+ The order is as follows.
+
+
+
+
+
+
+**Importing Partials:** To use a partials in your main Sass file **(style.scss)**, use the **@import** directive. When you import a partial, you do not include the underscore or the file extension as shown below;
+
+```scss copy filename="style.scss"
+@import './partials/variables';
+@import './partials/globels';
+```
+
+ Take caution that the variables files must always be the first when importing.
+
+
\ No newline at end of file
diff --git a/pages/programming-tutorials/index.mdx b/pages/programming-tutorials/index.mdx
new file mode 100644
index 00000000..d82ccd40
--- /dev/null
+++ b/pages/programming-tutorials/index.mdx
@@ -0,0 +1 @@
+# Programming Tutorials Landing Page
diff --git a/pages/programming-tutorials/js/_meta.json b/pages/programming-tutorials/js/_meta.json
new file mode 100644
index 00000000..ab513eac
--- /dev/null
+++ b/pages/programming-tutorials/js/_meta.json
@@ -0,0 +1,9 @@
+{
+ "js-intro": "Introduction to Javascript",
+ "js-basics": "JavaScript Basics",
+ "js-dom": "DOM Manipulation with JavaScript",
+ "js-async": "Asynchronous JavaScript",
+ "js-es6": "JavaScript ES6+ Features",
+ "assignments": "JavaScript Assignments",
+ "js-projects": "Building projects with JavaScript"
+}
diff --git a/pages/programming-tutorials/js/assignments.mdx b/pages/programming-tutorials/js/assignments.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/js/js-arrays.mdx b/pages/programming-tutorials/js/js-arrays.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/js/js-async.mdx b/pages/programming-tutorials/js/js-async.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/js/js-basics.mdx b/pages/programming-tutorials/js/js-basics.mdx
new file mode 100644
index 00000000..948f4071
--- /dev/null
+++ b/pages/programming-tutorials/js/js-basics.mdx
@@ -0,0 +1,325 @@
+import { FileTree } from 'nextra/components';
+import { Callout } from 'nextra/components';
+import Image from 'next/image';
+
+### Getting Started with JavaScript.
+**Where to write JavaScript**
+
+You can write JavaScript directly in an HTML file within `
+
+
+
+```
+You can also create a separate `.js` file and link it to your HTML file.
+
+
+
+
+
+
+```js copy
+
+
+
+ My Website
+
+
+//linking js file to HTML file
+
+
+
+
+```
+
+#### JavaScript Data types
+In JavaScript, there are two main types of data: primitive data types and objects data types.
+
+**primitive:** Primitive data types are simple data types that represent a single value. The primitive data types in JavaScript are: String, Number, Boolean, Null, Undefined.
+
+ JavaScript has dynamic typing: We do not have to manually define the data type of the value stored in a variable. Instead, data types are determined automatically.
+
+
+To check the data type of a value in JavaScript, you can use the **typeof** operator. The **typeof** operator returns a string that represents the type of the value.
+```js copy
+console.log(typeof "world")
+//It will display String in the browser's console.
+console.log(typeof 144)
+//It will display Number in the browser's console.
+console.log(typeof true)
+//It will display Boolean in the browser's console.
+```
+In JavaScript, strings are immutable, which means that you cannot modify individual characters of a string.
+```js copy
+let name = "John";
+name = "Jane"; // allowed
+name[0] = "J"; // not allowed
+```
+In this example, the **name** variable is assigned the value **John**, which is a string. The value of the **name** variable can be changed by assigning a new value to it (e.g. name = "Jane"). However, you cannot change the individual characters of the string directly.
+
+**Objects:** Objects are complex data types that can contain multiple values and properties. Objects are used to represent real-world entities or abstract concepts with multiple characteristics. Objects are created using the **{}** syntax and can contain multiple properties, which are represented as key-value pairs. For example:
+```js copy
+let person = {
+ firstName: "John",
+ lastName: "Doe",
+ age: 30,
+ isEmployed: true
+};
+```
+In this example, the **person** object has four properties: firstName, lastName, age, and isEmployed. Each property has a key (the property name) and a value (the property value).
+
+
+
+ You can access the properties of an object using the . notation or the [] notation:
+
+```js copy
+console.log(person.firstName);
+//It will display John in the browser's console.
+console.log(person["lastName"]);
+//It will display Doe in the browser's console.
+```
+
+ Objects are mutable, which means that you can change their properties and values at any time.
+
+
+### Javascript Control Structures
+**if statement:** The if statement is used to execute a block of code if a condition is true. For example:
+```js copy
+let x = 10;
+if (x > 0) {
+ console.log("x is positive");
+
+//This code will output "x is positive" to the console, because the condition x > 0 is true.
+}
+```
+
+**If-else statement:** You can also use an else clause to specify a block of code that should be executed if the condition is false:
+```js copy
+let x = 10;
+if (x > 0) {
+ console.log("x is positive");
+
+//This code will output "x is positive" to the console, because the condition x > 0 is true.
+}else {
+ console.log("x is not positive");
+
+//This code will output "x is not positive" to the console, if the condition x > 0 is false.
+}
+```
+**Switch statement:** The switch statement is used to execute a block of code based on the value of a variable. For example:
+```js copy
+let x = "red";
+switch (x) {
+ case "red":
+ console.log("x is red");
+ break;
+ case "blue":
+ console.log("x is blue");
+ break;
+ default:
+ console.log("x is neither red nor blue");
+}
+```
+This code will output "x is red" to the console, because the value of x is "red". The switch statement is often used as an alternative to a series of if statements, when you have to check multiple values.
+
+ **Javascript Loops:** In JavaScript, a loop is a control flow statement that allows you to execute a block of code repeatedly. There are several types of loops in JavaScript:
+
+ **for Loop:** The for loop is used to execute a block of code a specified number of times. It has the following syntax:
+```js copy
+for (initialization; condition; increment/decrement) {
+ // code to be executed
+}
+```
+The **initialization** statement is executed only once at the beginning of the loop. It is used to initialize a **counter variable**. The **condition** is evaluated at the beginning of each iteration. If the **condition** is true, the loop continues. If the **condition** is false, the loop terminates. The **increment/decrement** statement is executed at the end of each iteration. It is used to update the **counter variable.**
+
+ **A counter variable** is a variable that keeps track of a numerical value. It's often used to count the number of times something happens or to iterate through a set of data.
+
+
+an example of the for loop
+```js copy
+for (let i = 1; i <= 10; i++) {
+ console.log(i);
+
+ //This code will display 1-10 in the browser console.
+ //It display that because initially the value of i is 1, 1 is add to i using (i++) and it is made to repeat itself using (for) but not exceeding 10 according to (i<=10).
+}
+```
+**While Loop:** The while loop is used to execute a block of code as long as a certain condition is true. It has the following syntax:
+```js copy
+while (condition) {
+ // code to be executed
+}
+```
+The **condition** is evaluated at the beginning of each iteration. If the **condition** is true, the loop continues. If the **condition** is false, the loop terminates.
+
+an example of the while loop
+```js copy
+let i = 1; // Initialize a variable 'i' with the value 1.
+while (i <= 10) { // Start a while loop that runs as long as 'i' is less than or equal to 10.
+ console.log( i);// Log the message "this is the no X" to the console, where X is the current value of 'i'.
+ i++; // Increment the value of 'i' by 1.
+}
+```
+
+**do-while Loop:** The do-while loop is similar to the while loop, but the block of code is always executed at least once. It has the following syntax:
+```js copy
+do {
+ // code to be executed
+} while (condition);
+```
+The condition is evaluated at the end of each iteration. If the condition is true, the loop continues. If the condition is false, the loop terminates.
+
+an example of the do-while loop
+```js copy
+let i = 1; // Initialize a variable 'i' with the value 1
+
+do {
+ console.log(i); // Print the current value of 'i' to the console
+ i++; // Increment the value of 'i' by 1
+} while (i <= 10); // Continue the loop as long as 'i' is less than or equal to 10
+```
+
+**for-in Loop:** The for-in loop is used to iterate over the properties of an object. It has the following syntax:
+```js copy
+for (variable in object) {
+ // code to be executed
+}
+```
+The variable takes on the value of each property in the object, and the loop continues until all properties have been processed.
+
+an example of the for-in loop
+```js copy
+// Create an object named 'person' with three properties: name, age, and job
+let person = {
+ name: "John", // The 'name' property with the value "John"
+ age: 30, // The 'age' property with the value 30
+ job: "developer" // The 'job' property with the value "developer"
+};
+
+// Use a for-in loop to iterate over the properties of the 'person' object
+for (let prop in person) {
+ // Inside the loop, 'prop' will be assigned the name of each property in the object in turn
+ // Log the property name and its value to the console in the format: "property: value"
+ console.log(prop + ": " + person[prop]);
+ // 'person[prop]' accesses the value of the property named 'prop' in the 'person' object
+}
+
+// The expected output will be:
+// name: John
+// age: 30
+// job: developer
+```
+
+**for-of Loop:** The for-of loop is a modern way to iterate over the values of an iterable object, such as an array or a string. It was introduced in ECMAScript 6 (ES6) and has the following syntax:
+```js copy
+for (variable of object) {
+ // code to be executed
+}
+```
+The variable takes on the value of each element in the object, and the loop continues until all elements have been processed.
+
+an example of the for-of loop
+```js copy
+// Define an array called 'numbers' with five elements: 1, 2, 3, 4, and 5
+let numbers = [1, 2, 3, 4, 5];
+
+// Use a 'for...of' loop to iterate over each element in the 'numbers' array
+for (let num of numbers) {
+ // Inside the loop, log the current element (num) to the console
+ console.log(num);
+}
+```
+**Break and continue statements in Loops:** The break and continue statements are used to control the flow of a loop in JavaScript. The break statement is used to exit a loop prematurely. It can be used in any type of loop, such as a for, while, or do-while loop. When the break statement is encountered, the loop is immediately terminated and the flow of control moves to the statement following the loop.
+
+**break:** Here is an example of a for loop with a break statement:
+```js copy
+for (let i = 0; i < 10; i++) {
+ if (i == 5) {
+ break; // If i is 5, break the loop and stop further iterations.
+ }
+ console.log(i);
+}
+```
+In this example, the loop will terminate when i is 5 and the break statement is encountered. The output will be the numbers 0 through 4.
+
+**continue:** The continue statement is used to skip the rest of the current iteration of a loop and move on to the next one. It can also be used in any type of loop. When the continue statement is encountered, the loop's counter is updated and the flow of control returns to the loop's condition.
+```js copy
+let i = 0;
+while (i < 10) {
+ i++;
+ if (i % 2 == 0) {
+ continue;
+ }
+ console.log(i);
+}
+```
+In this example, the continue statement will skip the rest of the current iteration when i is even and move on to the next iteration. The output will be the odd numbers 1 through 9
+
+### Javascript Functions
+
+**Javascript Function types**
+
+**Function declarations:** Function declarations are created using the function keyword, followed by the function name and a set of parentheses that may include parameters. The function body is placed between curly braces. Function declarations are hoisted, which means that they are available for use throughout your code, even before they are defined. Here is an example of a function declaration:
+```js copy
+function sayHello(name) {
+ console.log("Hello, " + name + "!");
+}
+```
+**Function expressions:** Function expressions are created by assigning a function to a variable. They are not hoisted, which means that they are not available for use until after they are defined. Here is an example of a function expression:
+```js copy
+var sayHello = function(name) {
+ console.log("Hello, " + name + "!");
+}
+```
+**Arrow functions:** Arrow functions are a modern way to write functions in JavaScript. They are created using the => syntax and are concise and easy to read. Arrow functions do not have their own this value and cannot be used as constructors. Here is an example of an arrow function:
+```js copy
+const sayHello = (name) => {
+ console.log("Hello, " + name + "!");
+};
+```
+**Calling(Invoking Functions):** To call a function in JavaScript, you simply need to use its name followed by a set of parentheses that may include arguments. For example:
+```js copy
+function sayHello(name) {
+ console.log("Hello, " + name + "!");
+}
+
+//Calling the function
+
+sayHello("John");
+
+//It will display Hello John! on the browser console
+```
+**function parameters:** are the names listed in the function definition and are used to receive input values (arguments) when the function is called. The function can then use these parameters to perform its task. For example:
+```js copy
+function add(a, b) {
+ return a + b;
+}
+Sum = add(1, 2);
+
+console.log(sum);
+//It will the result after adding 1 and 2 which 3.
+```
+In this example, the add function accepts two parameters, a and b, and returns their sum. When the function is called with the arguments 1 and 2, it returns the value 3.
+
+A **'return statement'** is used within a function to specify the value that the function should output when it is called. The return statement ends the function's execution and specifies the value that should be returned to the caller. If a function does not have a return statement, it will return the special value undefined.
+
+
+**ANATOMY OF A FUNCTION:**
+
+The replace() method by default it replaces only the first match. If you want to replace all matches, use a regular expression with the /g flag set. See examples below.
+
+```js copy
+let str = "Hello World, today the World is growing fast";
+let newStr = str.replace(/World/g, "JavaScript");
+console.log(newStr); // "Hello JavaScript, today the JavaScript is growing fast"
+```
+In this example, the regular expression /World/g is used to match the substring "World". The "g" flag is used to specify that the replacement should happen globally, which means all occurrences of the substring in the string will be replaced.
+
+**Converting to Upper and Lower Case:** In JavaScript, you can convert a string to uppercase by using the toUpperCase() method and to lowercase by using the toLowerCase() method.
+```js copy
+let str = "Hello World";
+let upperStr = str.toUpperCase(); // "HELLO WORLD"
+let lowerStr = str.toLowerCase(); // "hello world"
+```
+
+**Joining strings Using concat():** The concat() method in JavaScript is used to join two or more strings together. The method can take any number of arguments and it returns a new string that is the concatenation of all the given strings.
+```js copy
+let str1 = "Hello";
+let str2 = "World";
+let newStr = str1.concat(" ", str2); // "Hello World"
+```
+You can also use the + operator to concatenate strings in JavaScript. The + operator is more commonly used for string concatenation.
+```js copy
+let str1 = "Hello";
+let str2 = "World";
+let newStr = str1 + " " + str2; // "Hello World"
+```
+
+**trim():** The trim() method removes whitespace from both sides of a string
+```js copy
+let text1 = " Hello World! ";
+let text2 = text1.trim();
+```
+
+Note: ECMAScript 2019 added the String methods trimStart() and trimStart() to JavaScript.
+The trimStart() method works like trim(), but removes whitespace only from the start of a string.
+The trimEnd() method works like trim(), but removes whitespace only from the end of a string.
+
+
+**charAt(position):** This method returns the character at the specified index (position) in a string. The first character has an index of 0, the second has an index of 1, and so on. If the specified index is out of range, the method returns an empty string.
+```js copy
+let str = "Hello World";
+let char = str.charAt(0); // "H"
+```
+
+**charCodeAt(position):** This method returns the Unicode of the character at the specified index in a string. The Unicode code is a unique number that represents each character in a string.
+The method returns a UTF-16 code (an integer between 0 and 65535).
+```js copy
+let str = "Hello World";
+let code = str.charCodeAt(0); // 72
+```
+
+**Property access [ ]:** This is an alternative way of accessing individual characters in a string. You can use square brackets [] to access a character at a specific index.
+```js copy
+let str = "Hello World";
+let char = str[0]; // "H"
+```
+
+**split() method:** The split() method is used to split a string into an array of substrings based on a specified separator. By default, it splits the string into an array of characters if no separator is provided.
+```js copy
+let str = "Hello World";
+let charArray = str.split(""); // ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]
+
+//Using Space as a separator
+let str = "Hello World";
+let words = str.split(" "); // ["Hello", "World"]
+
+ //Using Comma as a separator
+let str = "apple,banana,orange";
+let fruits = str.split(","); // ["apple", "banana", "orange"]
+
+ //Using limit as a separator
+let str = "apple,banana,orange,mango";
+let fruits = str.split(",",3); // ["apple", "banana", "orange,mango"]
+```
+
+As you can see, the split() method takes a separator as its argument, and it can be a string, regular expression, or any other value that is used to split the string into an array of substrings. The separator is not included in the returned array, and if no separator is provided, it splits the string into an array of characters.
+You can also specify a limit to the number of times the separator can be used to split the string, if the limit is reached, the rest of the string will be considered as a single element of the array.
+
+
+
+
+
+
+
+
+
+
+
+ **b. Number:** A numerical value. Examples: 123, 3.14.
+
+ **Number Methods:**
+
+ **toString():** Returns a number as a string
+
+ **toExponential():** Returns a number written in exponential notation
+
+ **toFixed():** Returns a number written with a number of decimals
+
+ **toPrecision():** Returns a number written with a specified length
+
+ **ValueOf():** Returns a number as a number
+
+
+
+
+
+
+
+
+
+
+
+
+ **c. Boolean:** A value that can be either true or false. Used for taking Decisions.
+
+ **d. Undefined:** : A value that is assigned to a variable that has not been given a value yet.
+
+ **e. Null:** A special value that represents an absence of value.
+
+ **f. Array:** In JavaScript, arrays can be a collection of elements of any type. This means that you can create an array with elements of type String, Boolean, Number, Objects, and even other Arrays. A pair of square brackets [] represents an array in JavaScript. All the elements in the array are comma(,) separated. The position of an element in the array is known as its index. In JavaScript, the array index starts with 0, and it increases by one with each element.
+
+
+ **Object:** Objects store data in key-value pairs.
+ ```js copy
+ //String
+ let name = 'Alice';
+
+ //Number
+let age = 30;
+
+//Boolean
+let isStudent = true;
+
+//Array
+let hobbies = ['reading', 'traveling', 'coding'];
+
+//Object
+let person = {
+ firstName: 'John',
+ lastName: 'Doe',
+ age: 40
+};
+````
+
+
+
+
+
+
+
+
+**4. Operetors:** operators allow you to manipulate data, make comparisons, and control the flow of your code. Here is a more detailed look at the various types of operators in JavaScript.
+
+**a. Arithmetic Operators:** Arithmetic operators are used to perform basic mathematical operations.
+
+**Addition (+):** used in addition instances.
+```js copy
+const sum = 2 + 3;
+console.log(sum)
+//It will display 5 in the browser's console.
+```
+
+**Subtraction (-):** Subtracts one number from another.
+```js copy
+const difference = 5 - 3;
+console.log(difference)
+//It will display 2 in the browser's console.
+```
+
+**Multiplication (*):** Multiplies two numbers.
+```js copy
+const product = 2 * 3;
+console.log(product)
+//It will display 6 in the browser's console.
+```
+
+**Division (/):** Divides one number by another.
+```js copy
+let quotient = 6 / 3;
+ console.log(quotient)
+//It will display 2 in the browser's console.
+```
+
+**Modulus (%):** Returns the remainder of a division.
+```js copy
+let remainder = 7 % 3;
+ console.log(remainder)
+//It will display 1 in the browser's console.
+```
+
+**Increment (++):** Increases a number by one.
+```js copy
+let x = 5;
+x++;
+ console.log(X)
+//It will display 6 in the browser's console.
+```
+
+**Decrement (--):** Decreases a number by one.
+```js copy
+let Y = 5;
+Y--;
+ console.log(Y)
+//It will display 4 in the browser's console.
+```
+
+**b. Assignment Operators:** Assignment operators are used to assign values to variables.
+
+**Assignment (=):** Assigns a value to a variable.
+```js copy
+let x = 10;
+ console.log(X)
+```
+**c. Comparison Operators:** Comparison operators compare two values and return a boolean result ('true' or 'false').
+
+**Equal (==):** Compares two values for equality (type conversion is performed).
+```js copy
+let result = (5 == '5'); // true
+ console.log(result)
+ //It will display true in the browser's console.
+ ```
+
+**Strict Equal (===): ** Compares two values for equality without type conversion.
+```js copy
+let result = (5 === '5'); // true
+ console.log(result)
+ //It will display false in the browser's console.
+ ```
+
+**Not Equal (!=):** Compares two values for inequality (type conversion is performed).
+```js copy
+const result = (5 != '5');
+ console.log(result)
+ //It will display false in the browser's console.
+ ```
+
+**Strict Not Equal (!==):** Compares two values for inequality without type conversion.
+```js copy
+let result = (5 !== '5');
+ console.log(result)
+ //It will display true in the browser's console.
+ ```
+
+**Greater Than (>):** Checks if the left value is greater than the right value.
+```js copy
+const result = (10 > 5);
+ console.log(result)
+ //It will display true in the browser's console.
+ ```
+
+**Less Than:** Checks if the left value is less than the right value.
+```js copy
+let result = (10 < 5);
+ console.log(result)
+ //It will display false in the browser's console.
+ ```
+
+**Greater Than or Equal (>=):** Checks if the left value is greater than or equal to the right value.
+```js copy
+let result = (10 >= 10);
+ console.log(result)
+ //It will display true in the browser's console.
+ ```
+
+**Less Than or Equal (`<=`):** Checks if the left value is less than or equal to the right value.
+```js copy
+let result = (10 <= 10);
+ console.log(result)
+ //It will display true in the browser's console.
+ ```
+ **c. Logical Operators:** Logical operators are used to combine multiple boolean expressions.
+
+ **AND (&&):** Returns true if both operands are true.
+```js copy
+const result = (5 > 3 && 10 > 5); // true
+ console.log(result)
+ //It will display true in the browser's console.
+ ```
+
+ **OR (||):** Returns true if at least one of the operands is true.
+```js copy
+const result = (5 > 3 || 10 < 5); // true
+ console.log(result)
+ //It will display true in the browser's console.
+ ```
+
+ **NOT (!):** Returns true if the operand is false.
+```js copy
+let result = !(5 > 3);
+ console.log(result)
+ //It will display false in the browser's console.
+ ```
+ **d. Conditional operator (? :):** The conditional operator, also known as the ternary operator, is a shorthand way of writing an if statement. It is used with the ? and : symbols. For example:
+ ```js copy
+ let x = 10;
+let y = 20;
+let max = (x > y) ? x : y; // max is 20
+ ```
+ This code is equivalent to the following if statement:
+```js copy
+let max;
+if (x > y) {
+ max = x;
+} else {
+ max = y;
+}
+```
+
+
+**5. Control Structures:** Control structures are used to control the flow of a program, based on certain conditions.
+
+ **Conditional Statements:** Control the flow of your code using conditional statements.
+ ```js copy
+ let time = 20;
+
+if (time < 12) {
+ console.log('Good morning!');
+} else if (time < 18) {
+ console.log('Good afternoon!');
+} else {
+ console.log('Good evening!');
+}
+ ```
+
+
+**6. Functions:**
+
+In JavaScript, a function is a block of code that performs a specific task and can be reused throughout your code. Functions are an important aspect of JavaScript and are used to structure and organize your code in a logical and reusable way.
+
+```js copy
+// Function declaration
+function greet(name) {
+ return `Hello, ${name}!`;
+}
+
+// Calling a function
+let greeting = greet('Alice');
+console.log(greeting);
+//It will display Hello, Alice! in the browser's console.
+ ```
\ No newline at end of file
diff --git a/pages/programming-tutorials/js/js-projects.mdx b/pages/programming-tutorials/js/js-projects.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/nextjs/_meta.json b/pages/programming-tutorials/nextjs/_meta.json
new file mode 100644
index 00000000..e5a240cb
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/_meta.json
@@ -0,0 +1,32 @@
+{
+ "next-intro": "Introduction to Next.js ",
+ "get-started": "Get Started with Next Js ",
+ "addons": "Useful Addons in Next Js",
+ "reuseable": "Re-Useable Components",
+ "auth-pages": "Authentication Pages",
+ "charts": "Charts",
+ "redux": "Redux Toolkit",
+ "functions": "Reusable functions",
+ "excel": "Import Data from Excel",
+ "datatable": "Data Table",
+ "drag-n-drop": "Drag and Drop",
+ "stripe-checkout": "Stripe Checkout",
+ "stripe-subscription": "Stripe Subscriptions",
+ "next-routing": "Routing in Next.js",
+ "novel": "Novel Editor",
+ "novel-v2": "Noval Editor Version 2",
+ "ecommerce": "Ecommerce Snippets",
+ "next-state": "State Management in Next.js",
+ "next-data-fetching": "Asynchronous JavaScript",
+ "next-seo": "SEO in Next JS",
+ "next-deploy": "Deploying a Next Js Project",
+ "next-typescript": "TypeScript in Next JS",
+ "next-forms": "Handling Forms in Next.js",
+ "next-api": "API Routes in Next.js",
+ "next-actions": "Next JS Server Actions",
+ "next-mongo": "Integrating with Prisma and MongoDB",
+ "next-auth": "Authentication and Authorization",
+ "next-packages": "Next JS Commonly used Resources",
+ "assignments": "Next JS Assignments",
+ "js-projects": "Building projects with JavaScript"
+}
diff --git a/pages/programming-tutorials/nextjs/addons.mdx b/pages/programming-tutorials/nextjs/addons.mdx
new file mode 100644
index 00000000..b68a2ea0
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/addons.mdx
@@ -0,0 +1,211 @@
+## Nuka Carousel
+
+## Installation
+
+```bash copy
+ npm i nuka-carousel@7.0.0
+```
+
+## Basic usage
+
+```ts copy
+import { Carousel } from "nuka-carousel";
+
+const App = () => {
+ return (
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ );
+};
+```
+
+## Configure Nuka Component
+
+```ts copy
+"use client";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import Carousel from "nuka-carousel";
+
+export default function HeroCarousel({ banners }) {
+ const config = {
+ nextButtonClassName: "rounded-full",
+ nextButtonText:
+ {banners.map((banner, i) => {
+ return (
+
+ );
+}
+```
+
+## React Multi Carousel
+
+### Installation
+
+```bash copy
+npm i react-multi-carousel
+```
+
+## The Ovaerall Component
+
+```ts copy
+import Link from "next/link";
+import React from "react";
+import CategoryCarousel from "./CategoryCarousel";
+
+export default function CategoryList({ category, isMarketPage }) {
+ return (
+
+
+
{category.title}
+
+
+
+
+ {products.map((product, i) => {
+ return
+ );
+}
+```
+
+### The Product Component
+
+```ts copy
+"use client";
+import { addToCart } from "@/redux/slices/cartSlice";
+import { BaggageClaim } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import toast from "react-hot-toast";
+import { useDispatch } from "react-redux";
+
+export default function Product({ product }) {
+ const dispatch = useDispatch();
+ function handleAddToCart() {
+ // Dispatch the reducer
+ dispatch(addToCart(product));
+ toast.success("Item added Successfully");
+ }
+ return (
+
+
+
+
+
+
+
+ {product.title}
+
+
+
+
UGX {product.salePrice}
+
handleAddToCart()}
+ className="flex items-center space-x-2 bg-lime-600 px-4 py-2 rounded-md text-white"
+ >
+ Add
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Register Page
+
+
+
+ ```tsx copy
+import LoginForm from "@/components/frontend/LoginForm";
+import RegisterForm from "@/components/frontend/RegisterForm";
+import { Lock, Mail } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+export default function page() {
+ return (
+
+ );
+}
+ ```
+
+
+```tsx copy
+import { Eye, EyeOff, Headset, Loader2, Lock, Mail, User } from "lucide-react";
+import React, { useState } from "react";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import { UserProps } from "@/types/types";
+import TextInput from "../global/FormInputs/TextInput";
+import PasswordInput from "../global/FormInputs/PasswordInput";
+import SubmitButton from "../global/FormInputs/SubmitButton";
+
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import { createUser } from "@/actions/users";
+export default function RegisterForm() {
+ const [loading, setLoading] = useState(false);
+ const [emailErr, setEmailErr] = useState(null);
+ const {
+ handleSubmit,
+ register,
+ formState: { errors },
+ reset,
+ } = useForm();
+ const router = useRouter();
+ async function onSubmit(data: UserProps) {
+ setLoading(true);
+ data.name = `${data.firstName} ${data.lastName}`;
+ data.status = true;
+ data.profileImage =
+ "https://utfs.io/f/59b606d1-9148-4f50-ae1c-e9d02322e834-2558r.png";
+ data.roleId = "666679228a65b2eadc3fe771";
+ try {
+ const res = await createUser(data);
+ if (res.status === 409) {
+ setLoading(false);
+ setEmailErr(res.error);
+ } else if (res.status === 200) {
+ setLoading(false);
+ toast.success("Account Created successfully");
+ router.push("/login");
+ } else {
+ setLoading(false);
+ toast.error("Something went wrong");
+ }
+ } catch (error) {
+ setLoading(false);
+ console.error("Network Error:", error);
+ toast.error("Its seems something is wrong, try again");
+ }
+ }
+ return (
+
+
+
+
+ Create an account
+
+
Join Us, fill in details to login
+
+
+
+
+
+
+ Alrealy Registered ?{" "}
+
+
+
+
+
+
+## Login Page
+
+
+
+ ```ts copy
+import LoginForm from "@/components/frontend/LoginForm";
+import { authOptions } from "@/config/authOptions";
+import { Lock, Mail } from "lucide-react";
+import { getServerSession } from "next-auth";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import React from "react";
+
+export default async function page() {
+ const session = await getServerSession(authOptions);
+ if (session) {
+ redirect("/dashboard");
+ }
+ return (
+
+ );
+}
+
+````
+
+
+
+ ```tsx copy
+import { Eye, EyeOff, Loader2, Lock, Mail } from "lucide-react";
+import React, { useState } from "react";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import TextInput from "../global/FormInputs/TextInput";
+import PasswordInput from "../global/FormInputs/PasswordInput";
+import SubmitButton from "../global/FormInputs/SubmitButton";
+import { LoginProps } from "@/types/types";
+import toast from "react-hot-toast";
+import { useRouter, useSearchParams } from "next/navigation";
+import { signIn } from "next-auth/react";
+export default function LoginForm() {
+ const [loading, setLoading] = useState(false);
+ const {
+ handleSubmit,
+ register,
+ formState: { errors },
+ reset,
+ } = useForm();
+ const params = useSearchParams();
+ const returnUrl = params.get("returnUrl") || "/dashboard";
+ const [passErr, setPassErr] = useState("");
+ const router = useRouter();
+ async function onSubmit(data: LoginProps) {
+ try {
+ setLoading(true);
+ setPassErr("");
+ console.log("Attempting to sign in with credentials:", data);
+ const loginData = await signIn("credentials", {
+ ...data,
+ redirect: false,
+ });
+ console.log("SignIn response:", loginData);
+ if (loginData?.error) {
+ setLoading(false);
+ toast.error("Sign-in error: Check your credentials");
+ setPassErr("Wrong Credentials, Check again");
+ // setShowNotification(true);
+ } else {
+ // Sign-in was successful
+ // setShowNotification(false);
+ reset();
+ setLoading(false);
+ toast.success("Login Successful");
+ setPassErr("");
+ router.push(returnUrl);
+ }
+ } catch (error) {
+ setLoading(false);
+ console.error("Network Error:", error);
+ // toast.error("Its seems something is wrong with your Network");
+ }
+ }
+ return (
+
+
+
+
+ Login in to your account
+
+
Welcome Back, fill in details to login
+
+
+
+
+
+
+ Not a Registered ?{" "}
+
+
+
+
+
+
+```
diff --git a/pages/programming-tutorials/nextjs/charts.mdx b/pages/programming-tutorials/nextjs/charts.mdx
new file mode 100644
index 00000000..ed56dd6b
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/charts.mdx
@@ -0,0 +1,447 @@
+# Ultimate Guide: Creating Dynamic Charts in Next.js with Recharts
+
+In this comprehensive guide, we'll explore how to leverage the power of Recharts, a popular React charting library, to create stunning and interactive charts within your Next.js applications. Whether you're a seasoned developer or just starting with React and Next.js, this tutorial will walk you through the process step-by-step, from setting up your Next.js project to creating various types of charts and customizing them to suit your needs.
+
+### Key Topics Covered
+
+- Introduction to Recharts and its features
+- Setting up a Next.js project for charting
+- Installing Recharts and adding it to your Next.js application
+- Creating basic charts such as line charts, bar charts, and pie charts
+- Rendering dynamic data in charts using React state or fetching data from APIs
+- Customizing the appearance of charts with different colors, styles, and labels
+- Implementing interactivity in charts with tooltips, legends, and responsive design
+- Advanced charting techniques including animations, axis configuration, and data transformations
+- Best practices for optimizing chart performance and accessibility in Next.js applications
+- Real-world examples and use cases of Recharts in Next.js projects
+- By the end of this guide, you'll have a solid understanding of how to integrate Recharts seamlessly into your Next.js applications, enabling you to visualize data in a visually appealing and informative manner. Whether you're building a dashboard, analytics platform, or data visualization tool, Recharts in combination with Next.js will empower you to create professional-grade charts with ease.
+
+For Full Infor Read the Docs [Here](https://recharts.org/en-US/guide)
+
+### Install Dependencies
+
+```bash copy
+ npm install recharts
+```
+
+## Sample Dataset
+
+```ts copy
+// Interface for product data
+interface Product {
+ category: string;
+ sales: number;
+}
+
+// Interface for traffic and sales data
+interface TrafficSales {
+ month: string;
+ traffic: number;
+ sales: number;
+}
+
+// Interface for customer acquisition data
+interface AcquisitionChannel {
+ channel: string;
+ newCustomers: number;
+}
+
+// Interface for inventory data
+interface InventoryItem {
+ product: string;
+ stock: number;
+}
+const pieChartData = [
+ { name: "Group A", value: 400 },
+ { name: "Group B", value: 300 },
+ { name: "Group C", value: 300 },
+ { name: "Group D", value: 200 },
+];
+
+const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
+// Example data (replace with your actual data)
+const productData: Product[] = [
+ { category: "Shirts", sales: 200 },
+ { category: "Pants", sales: 150 },
+ { category: "Dresses", sales: 180 },
+ { category: "Shoes", sales: 120 },
+ { category: "Accessories", sales: 80 },
+];
+
+const trafficSalesData: TrafficSales[] = [
+ { month: "Jan", traffic: 10000, sales: 800 },
+ { month: "Feb", traffic: 12000, sales: 1000 },
+ { month: "Mar", traffic: 15000, sales: 1200 },
+ { month: "Apr", traffic: 8000, sales: 700 },
+ { month: "May", traffic: 9000, sales: 850 },
+];
+
+const acquisitionData: AcquisitionChannel[] = [
+ { channel: "Organic Search", newCustomers: 50 },
+ { channel: "Email Marketing", newCustomers: 30 },
+ { channel: "Social Media", newCustomers: 20 },
+ { channel: "Paid Advertising", newCustomers: 15 },
+];
+
+const inventoryData: InventoryItem[] = [
+ { product: "Shirt A", stock: 50 },
+ { product: "Shirt B", stock: 30 },
+ { product: "Pants", stock: 25 },
+ { product: "Dress", stock: 10 },
+];
+```
+
+## Creating Re-Usable Components
+
+### Creating Re-Usable Barchart Component
+
+```ts filename="ReUsableBarChart.ts" copy
+"use client";
+
+import {
+ Bar,
+ BarChart,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+
+const productsData = [
+ { category: "Shirts", sales: 200 },
+ { category: "Pants", sales: 150 },
+ { category: "Dresses", sales: 180 },
+ { category: "Shoes", sales: 120 },
+ { category: "Accessories", sales: 80 },
+];
+
+export function ReUsableBarChart({
+ data,
+ XAxisDataKey,
+ BarDataKey,
+ BarChartColor = "#ffc107",
+ title,
+}: {
+ title: string;
+ data: any;
+ XAxisDataKey: string;
+ BarDataKey: string;
+ BarChartColor?: string;
+}) {
+ return (
+
+
+ {title}
+
+
+
+ `$${value}`}
+ />
+
+
+
+ );
+}
+```
+
+### Creating Re-Usable LineGraph Component
+
+```ts filename="ReUsableLineGraph.ts" copy
+import React from "react";
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ Tooltip,
+ ResponsiveContainer,
+} from "recharts";
+
+const ReUsableLineGraph = ({
+ data,
+ XAxisDataKey,
+ LineOneDataKey,
+ LineTwoStroke,
+ LineOneStroke = "#387044",
+ LineTwoDataKey = "#ffc107",
+ title,
+}: {
+ title: string;
+ data: any;
+ XAxisDataKey: string;
+ LineOneDataKey: string;
+ LineTwoDataKey: string;
+ LineTwoStroke?: string;
+ LineOneStroke?: string;
+}) => {
+ const trafficSalesData = [
+ { month: "Jan", traffic: 10000, sales: 800 },
+ { month: "Feb", traffic: 12000, sales: 1000 },
+ { month: "Mar", traffic: 15000, sales: 1200 },
+ { month: "Apr", traffic: 8000, sales: 700 },
+ { month: "May", traffic: 9000, sales: 850 },
+ ];
+ return (
+
+
+ {title}
+
+
+
+
+
+
+ );
+};
+
+export default ReUsableLineGraph;
+```
+
+### Creating Re-Usable Piechart Component
+
+```ts filename="ReUsablePieChart.ts" copy
+"use client";
+import React from "react";
+import {
+ PieChart,
+ Pie,
+ Sector,
+ Cell,
+ ResponsiveContainer,
+ Tooltip,
+} from "recharts";
+
+const ReUsablePieChart = ({
+ title,
+ data,
+ colors,
+}: {
+ title: string;
+ data: any;
+ colors: string[];
+}) => {
+ const RADIAN = Math.PI / 180;
+ const renderCustomizedLabel = ({
+ cx,
+ cy,
+ midAngle,
+ innerRadius,
+ outerRadius,
+ percent,
+ index,
+ }: any) => {
+ const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+ const x = cx + radius * Math.cos(-midAngle * RADIAN);
+ const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+ return (
+ cx ? "start" : "end"}
+ dominantBaseline="central"
+ >
+ {`${(percent * 100).toFixed(0)}%`}
+
+ );
+ };
+
+ return (
+
+
+ {title}
+
+
+
+
+ {data.map((entry: any, index: any) => (
+ |
+ ))}
+
+
+
+
+
+ E-commerce Analytics
+
+ {/* Product Performance */}
+
+
+
+
+
+
+
+
+
+So go ahead and Create the route and add those files
+
+## Folder Structure For the Components
+
+
+
+
+
+
+
+
+
+
+So go ahead and Create these Components
+
+- columns.tsx `(client component)` will contain our column definitions.
+- data-table.tsx `(client component)` will contain our `[] = [
+ {
+ id: "select",
+ header: ({ table }) => (
+ table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ />
+ ),
+ cell: ({ row }) => (
+ row.toggleSelected(!!value)}
+ aria-label="Select row"
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ accessorKey: "title",
+ header: ({ column }) =>
+
+
+ Open menu
+
+
+
+ Actions
+
+
+ {/*
+
+ */}
+
+ Delete
+
+
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete this{" "}
+ {model}.
+
+
+
+ Cancel
+ handleDelete()}>
+ Permanently Delete
+
+
+
+
+ {/* handleDelete()}
+ >
+ Delete
+ */}
+
+ Edit
+
+
+
+
+ );
+}
+```
+
+### DateColumn.tsx
+
+```ts copy
+import { getNormalDate } from "@/lib/getNormalDate";
+import React from "react";
+
+export default function DateColumn({
+ row,
+ accessorKey,
+}: {
+ row: any;
+ accessorKey: any;
+}) {
+ const createdAt = row.getValue(`${accessorKey}`);
+ const date = getNormalDate(createdAt);
+ const originalDate = new Date(createdAt);
+
+ const day = originalDate.getDate();
+ const month = originalDate.toLocaleString("default", { month: "short" });
+ const year = originalDate.getFullYear();
+
+ const formatted = `${day}th ${month} ${year}`;
+ // console.log(imageUrl);
+ return {date}
;
+}
+```
+
+### ImageColumn.tsx
+
+```ts copy
+import Image from "next/image";
+import React from "react";
+
+export default function ImageColumn({
+ row,
+ accessorKey,
+}: {
+ row: any;
+ accessorKey: any;
+}) {
+ const imageUrl = row.getValue(`${accessorKey}`);
+ // const thum = row.getValue(`${accessorKey}`);
+ // console.log(imageUrl);
+ return (
+
+
+ );
+}
+```
+
+### SortableColumn.tsx
+
+```ts copy
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowUpDown } from "lucide-react";
+export default function SortableColumn({
+ column,
+ title,
+}: {
+ column: any;
+ title: string;
+}) {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+ {title}
+
+ );
+}
+```
+
+## Create the DataTable components
+
+### DataTable.tsx
+
+```ts copy
+"use client";
+
+import * as React from "react";
+import {
+ ColumnDef,
+ ColumnFiltersState,
+ SortingState,
+ VisibilityState,
+ flexRender,
+ getCoreRowModel,
+ getFacetedRowModel,
+ getFacetedUniqueValues,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
+
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+
+import SearchBar from "./SearchBar";
+import { DataTableViewOptions } from "./DataTableViewOptions";
+import { Button } from "../ui/button";
+import { ListFilter } from "lucide-react";
+import DateFilters from "./DateFilters";
+import DateRangeFilter from "./DateRangeFilter";
+import { DataTablePagination } from "./DataTablePagination";
+
+interface DataTableProps {
+ columns: ColumnDef[];
+ data: TData[];
+}
+export default function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const [rowSelection, setRowSelection] = useState({});
+ const [columnVisibility, setColumnVisibility] = useState({});
+ const [columnFilters, setColumnFilters] = React.useState(
+ []
+ );
+ const [searchResults, setSearchResults] = useState(data);
+ const [filteredData, setFilteredData] = useState(data);
+ const [sorting, setSorting] = React.useState([]);
+ const [isSearch, setIsSearch] = useState(true);
+ // console.log(isSearch);
+ const table = useReactTable({
+ data: isSearch ? searchResults : filteredData,
+ columns,
+ state: {
+ sorting,
+ columnVisibility,
+ rowSelection,
+ columnFilters,
+ },
+ enableRowSelection: true,
+ onRowSelectionChange: setRowSelection,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ onColumnVisibilityChange: setColumnVisibility,
+ getCoreRowModel: getCoreRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFacetedRowModel: getFacetedRowModel(),
+ getFacetedUniqueValues: getFacetedUniqueValues(),
+ });
+ // console.log(searchResults);
+ return (
+
+
+
+
+
+
+
+
+
+ Filter
+
+
+
+
+ Filter by
+
+ Active
+
+ Draft
+ Archived
+
+
+
+
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ );
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+
{
+ table: Table;
+}
+import { Button } from "@/components/ui/button";
+
+export function DataTablePagination({
+ table,
+}: DataTablePaginationProps) {
+ return (
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
+
Rows per page
+
{
+ table.setPageSize(Number(value));
+ }}
+ >
+
+
+
+ {[10, 20, 30, 40, 50].map((pageSize) => (
+
+ {pageSize}
+
+ ))}
+
+
+
+
+ Page {table.getState().pagination.pageIndex + 1} of{" "}
+ {table.getPageCount()}
+
+
+ table.setPageIndex(0)}
+ disabled={!table.getCanPreviousPage()}
+ >
+ Go to first page
+
+ table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ Go to previous page
+
+ table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ Go to next page
+
+ table.setPageIndex(table.getPageCount() - 1)}
+ disabled={!table.getCanNextPage()}
+ >
+ Go to last page
+
+
+
+
;
+}
+```
+
+### DataTableViewOptions.tsx
+
+```ts copy
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { MixerHorizontalIcon } from "@radix-ui/react-icons";
+import { Table } from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+interface DataTablePaginationProps {
+ table: Table;
+}
+export function DataTableViewOptions({
+ table,
+}: DataTablePaginationProps) {
+ return (
+
+
+
+
+
+
+ Toggle columns
+ column.toggleVisibility(!!value)}
+ >
+ {column.id}
+
+ );
+ })}
+
+
+ );
+}
+```
+
+### DateFilters.tsx
+
+```tsx copy
+"use client";
+import {
+ filterByLast7Days,
+ filterByThisMonth,
+ filterByThisYear,
+ filterByToday,
+ filterByYesterday,
+} from "@/lib/dateFilters";
+import React, { useState } from "react";
+import Select from "react-tailwindcss-select";
+import { SelectValue } from "react-tailwindcss-select/dist/components/type";
+
+export default function DateFilters({
+ data,
+ onFilter,
+ setIsSearch,
+}: {
+ data: any[];
+ onFilter: any;
+ setIsSearch: any;
+}) {
+ const options = [
+ { value: "life", label: "Life time" },
+ { value: "today", label: "Today" },
+ { value: "last-7-days", label: "Last 7 days" },
+ { value: "month", label: "This Month" },
+ { value: "year", label: "This year" },
+ ];
+ const [selectedFilter, setSelectedFilter] = useState(options[0]);
+ const handleChange = (item: any) => {
+ const valueString = item!.value;
+ setSelectedFilter(item);
+ setIsSearch(false);
+ if (valueString === "life") {
+ onFilter(data);
+ } else if (valueString === "today") {
+ const filteredData = filterByToday(data);
+ onFilter(filteredData);
+ } else if (valueString === "yesterday") {
+ const filteredData = filterByYesterday(data);
+ onFilter(filteredData);
+ } else if (valueString === "last-7-days") {
+ const filteredData = filterByLast7Days(data);
+ onFilter(filteredData);
+ } else if (valueString === "month") {
+ const filteredData = filterByThisMonth(data);
+ onFilter(filteredData);
+ } else if (valueString === "year") {
+ const filteredData = filterByThisYear(data);
+ onFilter(filteredData);
+ }
+ console.log("value:", valueString);
+ // setAnimal(value);
+ // onFilter(filteredData);
+ };
+ return (
+
+
+ );
+}
+```
+
+### DateRangeFilter.tsx
+
+```tsx copy
+"use client";
+import {
+ filterByDateRange,
+ filterByLast7Days,
+ filterByThisMonth,
+ filterByThisYear,
+ filterByToday,
+ filterByYesterday,
+} from "@/lib/dateFilters";
+import React, { useState } from "react";
+import Select from "react-tailwindcss-select";
+import { SelectValue } from "react-tailwindcss-select/dist/components/type";
+import { addDays, format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+export default function DateRangeFilter({
+ data,
+ onFilter,
+ setIsSearch,
+ className,
+}: {
+ data: any[];
+ onFilter: any;
+ setIsSearch: any;
+ className?: string;
+}) {
+ const [date, setDate] = React.useState({
+ from: new Date(2024, 0, 20),
+ to: addDays(new Date(2024, 0, 20), 20),
+ });
+ // console.log(date);
+ const handleChange = (selectedDate: any) => {
+ console.log(selectedDate);
+ setDate(selectedDate);
+ setIsSearch(false);
+ const startDate = selectedDate.from;
+ const endDate = selectedDate.to;
+ const filteredData = filterByDateRange(data, startDate, endDate);
+ onFilter(filteredData);
+ };
+ return (
+
+
+
+
+ Pick a date
+ )}
+
+
+
+ handleChange(value)}
+ numberOfMonths={2}
+ />
+
+
+
) => {
+ setSearchTerm(e.target.value);
+ const filteredData = data.filter((item: any) =>
+ Object.values(item).some(
+ (value: any) =>
+ value &&
+ value.toString().toLowerCase().includes(e.target.value.toLowerCase())
+ )
+ );
+ setIsSearch(true);
+ onSearch(filteredData);
+ };
+ return (
+
+ );
+}
+```
+
+### TableHeader.tsx
+
+```tsx copy
+"use client";
+import { Button } from "@/components/ui/button";
+import * as XLSX from "xlsx";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ExcelCategoryProps, ProductProps, SelectOption } from "@/types/types";
+import {
+ Check,
+ CloudUpload,
+ Delete,
+ File,
+ ListFilter,
+ Loader2,
+ PlusCircle,
+ Search,
+ X,
+} from "lucide-react";
+import Link from "next/link";
+import React, { useState } from "react";
+import { RiFileExcel2Line } from "react-icons/ri";
+import { SiMicrosoftexcel } from "react-icons/si";
+import Select from "react-tailwindcss-select";
+import {
+ Options,
+ SelectValue,
+} from "react-tailwindcss-select/dist/components/type";
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { DialogDemo } from "./Button";
+import { formatBytes } from "@/lib/formatBytes";
+import { generateSlug } from "@/lib/generateSlug";
+import { createBulkCategories } from "@/actions/category";
+import toast from "react-hot-toast";
+import exportDataToExcel from "@/lib/exportDataToExcel";
+import { createBulkBrands } from "@/actions/brand";
+import { createBulkWarehouses } from "@/actions/warehouse";
+import { createBulkSuppliers } from "@/actions/supplier";
+import { createBulkUnits } from "@/actions/unit";
+import { createBulkProducts } from "@/actions/products";
+type TableHeaderProps = {
+ title: string;
+ href: string;
+ linkTitle: string;
+ data: any;
+ model: string;
+ showImport?: boolean;
+};
+export default function TableHeader({
+ title,
+ href,
+ linkTitle,
+ data,
+ model,
+ showImport = true,
+}: TableHeaderProps) {
+ const [status, setStatus] = useState(null);
+ const [date, setDate] = useState(null);
+ const [excelFile, setExcelFile] = useState(null);
+ const [jsonData, setJsonData] = useState("");
+ const [preview, setPreview] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [uploadSuccess, setUploadSuccess] = useState(false);
+ let excelDownload = "#";
+ if (model === "category") {
+ excelDownload = "/Categories.xlsx";
+ } else if (model === "brand") {
+ excelDownload = "/Brands.xlsx";
+ } else if (model === "warehouse") {
+ excelDownload = "/Warehouses.xlsx";
+ } else if (model === "supplier") {
+ excelDownload = "/Suppliers.xlsx";
+ } else if (model === "unit") {
+ excelDownload = "/Units.xlsx";
+ } else if (model === "product") {
+ excelDownload = "/Products.xlsx";
+ }
+ console.log(excelFile);
+ const options: Options = [
+ { value: "true", label: "Active" },
+ { value: "false", label: "Disabled" },
+ ];
+ const dateOptions: Options = [
+ { value: "lastMonth", label: "Last Month" },
+ { value: "thisMonth", label: "This Month" },
+ ];
+ const handleStatusChange = (item: SelectValue) => {
+ console.log("value:", item);
+ setStatus(item);
+ };
+ const handleDateChange = (item: SelectValue) => {
+ console.log("value:", item);
+ setDate(item);
+ };
+
+ function previewData() {
+ setPreview(true);
+ if (excelFile) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const data = e.target?.result;
+ if (data) {
+ const workbook = XLSX.read(data, { type: "binary" });
+ // SheetName
+ const sheetName = workbook.SheetNames[0];
+ // Worksheet
+ const workSheet = workbook.Sheets[sheetName];
+ // Json
+ const json = XLSX.utils.sheet_to_json(workSheet);
+ setJsonData(JSON.stringify(json, null, 2));
+ }
+ };
+ reader.readAsBinaryString(excelFile);
+ }
+ }
+ function saveData() {
+ setPreview(false);
+ if (excelFile) {
+ const reader = new FileReader();
+ reader.onload = async (e) => {
+ const data = e.target?.result;
+ if (data) {
+ const workbook = XLSX.read(data, { type: "binary" });
+ // SheetName
+ const sheetName = workbook.SheetNames[0];
+ // Worksheet
+ const workSheet = workbook.Sheets[sheetName];
+ // Json
+ const json = XLSX.utils.sheet_to_json(workSheet);
+ setJsonData(JSON.stringify(json, null, 2));
+
+ try {
+ setLoading(true);
+ if (model === "category") {
+ const categories = json.map((item: any) => {
+ return {
+ title: item.Title,
+ slug: generateSlug(item.Title),
+ description: item.Description,
+ imageUrl: item.Image,
+ mainCategoryId: item.mainCategoryId,
+ status: true,
+ };
+ });
+ await createBulkCategories(categories);
+ } else if (model === "brand") {
+ const brands = json.map((item: any) => {
+ return {
+ title: item.Title,
+ slug: generateSlug(item.Title),
+ logo: item.Logo,
+ status: true,
+ };
+ });
+ await createBulkBrands(brands);
+ // console.log(brands);
+ } else if (model === "warehouse") {
+ const warehouses = json.map((item: any) => {
+ return {
+ name: item.name,
+ slug: generateSlug(item.name),
+ logo: item.logo,
+ country: item.country,
+ city: item.city,
+ phone: item.phone,
+ email: item.email,
+ zipCode: item.zipCode,
+ contactPerson: item.contactPerson,
+ status: true,
+ };
+ });
+ await createBulkWarehouses(warehouses);
+ // console.log(warehouses);
+ } else if (model === "supplier") {
+ const suppliers = json.map((item: any) => {
+ return {
+ name: item.name,
+ imageUrl: item.imageUrl,
+ country: item.country,
+ city: item.city,
+ phone: String(item.phone),
+ email: item.email,
+ state: item.state,
+ companyName: item.companyName,
+ vatNumber: String(item.vatNumber),
+ address: item.address,
+ postalCode: String(item.postalCode),
+ status: true,
+ };
+ });
+ await createBulkSuppliers(suppliers);
+ // console.log(suppliers);
+ } else if (model === "unit") {
+ const units = json.map((item: any) => {
+ return {
+ title: item.title,
+ abbreviation: item.abbreviation,
+ };
+ });
+ await createBulkUnits(units);
+ // console.log(brands);
+ } else if (model === "product") {
+ const products = json.map((item: any) => {
+ return {
+ name: item.name,
+ slug: generateSlug(item.name),
+ productCode: item.productCode,
+ stockQty: item.stockQty,
+ warehouseId: item.warehouseId,
+ brandId: item.brandId,
+ supplierId: item.supplierId,
+ categoryId: item.categoryId,
+ unitId: item.unitId,
+ productCost: item.productCost,
+ productPrice: item.productPrice,
+ alertQty: item.alertQty,
+ productTax: item.productTax,
+ productThumbnail: item.productThumbnail,
+ taxMethod: item.taxMethod,
+ status: true,
+ productImages: [...item.productThumbnail],
+ productDetails: item.productDetails,
+ };
+ });
+ await createBulkProducts(products as any);
+ // console.log(brands);
+ }
+ setLoading(false);
+ setUploadSuccess(true);
+ // window.location.reload();
+ // toast.success("All Data Synced Successfully with No errors 👍");
+ } catch (error) {
+ setUploadSuccess(false);
+ setLoading(false);
+ toast.error("Something went wrong, Please Try again 😢");
+ console.log(error);
+ }
+ }
+ };
+ reader.readAsBinaryString(excelFile);
+ }
+ }
+ function handleExportData() {
+ console.log("data exported");
+ const today = new Date();
+ const filename = `Exported ${title} ${today.toDateString()}`;
+ // console.log(filename);
+ exportDataToExcel(data, filename);
+ }
+ return (
+
+
+
+ {title}
+
+
+
+
+ Export
+
+
+
+ {showImport && (
+
+
+ setUploadSuccess(false)}
+ size="sm"
+ variant="outline"
+ className="h-8 gap-1"
+ >
+
+ Import
+
+
+
+ {loading ? (
+
+
+ Excel Upload
+
+ You can Bring all your Data from excel, Please Download
+ the Sample file First to Make Sure you have Data Columns
+ Named Correctly
+
+
+
+
+
+
+ {!loading && (
+
+ {preview ? (
+ setPreview(false)}
+ variant={"outline"}
+ type="button"
+ >
+ Stop Preview
+
+ ) : (
+
+ Preview
+
+ )}
+
+ Save Data
+
+
+ )}
+
+ ) : (
+ <>
+ {uploadSuccess ? (
+
+
+ Excel Upload
+
+ You can Bring all your Data from excel, Please
+ Download the Sample file First to Make Sure you have
+ Data Columns Required
+
+
+
+
+
+
+ Data Synced Successfully. You can close the Window
+
+
+
+ window.location.reload()}
+ type="button"
+ variant="secondary"
+ >
+ Close
+
+
+
+
+ ) : (
+
+
+ Excel Upload
+
+ You can Bring all your Data from excel, Please
+ Download the Sample file First to Make Sure you have
+ Data Columns Required
+
+
+ {preview && jsonData ? (
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+
+ Click to upload
+ {" "}
+
+ {" "}
+ or drag and drop
+
+
+
+ Only Excel Files (.xlsx)
+
+
+
+ {excelFile && (
+
+
+
+
+
+
+ {excelFile.name}
+
+
+ {formatBytes(excelFile.size)}
+
+
+
+
setExcelFile(null)}>
+
+
+ )}
+
+ {preview ? (
+ setPreview(false)}
+ variant={"outline"}
+ type="button"
+ >
+ Stop Preview
+
+ ) : (
+
+ Preview
+
+ )}
+
+ Save Data
+
+
+
+ )}
+
+ )}
+
+ )}
+
+
+ {linkTitle}
+
+
+
+
+
+
+
+ );
+}
+```
+
+### 3.2 User List Component
+
+Create the UserList component to render the sortable list of users.
+
+```ts copy
+// components/UserList.tsx
+"use client";
+import { User, users } from "@/data/users";
+import {
+ DndContext,
+ DragEndEvent,
+ KeyboardSensor,
+ PointerSensor,
+ TouchSensor,
+ closestCenter,
+ useSensor,
+ useSensors,
+} from "@dnd-kit/core";
+import {
+ SortableContext,
+ arrayMove,
+ sortableKeyboardCoordinates,
+ verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import React, { useState } from "react";
+import { SortableUser } from "./SortableUser";
+
+export default function UserList() {
+ const [usersList, setUsersList] = useState(users);
+
+ function onDragEnd(event: DragEndEvent) {
+ const { active, over } = event;
+ if (active.id === over?.id) {
+ return;
+ }
+ setUsersList((users) => {
+ const oldIndex = users.findIndex((user) => user.id === active.id);
+ const newIndex = users.findIndex((user) => user.id === over?.id);
+ return arrayMove(users, oldIndex, newIndex);
+ });
+ }
+
+ const sensors = useSensors(
+ useSensor(PointerSensor),
+ useSensor(TouchSensor),
+ useSensor(KeyboardSensor, {
+ coordinateGetter: sortableKeyboardCoordinates,
+ })
+ );
+
+ return (
+
+
User List
+
+
+
+ {usersList.map((user: User) => (
+
+
+
+
+
+ {user.initials}
+
+ {user.name}
+
+ );
+}
+```
+
+### 3.4 Add CSS Custom Class to Sortable item
+
+```css copy
+/* styles/globals.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.touch-action-none {
+ touch-action: none;
+}
+```
+
+### Explanation
+
+DndContext: The DndContext component from dnd-kit provides the context for drag and drop functionality. It handles events and sensors.
+SortableContext: The SortableContext component wraps the list of items that should be sortable. It uses a strategy to define how the items should be sorted.
+useSortable: The useSortable hook provides the necessary props and refs to make an item sortable. It returns attributes, listeners, and styling properties.
+arrayMove: The arrayMove utility from dnd-kit helps in reordering the array when an item is dragged and dropped.
+
+- setNoderef : This option specifies which component should be moved when dragging occurs.
+- setActivatorNodeRef : This option indicates which element should be used as a reference to detect if the user is initiating a drag action.
+- listeners : This option specifies which element should be able to listen to events such as clicks and drags.
+- transform : This option is used to set up the necessary styles when an element is being moved due to the drag action.
+- transition : This option is used to set up any animations that occur while the element is being moved.
diff --git a/pages/programming-tutorials/nextjs/ecommerce.mdx b/pages/programming-tutorials/nextjs/ecommerce.mdx
new file mode 100644
index 00000000..b8797cbe
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/ecommerce.mdx
@@ -0,0 +1,106 @@
+# Ecommerce Pagination
+
+Am using Shads Pagination component: [here in docs](https://ui.shadcn.com/docs/components/pagination)
+
+### Pagination Componet
+
+```ts copy
+"use client";
+
+import React from "react";
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@/components/ui/pagination";
+import { useSearchParams } from "next/navigation";
+
+export default function Paginate({ totalPages }) {
+ const searchParams = useSearchParams();
+ const sort = searchParams.get("sort") || "asc";
+ const min = searchParams.get("min") || 0;
+ const max = searchParams.get("max") || "";
+ const currentPage = parseInt(searchParams.get("page")) || 1;
+
+ return (
+
+
+
+
+ {totalPages <= 3 ? (
+ Array.from({ length: totalPages }, (_, index) => (
+
+
+ {index + 1}
+
+
+ ))
+ ) : (
+ <>
+ {Array.from({ length: 3 }, (_, index) => (
+
+
+ {index + 1}
+
+
+ ))}
+
+
+
+ )}
+
+
+
+
+ );
+}
+```
diff --git a/pages/programming-tutorials/nextjs/excel.mdx b/pages/programming-tutorials/nextjs/excel.mdx
new file mode 100644
index 00000000..eae69e4a
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/excel.mdx
@@ -0,0 +1,270 @@
+import { FileTree } from "nextra/components";
+
+# Import Data from Excel
+
+## Install Dependencies
+
+You will need to install the xlsx Package
+
+```bash copy
+ npm i xlsx
+```
+
+## Create Page.tsx
+
+This Page is where you fetch and render the table
+
+```ts copy
+import { getUsers } from "@/actions/users";
+import UsersTable from "@/components/UsersTable";
+import React from "react";
+
+export default async function page() {
+ const users = (await getUsers()) || [];
+ return (
+
+
+ );
+}
+```
+
+## Create Server Action for Handling Creating new Item
+
+```ts copy
+"use server";
+import { prisma } from "@/lib/db";
+import { revalidatePath } from "next/cache";
+export type UserProps = {
+ Name: string;
+ Age: number;
+ City: string;
+};
+export async function getUsers() {
+ try {
+ const users = await prisma.user.findMany();
+ return users;
+ } catch (error) {
+ console.log(error);
+ }
+}
+export async function createUser(data: UserProps) {
+ try {
+ const user = await prisma.user.create({
+ data: {
+ name: data.Name,
+ age: data.Age,
+ city: data.City,
+ },
+ });
+ revalidatePath("/");
+ return user;
+ } catch (error) {
+ console.log(error);
+ }
+}
+export async function createBulkUsers(users: UserProps[]) {
+ try {
+ for (const user of users) {
+ await createUser(user);
+ }
+ } catch (error) {
+ console.log(error);
+ }
+}
+export async function deleteUsers() {
+ try {
+ await prisma.user.deleteMany();
+ revalidatePath("/");
+ } catch (error) {
+ console.log(error);
+ }
+}
+```
+
+## Create the Table with Import Button
+
+```ts copy
+"use client";
+import { UserProps, createBulkUsers, deleteUsers } from "@/actions/users";
+import { User } from "@prisma/client";
+import React, { useState } from "react";
+import * as XLSX from "xlsx";
+export default function UsersTable({ users }: { users: User[] }) {
+ // file
+ const [file, setFile] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [jsonData, setJsonData] = useState("");
+ console.log(file);
+ // json stringified (purpose of previewing)
+ function previewData() {
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const data = e.target?.result;
+ if (data) {
+ const workbook = XLSX.read(data, { type: "binary" });
+ // SheetName
+ const sheetName = workbook.SheetNames[0];
+ // Worksheet
+ const workSheet = workbook.Sheets[sheetName];
+ // Json
+ const json = XLSX.utils.sheet_to_json(workSheet);
+ setJsonData(JSON.stringify(json, null, 2));
+ }
+ };
+ reader.readAsBinaryString(file);
+ }
+ }
+ function saveData() {
+ if (file) {
+ setLoading(true);
+ const reader = new FileReader();
+ reader.onload = async (e) => {
+ const data = e.target?.result;
+ if (data) {
+ const workbook = XLSX.read(data, { type: "binary" });
+ // SheetName
+ const sheetName = workbook.SheetNames[0];
+ // Worksheet
+ const workSheet = workbook.Sheets[sheetName];
+ // Json
+ const json: UserProps[] = XLSX.utils.sheet_to_json(workSheet);
+ //Save to the DB
+ try {
+ // console.log(json);
+ await createBulkUsers(json);
+ setLoading(false);
+ } catch (error) {
+ console.log(error);
+ }
+ }
+ };
+ reader.readAsBinaryString(file);
+ }
+ }
+ async function clearData() {
+ try {
+ await deleteUsers();
+ } catch (error) {
+ console.log(error);
+ }
+ }
+ return (
+
+ {/* BUTTONS */}
+ {/* upload input, preview btn , save btn , clear Data */}
+
+
+
+ Upload file
+
+
+
+ Preview Data
+
+
+ Save Data
+
+
+ Clear Data
+
+
+
{jsonData}
+ {loading ? (
+
Saving Data please wait...
+ ) : (
+
+ {users && users.length > 0 && (
+
+
+
+
+ Name
+
+
+ Age
+
+
+ City
+
+
+
+
+ {users.map((user) => {
+ return (
+
+
+ {user.name}
+
+ {user.age}
+ {user.city}
+
+ );
+ })}
+
+
+ )}
+
+ )}
+
+ {/* Table */}
+
+
+ ## Convert Date to Iso
+
+```ts copy
+export function convertDateToIso(dateStr: string): string {
+ // Ensure the input is in the correct format
+ if (!/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
+ throw new Error('Invalid date format. Expected "YYYY-MM-DD".');
+ }
+
+ // Append the time and timezone information to the date string
+ const prismaDateTime = `${dateStr}T00:00:00.000Z`;
+ return prismaDateTime;
+}
+```
+
+## Convert ISO Date to Date String
+
+```ts copy
+export function convertIsoToDateString(
+ prismaDate: Date | string | undefined
+): string {
+ if (prismaDate === undefined) {
+ throw new Error("Invalid input: date is undefined.");
+ }
+
+ // If the input is a string, convert it to a Date object
+ let dateObject: Date;
+ if (typeof prismaDate === "string") {
+ dateObject = new Date(prismaDate);
+ if (isNaN(dateObject.getTime())) {
+ throw new Error("Invalid input: date string is not valid.");
+ }
+ } else if (prismaDate instanceof Date) {
+ dateObject = prismaDate;
+ } else {
+ throw new Error(
+ "Invalid input: date must be a Date object or an ISO string."
+ );
+ }
+
+ // Convert the Date object to ISO string format and extract the date part
+ const isoString = dateObject.toISOString();
+ const dateString = isoString.split("T")[0];
+ return dateString;
+}
+```
+
+## Date Filters
+
+```ts copy
+// utils/dateFilters.ts
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+
+dayjs.extend(isBetween);
+
+export const filterByToday = (data: any[]): any[] => {
+ const today = dayjs().startOf("day");
+ return data.filter((item) => dayjs(item.createdAt).isSame(today, "day"));
+};
+
+export const filterByYesterday = (data: any[]): any[] => {
+ const yesterday = dayjs().subtract(1, "day").startOf("day");
+ return data.filter((item) => dayjs(item.createdAt).isSame(yesterday, "day"));
+};
+
+export const filterByLast7Days = (data: any[]): any[] => {
+ const last7Days = dayjs().subtract(7, "day").startOf("day");
+ return data.filter((item) => dayjs(item.createdAt).isAfter(last7Days));
+};
+
+export const filterByThisMonth = (data: any[]): any[] => {
+ const startOfMonth = dayjs().startOf("month");
+ return data.filter((item) => dayjs(item.createdAt).isAfter(startOfMonth));
+};
+
+export const filterByThisYear = (data: any[]): any[] => {
+ const startOfYear = dayjs().startOf("year");
+ return data.filter((item) => dayjs(item.createdAt).isAfter(startOfYear));
+};
+
+export const filterByDateRange = (
+ data: any[],
+ startDate: string,
+ endDate: string
+): any[] => {
+ const start = dayjs(startDate).startOf("day");
+ const end = dayjs(endDate).endOf("day");
+ return data.filter((item) =>
+ dayjs(item.createdAt).isBetween(start, end, null, "[]")
+ );
+};
+```
+
+## Prisma Global Instance with Transaction
+
+```ts copy
+import { PrismaClient } from "@prisma/client";
+
+declare global {
+ var prisma: PrismaClient | undefined;
+}
+
+export const prisma =
+ globalThis.prisma ||
+ new PrismaClient({
+ transactionOptions: {
+ maxWait: 5000, // default: 2000
+ timeout: 10000, // default: 5000
+ },
+ });
+if (process.env.NODE_ENV !== "production") globalThis.prisma = prisma;
+
+export default prisma;
+```
+
+## Export Data to Excel
+
+```ts copy
+import * as XLSX from "xlsx";
+
+export default function exportDataToExcel(data: any[], filename: string) {
+ // Create a new workbook
+ const workbook = XLSX.utils.book_new();
+
+ // Convert the array of objects to a worksheet
+ const worksheet = XLSX.utils.json_to_sheet(data);
+
+ // Add the worksheet to the workbook
+ XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+ // Write the workbook to a file
+ XLSX.writeFile(workbook, `${filename}.xlsx`);
+}
+```
+
+## Format File Size in KB ,MB, GB
+
+```ts copy
+export function formatBytes(bytes: number): string {
+ const kilobyte = 1024;
+ const megabyte = kilobyte * 1024;
+ const gigabyte = megabyte * 1024;
+
+ if (bytes < kilobyte) {
+ return bytes + " B";
+ } else if (bytes < megabyte) {
+ return (bytes / kilobyte).toFixed(2) + " KB";
+ } else if (bytes < gigabyte) {
+ return (bytes / megabyte).toFixed(2) + " MB";
+ } else {
+ return (bytes / gigabyte).toFixed(2) + " GB";
+ }
+}
+```
+
+## Format Money Currency to have commas
+
+```ts copy
+export function formatMoney(amount: number): string {
+ return amount.toLocaleString("en-US");
+}
+```
+
+## Generate Initials from a name
+
+```ts copy
+export function getInitials(name: string | null | undefined): string {
+ if (name) {
+ // Split the name by spaces
+ const nameParts = name.split(" ");
+
+ // Map over the parts and take the first character of each
+ const initials = nameParts.map((part) => part.charAt(0).toUpperCase());
+
+ // Join the initials together
+ return initials.join("");
+ } else {
+ return "CN";
+ }
+}
+
+// Example usage
+const initials = getInitials("Muke John");
+console.log(initials); // Outputs: MJ
+```
+
+## Generate Order Numbers
+
+```ts copy
+export function generateOrderNumber(): string {
+ const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+ let orderNumber = "";
+ for (let i = 0; i < 8; i++) {
+ const randomIndex = Math.floor(Math.random() * characters.length);
+ orderNumber += characters[randomIndex];
+ }
+ return orderNumber;
+}
+```
+
+## Generate a Strong Password
+
+```ts copy
+export function generatePassword(): string {
+ const length = 8;
+ const charset =
+ "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@$!%*?&";
+ let password = "";
+ let hasUppercase = false;
+ let hasLowercase = false;
+ let hasDigit = false;
+ let hasSpecial = false;
+
+ while (
+ !hasUppercase ||
+ !hasLowercase ||
+ !hasDigit ||
+ !hasSpecial ||
+ password.length < length
+ ) {
+ const char = charset[Math.floor(Math.random() * charset.length)];
+ password += char;
+
+ if (/[A-Z]/.test(char)) hasUppercase = true;
+ if (/[a-z]/.test(char)) hasLowercase = true;
+ if (/[0-9]/.test(char)) hasDigit = true;
+ if (/[@$!%*?&]/.test(char)) hasSpecial = true;
+ }
+ // console.log(password);
+ return password;
+}
+```
+
+## Gnerate Slug
+
+```ts copy
+export function generateSlug(title: string): string {
+ // Convert title to lowercase and replace spaces with dashes
+ const slug = title.toLowerCase().replace(/\s+/g, "-");
+
+ // Remove special characters except for dashes
+ const cleanedSlug = slug.replace(/[^\w\-]/g, "");
+
+ return cleanedSlug;
+}
+```
+
+## Get Current Date and Time
+
+```ts copy
+export function getCurrentDateAndTime() {
+ // Create a new Date object
+ const now = new Date();
+
+ // Get the date components
+ const day = String(now.getDate()).padStart(2, "0"); // Get day and pad with leading zero if needed
+ const month = String(now.getMonth() + 1).padStart(2, "0"); // Get month (0-indexed) and pad with leading zero
+ const year = now.getFullYear(); // Get full year
+
+ // Get the time components
+ let hours = now.getHours(); // Get hours
+ const minutes = String(now.getMinutes()).padStart(2, "0"); // Get minutes and pad with leading zero
+ const ampm = hours >= 12 ? "PM" : "AM"; // Determine AM/PM
+
+ hours = hours % 12; // Convert to 12-hour format
+ hours = hours ? hours : 12; // If hour is 0, make it 12
+
+ // Format the date and time
+ const currentDate = `${day}-${month}-${year}`;
+ const currentTime = `${hours}:${minutes} ${ampm}`;
+
+ return { currentDate, currentTime };
+}
+```
+
+## Get Normal Date
+
+```ts copy
+export function getNormalDate(inputDate: Date): string {
+ const options: Intl.DateTimeFormatOptions = {
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ };
+ const formattedDate = new Intl.DateTimeFormat("en-US", options).format(
+ inputDate
+ );
+
+ // Add ordinal suffix to the day
+ const day = inputDate.getDate();
+ const suffix =
+ day === 1 || day === 21 || day === 31
+ ? "st"
+ : day === 2 || day === 22
+ ? "nd"
+ : day === 3 || day === 23
+ ? "rd"
+ : "th";
+ return formattedDate.replace(/\b(\d{1,2})\b/, `$1${suffix}`);
+}
+```
+
+## Get the Past time in seconds, minutes, hours, days
+
+```ts copy
+export function timeAgo(createdAt: string): string {
+ const createdDate = new Date(createdAt); // Convert the string to a Date object
+ const now = new Date();
+ const seconds = Math.floor((now.getTime() - createdDate.getTime()) / 1000);
+
+ if (seconds < 60) {
+ return `${seconds} second${seconds !== 1 ? "s" : ""} ago`;
+ }
+
+ const minutes = Math.floor(seconds / 60);
+ if (minutes < 60) {
+ return `${minutes} minute${minutes !== 1 ? "s" : ""} ago`;
+ }
+
+ const hours = Math.floor(minutes / 60);
+ if (hours < 24) {
+ return `${hours} hour${hours !== 1 ? "s" : ""} ago`;
+ }
+
+ const days = Math.floor(hours / 24);
+ if (days < 30) {
+ return `${days} day${days !== 1 ? "s" : ""} ago`;
+ }
+
+ const months = Math.floor(days / 30);
+ if (months < 12) {
+ return `${months} month${months !== 1 ? "s" : ""} ago`;
+ }
+
+ const years = Math.floor(months / 12);
+ return `${years} year${years !== 1 ? "s" : ""} ago`;
+}
+```
+
+
+
+ ## Server Actions in next js
+
+```ts copy
+"use server";
+
+import { CategoryProps, ExcelCategoryProps } from "@/types/types";
+import prisma from "@/lib/db";
+import { revalidatePath } from "next/cache";
+```
+
+## Create a New Category
+
+```ts copy
+export async function createCategory(data: CategoryProps) {
+ const slug = data.slug;
+ try {
+ const existingCategory = await prisma.category.findUnique({
+ where: {
+ slug,
+ },
+ });
+ if (existingCategory) {
+ return existingCategory;
+ }
+ const newCategory = await prisma.category.create({
+ data,
+ });
+ // console.log(newCategory);
+ revalidatePath("/dashboard/inventory/categories");
+ return newCategory;
+ } catch (error) {
+ console.log(error);
+ return null;
+ }
+}
+```
+
+## Get All Categories from the DB
+
+```ts copy
+export async function getAllCategories() {
+ try {
+ const categories = await prisma.category.findMany({
+ orderBy: {
+ createdAt: "desc",
+ },
+ include: {
+ mainCategory: true,
+ },
+ });
+
+ return categories;
+ } catch (error) {
+ console.log(error);
+ return null;
+ }
+}
+```
+
+## Create Bulk Categories
+
+```ts copy
+export async function createBulkCategories(categories: CategoryProps[]) {
+ try {
+ for (const category of categories) {
+ await createCategory(category);
+ }
+ } catch (error) {
+ console.log(error);
+ }
+}
+```
+
+## Get a Category By id
+
+```ts copy
+export async function getCategoryById(id: string) {
+ try {
+ const category = await prisma.category.findUnique({
+ where: {
+ id,
+ },
+ });
+ return category;
+ } catch (error) {
+ console.log(error);
+ }
+}
+```
+
+## Get a category by id
+
+```ts copy
+export async function updateCategoryById(id: string, data: CategoryProps) {
+ try {
+ const updatedCategory = await prisma.category.update({
+ where: {
+ id,
+ },
+ data,
+ });
+ revalidatePath("/dashboard/inventory/categories");
+ return updatedCategory;
+ } catch (error) {
+ console.log(error);
+ }
+}
+```
+
+## Delete a Category By ID
+
+```ts copy
+export async function deleteCategory(id: string) {
+ try {
+ const deletedCategory = await prisma.category.delete({
+ where: {
+ id,
+ },
+ });
+
+ return {
+ ok: true,
+ data: deletedCategory,
+ };
+ } catch (error) {
+ console.log(error);
+ }
+}
+```
+
+## Delete Many Categories
+
+```ts copy
+export async function deleteManyCategories() {
+ try {
+ await prisma.category.deleteMany();
+
+ return {
+ ok: true,
+ };
+ } catch (error) {
+ console.log(error);
+ }
+}
+```
+
+## Create User
+
+```ts copy
+export async function createUser(data: UserProps) {
+ const {
+ email,
+ password,
+ firstName,
+ lastName,
+ name,
+ phone,
+ profileImage,
+ roleId,
+ status,
+ } = data;
+ try {
+ // Hash the PAASWORD
+ const hashedPassword = await bcrypt.hash(password, 10);
+ const existingUser = await prisma.user.findUnique({
+ where: {
+ email,
+ },
+ });
+ if (existingUser) {
+ return {
+ error: `User with this email(${email}) already exists`,
+ status: 409,
+ data: null,
+ };
+ }
+ const newUser = await prisma.user.create({
+ data: {
+ email,
+ password: hashedPassword,
+ plainPassword: password,
+ firstName,
+ lastName,
+ name,
+ phone,
+ profileImage,
+ roleId,
+ status,
+ },
+ });
+ revalidatePath("/dashboard/users");
+ // console.log(newUser);
+ return {
+ error: null,
+ status: 200,
+ data: newUser,
+ };
+ } catch (error) {
+ console.log(error);
+ return {
+ error: `Something Went wrong, Please try again`,
+ status: 500,
+ data: null,
+ };
+ }
+}
+```
+
+
+
+ ## Hooks
+ Coming Soon
+
+
diff --git a/pages/programming-tutorials/nextjs/get-staretd.mdx b/pages/programming-tutorials/nextjs/get-staretd.mdx
new file mode 100644
index 00000000..ce941f84
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/get-staretd.mdx
@@ -0,0 +1 @@
+# Get Satrted with Next
diff --git a/pages/programming-tutorials/nextjs/next-actions.mdx b/pages/programming-tutorials/nextjs/next-actions.mdx
new file mode 100644
index 00000000..6d1850b4
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/next-actions.mdx
@@ -0,0 +1,19 @@
+# How to use react-hook-form with Next.js Server Actions and Zod Input validation
+
+
+
+If you've worked with more forms within Next.js (or React in general), chances are you've used react-hook-form, a "performant, flexible and extensible forms with easy-to-use validation" (as per their website).
+
+I've used react-hook-form for a long time now and with the recent announcement of Server Actions becoming stable in Next.js 14 I've gotten curious about how to use these tools together.
+
+### Prerequisites
+
+For this guide, we assume you've got a Next.js 14 installation. Additionally, we need react-hook-form and, as a bonus, we're gonna use Zod for advanced input validation:
+
+### Install Dependencies
+
+```bash copy
+npm install react-hook-form zod @hookform/resolvers
+```
+
+It's important to note that server actions are still pretty new and some libraries, like react-hook-form, will certainly improve support of them in the future. For this guide, I'm using react-hook-form v7.48.
diff --git a/pages/programming-tutorials/nextjs/next-api.mdx b/pages/programming-tutorials/nextjs/next-api.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/nextjs/next-auth.mdx b/pages/programming-tutorials/nextjs/next-auth.mdx
new file mode 100644
index 00000000..3dd84e41
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/next-auth.mdx
@@ -0,0 +1,994 @@
+# Aunthentication with Next Auth and Prisma
+
+Lets start with Prisma
+
+## Install prisma and prisma client
+
+```ts filename=">_ Terminal" copy
+npm install prisma @prisma/client
+```
+
+## Generate a prisma schema
+
+```ts filename=">_ Terminal" copy
+npx prisma init --datasource-provider mongodb
+```
+
+After the Installation,
+
+## Add your Mongodb Database URL
+
+```ts copy
+DATABASE_URL =
+ "mongodb+srv://test:test@cluster0.ns1yp.mongodb.net/myFirstDatabase";
+```
+
+## Create a prisma Schema
+
+```ts copy
+
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+ provider = "prisma-client-js"
+}
+
+datasource db {
+ provider = "mongodb"
+ url = env("DATABASE_URL")
+}
+
+model Account {
+ id String @id @default(auto()) @map("_id") @db.ObjectId
+ userId String @db.ObjectId
+ type String
+ provider String
+ providerAccountId String
+ refresh_token String? @db.String
+ access_token String? @db.String
+ expires_at Int?
+ token_type String?
+ scope String?
+ id_token String? @db.String
+ session_state String?
+
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ @@unique([provider, providerAccountId])
+}
+
+model Session {
+ id String @id @default(auto()) @map("_id") @db.ObjectId
+ sessionToken String @unique
+ userId String @db.ObjectId
+ expires DateTime
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+enum UserRole {
+ USER
+ ADMIN
+ SERVICE_PROVIDER
+}
+
+model User {
+ id String @id @default(auto()) @map("_id") @db.ObjectId
+ name String?
+ email String? @unique
+ emailVerified DateTime?
+ image String?
+ role UserRole @default(USER)
+ password String
+ accounts Account[]
+ sessions Session[]
+ isVerfied Boolean @default(false)
+ token Int
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+
+
+model Category {
+ id String @id @default(auto()) @map("_id") @db.ObjectId
+ title String
+ slug String @unique
+ imageUrl String?
+ demoLink String?
+ description String?
+ products Product[]
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime? @updatedAt
+}
+
+model Product {
+ id String @id @default(auto()) @map("_id") @db.ObjectId
+ title String
+ slug String @unique
+ price Float?
+ qty Int?
+ imageUrl String?
+ productImages String[]
+ features String[]
+ description String?
+ categoryId String @db.ObjectId
+ category Category @relation(fields: [categoryId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime? @updatedAt
+}
+
+```
+
+## Create a prisma Client Global Instance
+
+```ts copy
+import { PrismaClient } from "@prisma/client";
+
+declare global {
+ var prisma: PrismaClient | undefined;
+}
+
+export const prismaClient = globalThis.prisma || new PrismaClient();
+if (process.env.NODE_ENV !== "production") globalThis.prisma = prismaClient;
+```
+
+## Registration of Users
+
+### Install Dependencies necessary for Registation
+
+```ts copy
+npm install resend react-email @react-email/components -E
+npm i bcrypt @types/bcrypt
+
+```
+
+We will Use Credentials for Authentication
+
+here is the Registration Form
+
+### Registration Form
+
+```ts copy
+"use client";
+import { type RegisterInputProps } from "@/types/types";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+import TextInput from "../FormInputs/TextInput";
+import SubmitButton from "../FormInputs/SubmitButton";
+import { useState } from "react";
+import { createUser } from "@/actions/users";
+import { UserRole } from "@prisma/client";
+import toast from "react-hot-toast";
+
+export default function RegisterForm({ role = "USER" }: { role?: UserRole }) {
+ const [isLoading, setIsLoading] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useForm();
+ async function onSubmit(data: RegisterInputProps) {
+ // console.log(data);
+ setIsLoading(true);
+
+ data.role = role;
+ try {
+ const user = await createUser(data);
+ if (user && user.status === 200) {
+ console.log("User Created successfully");
+ reset();
+ setIsLoading(false);
+ toast.success("User Created successfully");
+ console.log(user.data);
+ } else {
+ console.log(user.error);
+ }
+ } catch (error) {
+ console.log(error);
+ }
+ }
+ return (
+
+
+
+
+ Create new account
+
+
+
+
+
+
+
+ Already have Account?{" "}
+
+
+
",
+ to: email,
+ subject: "Verify Your Email Address",
+ react: EmailTemplate({ firstName, token, linkText, message }),
+ });
+ console.log(token);
+ console.log(sendMail);
+ console.log(newUser);
+ return {
+ data: newUser,
+ error: null,
+ status: 200,
+ };
+ } catch (error) {
+ console.log(error);
+ return {
+ error: "Something went wrong",
+ };
+ }
+}
+```
+
+### React Email Template
+
+```ts copy
+import * as React from "react";
+import {
+ Body,
+ Button,
+ Container,
+ Head,
+ Html,
+ Img,
+ Link,
+ Preview,
+ Section,
+ Text,
+} from "@react-email/components";
+interface EmailTemplateProps {
+ name?: string;
+ token: number;
+ linkText: string;
+ message: string;
+}
+
+const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+
+export const EmailTemplate = ({
+ name = "",
+ token,
+ linkText,
+ message,
+}: EmailTemplateProps) => (
+
+
+ {linkText}
+
+
+
+ @{name} , thank you for Joining Us
+
+
+
+
+ Hey {name} !
+
+ {message}
+
+ {token}
+
+ If you have any questions, feel free to reach out.
+
+
+
+
+
+
+ GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107
+
+
+
+
+);
+
+export default EmailTemplate;
+
+const main = {
+ backgroundColor: "#ffffff",
+ color: "#24292e",
+ fontFamily:
+ '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+};
+
+const container = {
+ width: "480px",
+ margin: "0 auto",
+ padding: "20px 0 48px",
+};
+
+const title = {
+ fontSize: "24px",
+ lineHeight: 1.25,
+};
+
+const section = {
+ padding: "24px",
+ border: "solid 1px #dedede",
+ borderRadius: "5px",
+ textAlign: "center" as const,
+};
+
+const text = {
+ margin: "0 0 10px 0",
+ textAlign: "left" as const,
+};
+
+const button = {
+ fontSize: "24px",
+ backgroundColor: "#28a745",
+ color: "#fff",
+ lineHeight: 1.5,
+ borderRadius: "0.5em",
+ padding: "0.75em 1.5em",
+};
+
+const links = {
+ textAlign: "center" as const,
+};
+
+const link = {
+ color: "#0366d6",
+ fontSize: "12px",
+};
+
+const footer = {
+ color: "#6a737d",
+ fontSize: "12px",
+ textAlign: "center" as const,
+ marginTop: "60px",
+};
+```
+
+## Create Verify Account Dynamic Page
+
+Lets Create a page in front called `/verify-account/[id]/page.tsx`
+and add the following Code
+
+```ts copy
+import { getUserById } from "@/actions/users";
+import VerifyTokenForm from "@/components/VerifyTokenForm";
+
+export default async function VerifyAccount({
+ params: { id },
+}: {
+ params: { id: string };
+}) {
+ //Get a User
+ const user = await getUserById(id);
+ const userToken = user?.token;
+ return (
+
+
+
+
+
+ Verify Account
+
+
+
+
+ );
+}
+```
+
+### Create Verify TokenForm Component
+
+The VerifyToken Component requires you to Install the following dependencies
+
+```ts filename=">_ Terminal" copy
+npm i zod @hookform/resolvers react-icons
+npx shadcn-ui@latest add form input-otp
+```
+
+### Create the Component
+
+Add the following Code
+
+```ts copy
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { HiInformationCircle } from "react-icons/hi";
+import { Alert } from "flowbite-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { Loader } from "lucide-react";
+import { updateUserById } from "@/actions/users";
+import { Button } from "@/components/ui/button";
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form";
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+} from "@/components/ui/input-otp";
+
+const FormSchema = z.object({
+ token: z.string().min(6, {
+ message: "Your one-time password must be 6 characters.",
+ }),
+});
+
+export default function VerifyTokenForm({
+ userToken,
+ id,
+}: {
+ userToken: any;
+ id: string;
+}) {
+ const [loading, setLoading] = useState(false);
+ const [showNotification, setShowNotification] = useState(false);
+ const router = useRouter();
+ const form = useForm>({
+ resolver: zodResolver(FormSchema),
+ defaultValues: {
+ token: "",
+ },
+ });
+
+ async function onSubmit(data: z.infer) {
+ setLoading(true);
+ const userInputToken = parseInt(data.token);
+ if (userInputToken === userToken) {
+ setShowNotification(false);
+ //Update User
+ try {
+ await updateUserById(id);
+ setLoading(false);
+ // reset();
+ toast.success("Account Verified");
+ router.push("/login");
+ } catch (error) {
+ setLoading(false);
+ console.log(error);
+ }
+ } else {
+ setShowNotification(true);
+ setLoading(false);
+ }
+ console.log(data);
+ }
+
+ return (
+
+
+ );
+}
+```
+
+## Next Auth and Login
+
+### Install Next Auth
+
+```ts copy
+npm install next-auth @auth/prisma-adapter
+
+```
+
+### Create the catch-all route
+
+```ts copy
+app / api / auth / [...nextauth] / route.ts;
+```
+
+and add this code
+
+```ts copy
+import { authOptions } from "@/config/auth";
+import NextAuth from "next-auth";
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };
+```
+
+### Create the AuthOptions
+
+```ts copy
+import { AuthOptions, NextAuthOptions } from "next-auth";
+// import { PrismaAdapter } from "@auth/prisma-adapter";
+import { PrismaAdapter } from "@auth/prisma-adapter";
+import { prismaClient } from "@/prisma/db";
+
+import GoogleProvider from "next-auth/providers/google";
+import EmailProvider from "next-auth/providers/email";
+import type { Adapter } from "next-auth/adapters";
+import CredentialsProvider from "next-auth/providers/credentials";
+import { compare } from "bcrypt";
+// more providers at https://next-auth.js.org/providers
+export const authOptions: NextAuthOptions = {
+ adapter: PrismaAdapter(prismaClient) as Adapter,
+ secret: process.env.NEXTAUTH_SECRET,
+ session: {
+ strategy: "jwt",
+ },
+ pages: {
+ signIn: "/login",
+ },
+ providers: [
+ EmailProvider({
+ server: process.env.GMAIL_EMAIL_SERVER || "", // any SMTP server will work
+ from: process.env.EMAIL_FROM || "",
+ // maxAge: 24 * 60 * 60, // How long email links are valid for (default 24h)
+ }),
+ GoogleProvider({
+ //Checking if the role exista and if not add USER Bydefault
+ // profile(profile) {
+ // return { role: profile.role ?? "USER", ... }
+ // },
+ clientId: process.env.GOOGLE_CLIENT_ID || "",
+ clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
+ }),
+ CredentialsProvider({
+ name: "Credentials",
+ credentials: {
+ email: { label: "Email", type: "email", placeholder: "jb@gmail.com" },
+ password: { label: "Password", type: "password" },
+ },
+ async authorize(credentials) {
+ try {
+ console.log(
+ "Authorize function called with credentials:",
+ credentials
+ );
+ // Check if user credentials are Correct
+ if (!credentials?.email || !credentials?.password) {
+ throw { error: "No Inputs Found", status: 401 };
+ }
+ console.log("Pass 1 checked ");
+ //Check if user exists
+ const existingUser = await prismaClient.user.findUnique({
+ where: { email: credentials.email },
+ });
+
+ if (!existingUser) {
+ console.log("No user found");
+ throw { error: "No user found", status: 401 };
+ }
+
+ console.log("Pass 2 Checked");
+ console.log(existingUser);
+ let passwordMatch: boolean = false;
+ //Check if Password is correct
+ if (existingUser && existingUser.password) {
+ // if user exists and password exists
+ passwordMatch = await compare(
+ credentials.password,
+ existingUser.password
+ );
+ }
+ if (!passwordMatch) {
+ console.log("Password incorrect");
+ throw { error: "Password Incorrect", status: 401 };
+ }
+ console.log("Pass 3 Checked");
+ const user = {
+ id: existingUser.id,
+ name: existingUser.name,
+ email: existingUser.email,
+ role: existingUser.role,
+ };
+ //
+ console.log("User Compiled");
+ console.log(user);
+ return user;
+ } catch (error) {
+ console.log("aLL Failed");
+ console.log(error);
+ throw { error: "Something went wrong", status: 401 };
+ }
+ },
+ }),
+ ],
+ callbacks: {
+ async jwt({ token, user }) {
+ const dbUser = await prismaClient.user.findFirst({
+ where: { email: token?.email ?? "" },
+ });
+ if (!dbUser) {
+ token.id = user!.id;
+ return token;
+ }
+ return {
+ id: dbUser.id,
+ name: dbUser.name,
+ email: dbUser.email,
+ role: dbUser.role,
+ picture: dbUser.image,
+ };
+ },
+ session({ session, token }) {
+ if (token && session.user) {
+ session.user.id = token.id;
+ session.user.name = token.name;
+ session.user.email = token.email;
+ session.user.image = token.picture;
+ session.user.role = token.role;
+ }
+ return session;
+ },
+ },
+};
+```
+
+### Update the Next AUTH Types for token and session
+
+```ts filename="next-auth.d.ts" copy
+import NextAuth from "next-auth";
+import { UserRole } from "@prisma/client";
+import type { User } from "next-auth";
+import "next-auth/jwt";
+type UserId = string;
+
+declare module "next-auth/jwt" {
+ interface JWT {
+ id: UserId;
+ role: UserRole;
+ }
+}
+
+declare module "next-auth" {
+ /**
+ * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+ */
+ interface Session {
+ user: User & {
+ id: UserId;
+ role: UserRole;
+ };
+ }
+}
+```
+
+### Create the Login Form
+
+```ts copy
+"use client";
+import Link from "next/link";
+import TextInput from "../FormInputs/TextInput";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { LoginInputProps } from "@/types/types";
+import SubmitButton from "../FormInputs/SubmitButton";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { Alert } from "flowbite-react";
+import { HiInformationCircle } from "react-icons/hi";
+export default function LoginForm() {
+ const [isLoading, setIsLoading] = useState(false);
+ const [showNotification, setShowNotification] = useState(false);
+ const router = useRouter();
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useForm();
+ async function onSubmit(data: LoginInputProps) {
+ try {
+ setIsLoading(true);
+ console.log("Attempting to sign in with credentials:", data);
+ const loginData = await signIn("credentials", {
+ ...data,
+ redirect: false,
+ });
+ console.log("SignIn response:", loginData);
+ if (loginData?.error) {
+ setIsLoading(false);
+ toast.error("Sign-in error: Check your credentials");
+ setShowNotification(true);
+ } else {
+ // Sign-in was successful
+ setShowNotification(false);
+ reset();
+ setIsLoading(false);
+ toast.success("Login Successful");
+ router.push("/dashboard");
+ }
+ } catch (error) {
+ setIsLoading(false);
+ console.error("Network Error:", error);
+ toast.error("Its seems something is wrong with your Network");
+ }
+ }
+ return (
+
+
+
+
+ Sign in to your account
+
+
+
+
+
+
+
+ Don't have Account?{" "}
+
+
+
+
+
{category.title}
+
+
+
+
+ {products.map((product, i) => {
+ return
+ );
+}
+```
+
+## Here is the Product Component
+
+```js copy
+"use client";
+import { addToCart } from "@/redux/slices/cartSlice";
+import { BaggageClaim } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import toast from "react-hot-toast";
+import { useDispatch } from "react-redux";
+
+export default function Product({ product }) {
+ const dispatch = useDispatch();
+ function handleAddToCart() {
+ // Dispatch the reducer
+ dispatch(addToCart(product));
+ toast.success("Item added Successfully");
+ }
+ return (
+
+
+
+
+
+
+
+ {product.title}
+
+
+
+
UGX {product.salePrice}
+
handleAddToCart()}
+ className="flex items-center space-x-2 bg-lime-600 px-4 py-2 rounded-md text-white"
+ >
+ Add
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+ Search{" "}
+
+
+
+
+
+
+
+
+
+ {" "}
+ 2{" "}
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+ {user?.name}
+
+ {user.email}
+
+
+
Dashboard
+
Settings
+
Earnings
+
+
Sign out
+
+
+
+
+ );
+}
+```
+
+## Sidebar Component
+
+```ts copy
+import { BarChart, Folder, Grid2X2, Home, Settings } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import LogoutButton from "./LogoutButton";
+import { getCategories } from "@/actions/categories";
+
+export default async function Sidebar() {
+ const categories = (await getCategories()) || [];
+ return (
+
+
+
+
+
+
+
+ Analytics
+
+
+
+
+
+
+
+
+
+
+
+
+
+ If a page has a layout file, the put the code in the layout file
+
+
+```ts copy
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+ title: "Beautiful Charts",
+ description:
+ "Built using Recharts. Copy and paste into your apps. Open Source.",
+};
+```
+
+## Extended Metadata from Layout to Single Pages
+
+## Dynamic Pages SEO - Generate metadata
+
+If in your app you have some bit of data fetching from a server or db, then you can generate the metadata dynamically. You can use `generateMetadata` function to fetch metadata that requires dynamic values.
+
+Fetch the Metadata dynamically as shown below.
+
+```ts copy
+//app/products/[slug]
+export async function generateMetadata({ params: { slug } }) {
+ //Fetch all the products, then find a single product
+ const products = await getProducts();
+ const product = products.find((product) => product.slug == slug);
+ return {
+ title: product?.title,
+ description: product?.seoDescription,
+ alternates: {
+ canonical: `/products/${product?.slug}`,
+ },
+ openGraph: {
+ title: product.title,
+ description: product.description,
+ images: [product.thumbnail],
+ },
+ };
+}
+```
+
+### Generating Static Params
+
+The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.
+
+```ts copy
+export async function generateStaticParams() {
+ const posts = await fetch("https://.../posts").then((res) => res.json());
+
+ return posts.map((post) => ({
+ slug: post.slug,
+ }));
+}
+```
+
+## OpenGraph-image and twitter-image
+
+The `opengraph-image` and `twitter-image` file conventions allow you to set Open Graph and Twitter images for a route segment.
+
+- They are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site.
+- The recommended Image Size is `1200 x 630px `
+- Use an image file to set a route segment's shared image by placing an opengraph-image or twitter-image image file in the segment.
+- You can set different images for different page groups but for simplicity add your images to `/app` directory to set them to be used throught out the entire site
+- To create these images you can use [**canva.com**](https://canva.com/) or any other photo editing software
+- Inother words create 4 files og imageConfigDefault, twitter image , og alt text and twitter image alt text and place them in the app directory
+
+They are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site.
+
+### [**`opengraph-image`**](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#opengraph-image)
+
+Add an `opengraph-image.(jpg|jpeg|png|gif)` image file to any route segment.
+
+### [**`twitter-image`**](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#twitter-image)
+
+Add a `twitter-image.(jpg|jpeg|png|gif)` image file to any route segment.
+
+### [**`opengraph-image.alt.txt`**](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#opengraph-imagealttxt)
+
+Add an accompanying `opengraph-image.alt.txt` file in the same route segment as the `opengraph-image.(jpg|jpeg|png|gif)` image it's alt text.
+
+### [**`twitter-image.alt.txt`**](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#twitter-imagealttxt)
+
+Add an accompanying `twitter-image.alt.txt` file in the same route segment as the `twitter-image.(jpg|jpeg|png|gif)` image it's alt text.
+
+## Check your social media share previews
+
+You can check your social previews using online tools and here are some
+
+- [socialsharepreview.com](https://socialsharepreview.com/)
+- [opengraph.xyz](https://www.opengraph.xyz//)
+- [Add extension](https://chromewebstore.google.com/detail/social-share-preview/ggnikicjfklimmffbkhknndafpdlabib)
+
+- For apps on Localhost you can use [**docs.srv.us**](https://docs.srv.us/) to generate a link you can use online temperalliy or Just use an extension like[Seo meta in 1 click](https://chromewebstore.google.com/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc)
+
+## Other SEO Quick Tips
+
+- **Use Next/Font** - Make sure in your layout your usung font loaded from "next/font"
+ avoid using the google font links used in css. This will ensure that the loaded and hosted locally on our website
+
+- **Use Next Image** - Using Next Image Optimises all your images, such as loading different Image Variations for different Screen sizes
+
+- **Use Next Link** - To Cache all the Pages
+
+## Sitemap
+
+A sitemap is a file that lists all of the pages on your website, along with their corresponding URLs and other relevant information. Sitemaps are used by search engines to crawl and index your website more efficiently.
+
+Sitemaps are useful for SEO in a number of ways:
+
+- They help search engines discover all of the pages on your website.This is important because search engines need to be able to index all of your pages in order to rank them in search results pages.
+- They provide search engines with information about the structure of your website.This information can help search engines to understand the relationships between your pages and to rank them more accurately.
+- They can help search engines to prioritize crawling and indexing your most important pages. This can help your most important pages to rank higher in search results pages.
+
+### Generate Static Sitemap
+
+Add a `sitemap.js` or `sitemap.ts` file that returns Sitemap.
+
+```ts copy
+//app/sitemap.ts
+export default function sitemap() {
+ return [
+ {
+ url: "https://acme.com",
+ lastModified: new Date(),
+ changeFrequency: "yearly",
+ priority: 1,
+ },
+ {
+ url: "https://acme.com/about",
+ lastModified: new Date(),
+ changeFrequency: "monthly",
+ priority: 0.8,
+ },
+ {
+ url: "https://acme.com/blog",
+ lastModified: new Date(),
+ changeFrequency: "weekly",
+ priority: 0.5,
+ },
+ ];
+}
+```
+
+### Generate Dynamic Sitemap
+
+If your fetching data in your application, then you need to generate your sitemap dynamically. so modify your sitemap.js
+
+```ts copy
+//app/sitemap.js
+import getCategories from "./libs/getCategories";
+import getProducts from "./libs/getProducts";
+
+export default async function sitemap() {
+ const baseUrl = "https://lighthousefurniture.com";
+
+ const products = await getProducts();
+ const categories = await getCategories();
+ const productUrls = products.map((product) => {
+ return {
+ url: `${baseUrl}/products/${product.slug}`,
+ lastModified: new Date(),
+ };
+ });
+ const categoryUrls = categories.map((category) => {
+ return {
+ url: `${baseUrl}/categories/${category.slug}`,
+ lastModified: new Date(),
+ };
+ });
+
+ return [
+ {
+ url: baseUrl,
+ lastModified: new Date(),
+ },
+ {
+ url: `${baseUrl}/about`,
+ lastModified: new Date(),
+ },
+ {
+ url: `${baseUrl}/contact`,
+ lastModified: new Date(),
+ },
+ ...productUrls,
+ ...categoryUrls,
+ ];
+}
+```
+
+## Generate Static Robots.txt
+
+A robots.txt file is a text file that tells search engine crawlers which pages on your website they are allowed to crawl and index. Robots.txt files are important for SEO because they can help you to control how your website is indexed and ranked by search engines.
+
+Here are some of the benefits of using a robots.txt file:
+
+- You can prevent search engines from crawling and indexing pages that are not ready for public viewing.This can be useful for pages that are still under construction or that contain sensitive information.
+- A robots.txt file can be used to give search engines the exact location of your sitemap. This can help search engines to find your sitemap more easily and to crawl and index your website more efficiently.
+
+```tsx copy
+export default function robots() {
+ const baseUrl = "https://lighthousefurniture.com";
+ return {
+ rules: {
+ userAgent: "*",
+ allow: ["/", "/product", "/category"],
+ disallow: [],
+ },
+ sitemap: `${baseUrl}/sitemap.xml`,
+ };
+}
+```
+
+## Google My Business
+
+- Google My Business helps your Business rank Locally and here is a full **Guide** from **Mailchimp**, that i found usefull 👉 [here](https://mailchimp.com/marketing-glossary/google-my-business/#The_advantages_of_Google_My_Business)
+
+### How to set up your account
+
+If you’ve already got a Google My Business account set up, skip ahead to the optimization section. If you haven’t, here’s how to claim your location in Google business listing. Please note that Google occasionally makes updates, so some of the wording may be a little different. Just follow these easy steps:
+
+- Go to [google.com/business](https://google.com/business).
+- Click “Manage now.”
+- Enter your business name and click “Next.”
+- Enter your address. If you’re a service area business and don’t have a physical store but deliver services (such as a plumber or electrician), click the “I deliver goods and services to my customers” and “Hide my address” checkboxes.
+- Choose your primary business category. It’s important to pick the most accurate category that describes what you do.
+- Add your phone number.
+- Add your website URL
+
+## Google Search Console
+
+- Google Search Console (GSC) is a free tool that helps you monitor your site’s search performance and technical SEO healthand here is a full **Guide** from **Semrush**, that i found usefull 👉 [here](https://www.semrush.com/blog/google-search-console/)
diff --git a/pages/programming-tutorials/nextjs/next-state.mdx b/pages/programming-tutorials/nextjs/next-state.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/programming-tutorials/nextjs/next-typescript.mdx b/pages/programming-tutorials/nextjs/next-typescript.mdx
new file mode 100644
index 00000000..dbafa710
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/next-typescript.mdx
@@ -0,0 +1,1356 @@
+import { Callout } from "nextra/components";
+
+# TypeScript in Next.js: A Comprehensive Guide for Beginners
+
+This serves as a guide for Next.js developers interested in incorporating TypeScript into their projects. We'll explore key concepts, installation steps, and code examples to illustrate their practical application.
+
+## What is TypeScript?
+
+TypeScript is a superset of JavaScript that adds optional static typing. This means you can define data types for variables, functions, and other constructs, improving code clarity, maintainability, and catching errors early.
+
+## Benefits of TypeScript in Next.js:
+
+- Catch errors early: Identify potential issues during development, preventing runtime bugs.
+- Improved code navigation: IDEs leverage types for better autocompletion, refactoring, and code understanding.
+- Larger projects, better structure: Enforces SOLID principles and promotes maintainability in complex applications.
+- Better documentation: Types serve as documentation directly within code, aiding team collaboration.
+
+## Why use TypeScript in Next.js in 2024?
+
+- Growing popularity: TypeScript adoption is skyrocketing across JavaScript frameworks, including Next.js.
+- Enhanced Next.js development: Next.js offers built-in support and type definitions for its features.
+- Future-proof development: Static typing aligns with modern development trends and best practices.
+
+## Installing TypeScript in a Next.js Project
+
+- Next.js provides a TypeScript-first development experience for building your React application.
+- It comes with built-in TypeScript support for automatically installing the necessary packages and configuring the proper settings.
+
+ Next.js now ships with TypeScript, ESLint, and Tailwind CSS configuration by
+ default. - You can optionally use a src directory in the root of your
+ project to separate your application's code from configuration files.
+
+
+I recommend starting a new Next.js app using `create-next-app`, which sets up everything automatically for you. To create a project, run:
+
+```js filename=">_ Terminal" copy
+ npx create-next-app@latest
+```
+
+On installation, you'll see the following prompts:
+
+```js filename=">_ Terminal" lineNumbers
+ What is your project named? my-app
+ Would you like to use TypeScript? No / Yes
+ Would you like to use ESLint? No / Yes
+ Would you like to use Tailwind CSS? No / Yes
+ Would you like to use `src/` directory? No / Yes
+ Would you like to use App Router? (recommended) No / Yes
+```
+
+### TypeScript Inference Explained
+
+TypeScript, as a superset of JavaScript, offers optional static typing. This means it can automatically deduce the type of variables, functions, and other constructs based on their usage, a process known as TypeScript inference. While you can explicitly define types through annotations, inference helps make your code more concise and readable.
+
+Here's a breakdown of key points about TypeScript inference:
+
+### What can be inferred?
+
+- **Variable initialization:** When assigning a value to a variable, TypeScript infers its type based on the value's type, e.g., `let age = 30; // age is inferred as number.`
+- **Default parameter values:** The type of a function parameter with a default value is inferred based on the value's type.
+- **Function return types:** If a function doesn't have an explicit return type annotation, TypeScript attempts to infer it based on the return statements within the function.
+- **Arrays and objects:** The inferred type of arrays and objects reflects the types of their elements and properties.
+
+**Example:**
+
+```typescript copy
+let name = "John"; // Inferred type: string
+const age = 30; // Inferred type: number
+function double(num: number): number {
+ // Inferred return type: number
+ return num * 2;
+}
+const numbers = [1, 2, 3]; // Inferred type: number[]
+const person = { name: "Jane", age: 25 }; // Inferred type: { name: string, age: number }
+```
+
+### Benefits of inference:
+
+- Reduced boilerplate: Saves time and effort by avoiding unnecessary type annotations.
+- Improved readability: Cleaner code, focusing on logic rather than verbose type details.
+- Automatic error detection: Catches type mismatches early, improving code quality.
+
+### Limitations of inference:
+
+- Not always perfect: In complex scenarios, TypeScript might not infer the correct type, requiring manual annotations.
+- Reduced flexibility: Over-reliance on inference can limit code flexibility and maintainability.
+
+### Best practices:
+
+- Use inference effectively while understanding its limitations.
+- Annotate types in complex scenarios for clarity and accuracy.
+- Balance conciseness with readability and maintainability.
+
+## Typescript Basic Types
+
+### Boolean
+
+- Represents truth values: true or false.
+ -Used for conditional checks, flags, and logical operations.
+
+```js copy
+let isDone: boolean = false;
+let isLoggedIn: boolean = true;
+let showError: boolean = false;
+```
+
+### Numbers
+
+Represents numeric values, including integers and floating-point numbers.
+Used for calculations, measurements, and numerical operations.
+
+```ts copy
+let age: number = 30;
+let temperature: number = 25.5;
+```
+
+### Strings
+
+- Represents sequences of text characters.
+- Used for user input, display text, and string manipulation.
+
+```ts copy
+let name: string = "John Doe";
+let message: string = "Hello, world!";
+```
+
+### Arrays:
+
+- Represent an ordered collection of elements of the same or compatible types.
+ -Defined using square brackets [] with the element type inside.
+
+```ts copy
+// Array of numbers
+let numbers: number[] = [1, 2, 3];
+// Error: Type 'string' is not assignable to type 'number'
+numbers.push("hello"); // Compiler error
+// Array of strings
+let names: string[] = ["Alice", "Bob", "Charlie"];
+```
+
+### Tuples
+
+- Fixed-length arrays with specific element types at each position.
+- Type annotation: [type1, type2, ...]
+
+```ts copy
+// Correct usage
+let person: [string, number] = ["John", 30];
+// Error: Type 'number' is not assignable to type 'string'
+person = [25, "Doe"]; // Compiler error
+```
+
+### Functions
+
+- Defined using the function keyword, specifying input and output types.
+- Type annotation: (parameters: types) => returnType
+
+```ts copy
+function add(x: number, y: number): number {
+ return x + y;
+}
+
+// Error: Argument of type 'string' is not assignable to parameter of type 'number'
+add("5", 10); // Compiler error
+```
+
+### Void
+
+- Represents the absence of a value, often used for functions that don't return anything.
+- Type annotation: void
+
+```ts copy
+function logMessage(message: string): void {
+ console.log(message);
+}
+```
+
+### Enum
+
+- An enum is a special "class" that represents a group of constants (unchangeable variables).
+- Enums come in two flavors string and numeric. Lets start with numeric.
+ **Numeric Enums - Default**
+ By default, enums will initialize the first value to 0 and add 1 to each additional value:
+
+```ts copy
+enum CardinalDirections {
+ North,
+ East,
+ South,
+ West,
+}
+let currentDirection = CardinalDirections.North;
+// logs 0
+console.log(currentDirection);
+// throws error as 'North' is not a valid enum
+currentDirection = "North"; // Error: "North" is not assignable to type 'CardinalDirections'.
+```
+
+**Numeric Enums - Initialized**
+You can set the value of the first numeric enum and have it auto increment from that:
+
+```ts copy
+enum CardinalDirections {
+ North = 1,
+ East,
+ South,
+ West,
+}
+// logs 1
+console.log(CardinalDirections.North);
+// logs 4
+console.log(CardinalDirections.West);
+```
+
+**Numeric Enums - Fully Initialized**
+You can assign unique number values for each enum value. Then the values will not incremented automatically:
+
+```ts copy
+enum StatusCodes {
+ NotFound = 404,
+ Success = 200,
+ Accepted = 202,
+ BadRequest = 400,
+}
+// logs 404
+console.log(StatusCodes.NotFound);
+// logs 200
+console.log(StatusCodes.Success);
+```
+
+**String Enums**
+Enums can also contain strings. This is more common than numeric enums, because of their readability and intent.
+
+```ts copy
+enum CardinalDirections {
+ North = "North",
+ East = "East",
+ South = "South",
+ West = "West",
+}
+// logs "North"
+console.log(CardinalDirections.North);
+// logs "West"
+console.log(CardinalDirections.West);
+```
+
+### Object Type:
+
+- Represents a collection of key-value pairs, where keys are strings and values can be of any type.
+- Used to model complex data structures and real-world entities.
+
+```ts copy
+const car: { type: string; model: string; year: number } = {
+ type: "Toyota",
+ model: "Corolla",
+ year: 2009,
+};
+```
+
+**Type Inference**
+TypeScript can infer the types of properties based on their values.
+
+```ts copy
+const car = {
+ type: "Toyota",
+};
+car.type = "Ford"; // no error
+car.type = 2; // Error: Type 'number' is not assignable to type 'string'.
+```
+
+**Optional Properties**
+Optional properties are properties that don't have to be defined in the object definition.
+Example without optional properties
+
+```ts copy
+const car: { type: string; mileage: number } = {
+ // Error: Property 'mileage' is missing in type '{ type: string; }' but required in type '{ type: string; mileage: number; }'.
+ type: "Toyota",
+};
+car.mileage = 2000;
+```
+
+Example with Optional properties
+
+```ts copy
+const car: { type: string; mileage?: number } = {
+ // no error
+ type: "Toyota",
+};
+car.mileage = 2000;
+```
+
+### The 'Any' Type
+
+- TypeScript defaults to the any type if no type is specified, allowing any value. This basically means writing in normal javascript
+- The any type in TypeScript is a workaround for cases when you don't know what type a value might be. It allows you to assign a variable or function parameter to be of literally any type.
+- This can lead to runtime errors and reduced type safety.
+
+```js copy
+function greet(name: any) {
+ console.log(`Hello, ${name}!`);
+}
+greet("John"); // Outputs: Hello, John!
+greet(123); // Outputs: Hello, 123!
+```
+
+any lets you do extremely dangerous things in TypeScript. By marking a variable as any
+
+```js copy
+const user: any = {
+ name: "John",
+ age: 30,
+};
+
+user.roles.push("admin"); // Runtime error!
+```
+
+In the example above, we're trying to push a new value to the roles array, but the roles property doesn't exist on the user object. This will cause a runtime error, but TypeScript won't warn us about it because we've marked the user variable as any.
+
+### Any VS Unknown
+
+The unknown type is a type-safe counterpart of any, which requires you to perform a type check before using the variable. Unlike any, unknown can help prevent runtime errors by forcing you to narrow down the type of the variable before using it in your code.
+
+Here's an example of using unknown in a function argument:
+
+```js copy
+function greet(name: unknown) {
+ if (typeof name === "string") {
+ console.log(`Hello, ${name}!`);
+ }
+}
+
+greet("John"); // Outputs: Hello, John!
+greet(123); // No output
+```
+
+Overall, the any type can be useful in situations where you need more flexibility, but it comes with the cost of losing type safety. It's best to use it sparingly and with caution.
+
+### TypeScript Union Types
+
+- Union types are used when a value can be more than a single type.
+- Allow a variable to hold values of different types.
+- Type annotation: type1 | type2 | ...
+- Such as when a property would be string or number.
+ **Union | (OR)**
+- Using the | we are saying our parameter is a string or number:
+
+```ts copy
+let value: string | number = "hello";
+
+// Error: Object is of type 'object', not assignable to 'string | number'
+value = {}; // Compiler error
+
+function printStatusCode(code: string | number) {
+ console.log(`My status code is ${code}.`);
+}
+printStatusCode(404);
+printStatusCode("404");
+```
+
+### Type aliases
+
+A type alias is a name for any type, you can actually use a type alias to give a name to any type at all, not just an object type.
+
+```ts copy
+// primitive
+type SanitizedString = string;
+// Type alias for a string with maximum length of 10
+type Email = string & { length: 10 };
+
+// Union type for numbers or strings
+type ID = number | string;
+
+// tuple
+type Data = [number, string];
+
+// function
+type SetPoint = (x: number, y: number) => void;
+
+// object
+type User = {
+ id: number;
+ name: string;
+ isVerified?: boolean;
+ handler: () => void;
+};
+```
+
+### Interfaces
+
+- Interfaces are similar to type aliases, except they only apply to object types.
+- An interface may only be used to declare the shapes of objects, not rename primitives. Being concerned only with the structure and capabilities of types is why we call TypeScript a structurally typed type system.
+
+```ts copy
+interface Rectangle {
+ height: number;
+ width: number;
+}
+
+const rectangle: Rectangle = {
+ height: 20,
+ width: 10,
+};
+```
+
+**Extending Interfaces**
+
+- Interfaces can extend each other's definition.
+- Extending an interface means you are creating a new interface with the same properties as the original, plus something new.
+
+```ts copy
+interface Rectangle {
+ height: number;
+ width: number;
+}
+
+interface ColoredRectangle extends Rectangle {
+ color: string;
+}
+
+const coloredRectangle: ColoredRectangle = {
+ height: 20,
+ width: 10,
+ color: "red",
+};
+```
+
+#### Type vs Interface: Which Should You Use?
+
+**Differences Between Type Aliases and Interfaces**
+Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.
+**Extending an interface**
+
+```ts copy
+interface Animal {
+ name: string;
+}
+
+interface Bear extends Animal {
+ honey: boolean;
+}
+
+const bear = getBear();
+bear.name;
+bear.honey;
+```
+
+**Extending a type via intersections**
+
+```ts copy
+type Animal = {
+ name: string;
+};
+
+type Bear = Animal & {
+ honey: boolean;
+};
+
+const bear = getBear();
+bear.name;
+bear.honey;
+```
+
+For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. Use Interface until You Need Type. (From typescript team)
+
+Here's a helpful rule of thumb:
+
+- Always use interface for public API's definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing.
+
+- Consider using type for your React Component Props and State, for consistency and because it is more constrained.
+
+- Interfaces can't express unions, mapped types, or conditional types. Type aliases can express any type.
+- Interfaces can use extends, types can't.
+- When you're working with objects that inherit from each other, use interfaces. extends makes TypeScript's type checker run slightly faster than using &.
+
+### TypeScript Casting
+
+- There are times when working with types where it's necessary to override the type of a variable, such as when incorrect types are provided by a library.
+- Casting is the process of overriding a type.
+
+**Casting with as**
+A straightforward way to cast a variable is using the as keyword, which will directly change the type of the given variable.
+
+```ts copy
+let x: unknown = "hello";
+console.log((x as string).length);
+```
+
+Casting doesn't actually change the type of the data within the variable, for example the following code will not work as expected since the variable x is still holds a number.
+
+```ts copy
+let x: unknown = 4;
+console.log((x as string).length); // prints undefined since numbers don't have a length
+```
+
+TypeScript will still attempt to typecheck casts to prevent casts that don't seem correct, for example the following will throw a type error since TypeScript knows casting a string to a number doesn't makes sense without converting the data:
+
+```ts copy
+console.log((4 as string).length); // Error: Conversion of type 'number' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+```
+
+### TypeScript Type Guards
+
+Type guards are special checks you can perform on a variable to narrow down its possible types within a specific block of code. Think of them like filters that refine your understanding of a variable's type based on some condition. This allows you to access properties and methods that wouldn't be available on the wider, less specific type.
+**Built-in type guards:**
+typeof operator: Checks the type of a variable against basic types like string, number, etc. `(typeof x === "string")`.
+instanceof operator: Checks if an object belongs to a specific class `(object instanceof MyClass)`.
+in operator: Checks if a property exists on an object `("name" in object)`.
+
+```ts copy
+type alphanumeric = string | number;
+
+function add(a: alphanumeric, b: alphanumeric) {
+ if (typeof a === "number" && typeof b === "number") {
+ return a + b;
+ }
+
+ if (typeof a === "string" && typeof b === "string") {
+ return a.concat(b);
+ }
+
+ throw new Error(
+ "Invalid arguments. Both arguments must be either numbers or strings."
+ );
+}
+```
+
+### TypeScript Generics – Use Case and Examples
+
+To understand What TypeScript Generics are lets look at the Use cases
+**Use Case for Generics**
+Let's start with a simple example, where you want to print the value of an argument passed:
+
+```ts copy
+function printData(data: number) {
+ console.log("data: ", data);
+}
+
+printData(2);
+```
+
+Now, let's suppose you want to make printData a more generic function, where you can pass any type of argument to it like: number/ string/ boolean. So, you might think to follow an approach like below:
+
+```ts copy
+function printData(data: number | string | boolean) {
+ console.log("data: ", data);
+}
+
+printData(2);
+printData("hello");
+printData(true);
+```
+
+But in the future, you might want to print an array of numbers using the same function. In that case the types will increase and it will become cumbersome to maintain all those different types.
+
+This is when Generics come into the picture.
+
+#### How Generics Work in TS
+
+Generics are like variables – to be precise, type variables – that store the type (for example number, string, boolean) as a value.
+
+So, you can solve the problem we discussed above with generics as shown below:
+
+```ts copy
+function printData(data: T) {
+ console.log("data: ", data);
+}
+
+printData(2);
+printData("hello");
+printData(true);
+```
+
+In the above example printData-generics.ts, there is a slight difference in syntax:
+
+You use a type variable inside angular brackets after the function name ``
+You then assign the type variable to the parameter data: T
+Let's explore these differences a bit more.
+
+To use generics, you need to use angular brackets and then specify a type variable inside them. Developers generally use T, X and Y. But it can be anything depending upon your preference.
+
+You can then assign the same variable name as the type to the parameter of the function.
+
+Now, whatever argument you pass to the function, it gets inferred and there's no need to hardcode the type anywhere.
+
+Even if you pass an array of numbers or an object to the printData function, everything will be displayed properly without TS complaining:
+
+```ts copy
+function printData(data: T) {
+ console.log("data: ", data);
+}
+
+printData(2);
+printData("hello");
+printData(true);
+printData([1, 2, 3, 4, 5, 6]);
+printData([1, 2, 3, "hi"]);
+printData({ name: "Ram", rollNo: 1 });
+```
+
+Let's see another example:
+
+```ts copy
+function printData(data1: X, data2: Y) {
+ console.log("Output is: ", data1, data2);
+}
+
+printData("Hello", "World");
+printData(123, ["Hi", 123]);
+```
+
+In above example, we passed 2 arguments to printData and used X and Y to denote the types for both the parameters. X refers to 1st value of the argument and Y refers to 2nd value of the argument.
+
+Here as well, the types of data1 and data2 are not specified explicitly because TypeScript handles the type inference with the help of generics.
+
+#### How to Use Generics with Interfaces
+
+You can even use generics with interfaces. Let's see how that works with the help of a code snippet:
+
+```ts copy
+interface UserData {
+ name: X;
+ rollNo: Y;
+}
+
+const user: UserData = {
+ name: "Ram",
+ rollNo: 1,
+};
+```
+
+In above snippet, `` are passed to the interface UserData. In this way, UserData becomes a reusable interface in which any data type can be assigned depending upon the use case.
+
+Here in this example, name and rollNo will always be string and number, respectively. But this example was to showcase how you can use generics with interfaces in TS.
+
+## Typescript in Next JS and React
+
+### TypeScript with React Components props
+
+Every file containing JSX must use the .tsx file extension. This is a TypeScript-specific extension that tells TypeScript that this file contains JSX.
+
+Writing TypeScript with React is very similar to writing JavaScript with React. The key difference when working with a component is that you can provide types for your component’s props. These types can be used for correctness checking and providing inline documentation in editors.
+
+```ts copy
+function MyButton({ title }: { title: string }) {
+ return {title} ;
+}
+
+export default function MyApp() {
+ return (
+
+
Welcome to my app
+
+
{title}
+
{price}
+
{rating}
+
+ {children}
+
+ );
+};
+
+export default FormCardWrapper;
+
+import React from 'react';
+import FormCardWrapper from './FormCardWrapper';
+
+const MyForm: React.FC = () => {
+ return (
+
+
+
+ );
+};
+
+export default MyForm;
+
+```
+
+### Alternative ways to Annotate props types
+
+```ts copy
+import { FC } from "react";
+
+type Shape = {
+ name: string;
+ age: number;
+};
+
+const User: FC = ({ name, age }) => {
+ return (
+
+ );
+};
+
+export default User;
+```
+
+#### Types for Dynamic Routes
+
+For example, a blog could include the following route app/blog/`[slug]/page.js where [slug] `is the Dynamic Segment for blog posts.
+
+```ts app/blog/[slug]/page.tsx copy
+export default function Page({
+ params: { slug },
+}: {
+ params: { slug: string };
+}) {
+ return My Post: {slug}
;
+}
+///Alternatively
+type Shape = {
+ params: { id: number };
+};
+export default function User({ params: { id } }: Shape) {
+ return User id: {id}
;
+}
+```
+
+#### Re-Usable Types
+
+Using types to reuse types
+
+```ts copy
+type User = {
+ id: string;
+ username: string;
+ email: string;
+ password: string;
+};
+
+type Admin = User & {
+ isAdmin: boolean;
+};
+
+type ServiceProvider = User & {
+ serviceType: string;
+};
+```
+
+Using Interfaces to reuse types
+
+```ts ccopy
+type User = {
+ id: string;
+ username: string;
+ email: string;
+ password: string;
+};
+
+interface Admin extends User {
+ isAdmin: boolean;
+}
+
+interface ServiceProvider extends User {
+ serviceType: string;
+}
+```
+
+### React Hooks
+
+The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get inferred types a lot of the time and ideally do not need to handle the minutiae of providing the types.
+
+However, we can look at a few examples of how to provide types for Hooks.
+
+#### useState
+
+The useState Hook will re-use the value passed in as the initial state to determine what the type of the value should be. For example:
+
+```ts copy
+// Infer the type as "boolean"
+const [enabled, setEnabled] = useState(false);
+```
+
+Will assign the type of boolean to enabled, and setEnabled will be a function accepting either a boolean argument, or a function that returns a boolean. If you want to explicitly provide a type for the state, you can do so by providing a type argument to the useState call:
+
+```ts copy
+// Explicitly set the type to "boolean"
+const [enabled, setEnabled] = useState(false);
+```
+
+This is not very useful in this case, but a common case where you may want to provide a type is when you have a union type. For example, status here can be one of a few different strings:
+
+```ts copy
+type Status = "idle" | "loading" | "success" | "error";
+
+const [status, setStatus] = useState("idle");
+```
+
+Also in many cases hooks are initialized with null-ish default values, and you may wonder how to provide types. Explicitly declare the type, and use a union type:
+
+```ts copy
+const [user, setUser] = useState(null);
+
+// later...
+setUser(newUser);
+```
+
+### Refs and Events Types
+
+```ts copy
+import React, { useRef, useState } from "react";
+
+// Define User type
+type User = {
+ name: string;
+ email: string;
+ password: string;
+};
+
+const FormExample = () => {
+ // State to store submitted data
+ const [submittedData, setSubmittedData] = useState(null);
+
+ // Refs for form fields
+ const nameRef = useRef(null);
+ const emailRef = useRef(null);
+ const passwordRef = useRef(null);
+
+ // Function to handle form submission
+ const handleSubmit = (event: FormEvent) => {
+ event.preventDefault(); // Prevent default form submission behavior
+
+ // Get form field values using refs
+ const name = nameRef.current!.value;
+ // const name = nameRef.current?.value || "";
+ const email = emailRef.current?.value || "";
+ const password = passwordRef.current?.value || "";
+
+ // Create user object
+ const newUser: User = { name, email, password };
+
+ // Push user object into an array (For demonstration, you might use state or other state management tools)
+ const users: User[] = [];
+ users.push(newUser);
+
+ // Update submitted data state
+ setSubmittedData(newUser);
+ };
+
+ return (
+
+
Registration Form
+
+
+ {/* Display submitted data */}
+ {submittedData && (
+
+
Submitted Data:
+
Name: {submittedData.name}
+
Email: {submittedData.email}
+
Password: {submittedData.password}
+
+ )}
+
= ({
+ elementType,
+ children,
+ className,
+ onClick,
+}) => {
+ // Type assertion to ensure elementType is a valid JSX intrinsic element
+ const Element = elementType as keyof JSX.IntrinsicElements;
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default ElementWrapper;
+```
+
+In this component:
+
+ElementWrapper is a functional component that accepts props of type ElementWrapperProps.
+elementType prop accepts a union type `('div' | 'h1' | 'button' | 'section')` representing valid HTML elements.
+children prop represents the content inside the element.
+className prop is optional and represents the CSS class for styling.
+onClick prop is optional and represents the click event handler.
+Inside the component, Element is declared using type assertion `(as keyof JSX.IntrinsicElements)` to ensure elementType is a valid JSX intrinsic element.
+We use Element to render the appropriate JSX element with provided props.
+Here's how you can use the ElementWrapper component:
+
+```ts copy
+// import React from "react";
+// import ElementWrapper from "./ElementWrapper";
+
+// const App = () => {
+// return (
+//
+// {/* Example usage of ElementWrapper */}
+//
console.log("Button clicked")}
+// >
+// Click me
+//
+//
+// Hello, World!
+//
+//
+// This is a paragraph inside a div.
+//
+//
+// Section Title
+// This is a paragraph inside a section.
+//
+//
= ({
+ variant = "default",
+ href,
+ icon,
+ onClick,
+ className = "",
+ children,
+}) => {
+ let baseClassName =
+ "inline-flex items-center justify-center border font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2";
+ let styleClassName = "";
+
+ switch (variant) {
+ case "primary":
+ styleClassName =
+ "bg-blue-600 text-white border-transparent hover:bg-blue-700";
+ break;
+ case "secondary":
+ styleClassName =
+ "bg-gray-300 text-gray-700 border-gray-300 hover:bg-gray-400";
+ break;
+ case "linkButton":
+ styleClassName = "text-blue-600 border-transparent hover:text-blue-700";
+ break;
+ default:
+ styleClassName =
+ "bg-white text-gray-700 border-gray-300 hover:bg-gray-100";
+ }
+
+ const combinedClassName = `${baseClassName} ${styleClassName} ${className}`;
+
+ return (
+ <>
+ {href ? (
+
+ {icon && {icon} }
+ {children}
+
+ ) : (
+
+ {icon && {icon} }
+ {children}
+
+ )}
+
+ );
+};
+
+export default Button;
+```
+
+In this component:
+
+We define a Button component that accepts props such as variant, href, icon, and onClick.
+The variant prop is optional and can be one of 'default', 'primary', 'secondary', or 'linkButton'.
+Based on the variant provided, we add Tailwind CSS classes to style the button accordingly.
+If href is provided `(applicable only for the 'linkButton' variant)`, we render an `` tag; otherwise, we render a `` tag.
+The button can have an optional icon which will be rendered before the button text.
+The onClick prop allows passing a click event handler.
+You can use this Button component as follows:
+
+```ts copy
+import React from "react";
+import Button from "./Button";
+import { HiOutlineMail } from "react-icons/hi"; // Example icon from react-icons library
+
+const App: React.FC = () => {
+ return (
+
+ Default Button
+ Primary Button
+ Secondary Button
+
+ Link Button
+
+
+ Primary Button with Custom Class
+
+
+ );
+};
+
+export default App;
+```
+
+{/* https://www.youtube.com/watch?v=iS1K64X_eXg */}
+{/* https://gemini.google.com/app/6d3d58e6394d2185 */}
+{/* https://chat.openai.com/c/7706348d-38c0-4c9d-89d7-79614b14207c */}
+
+### How to Use Zod and React Hook form
+
+Form validation is a fundamental aspect of building robust web applications. It ensures that the data submitted by users conforms to the expected format and business rules.
+
+#### Zod
+
+Zod is a TypeScript-first schema declaration and validation library. It simplifies type definition and data validation in TypeScript by allowing developers to declare validators once, with automatic type deduction. Visit the the Documenntation [here](https://zod.dev/?id=strings)
+
+#### React Hook Form
+
+React Hook Form is a lightweight, high-performance library for managing forms in React applications. It uses React hooks to simplify form logic, providing a fluid and efficient development experience.
+
+It is a very complex task to handle validation. But with the help of React-hook-form and Zod, we can validate form in any real-world application so easily. Here are the steps:
+
+#### Install packages
+
+```ts copy
+npm install react-hook-form @hookform/resolvers zod
+```
+
+#### create a schema using Zod
+
+```ts copy
+//schemas/schema.ts
+import { z } from "zod";
+
+export const signinSchema = z.object({
+ email: z
+ .string({
+ required_error: "Email is required",
+ })
+ .email({
+ message: "Not a valid email",
+ }),
+ password: z
+ .string({
+ required_error: "Password is required",
+ })
+ .min(6, {
+ message: "Password too short - should be 6 chars minimum",
+ }),
+});
+```
+
+#### add useForm hook
+
+```ts copy
+"use client";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+} = useForm({
+ resolver: zodResolver(signinSchema),
+});
+```
+
+#### Give every input a different name
+
+```ts copy
+
+ {" "}
+ *{errors.email?.message}{" "}
+
+ );
+}
+```
+
+#### Some other Common Validations
+
+Its a good practice to create a schema folder in the root
+
+```ts copy
+// src/schemas/schema.ts
+
+import { z } from "zod";
+
+export const formSchema = z.object({});
+```
+
+First and Last Name — We can use `z.string()` do define strings and chain a `.min() `check to apply a minimum length and add a custom error message. You can trim trailing whitespaces with `.trim().`
+
+```ts copy
+export const formSchema = z.object({
+ // ...
+ firstName: z
+ .string()
+ .trim()
+ .min(2, { message: "First name must be more than 1 character" }),
+ lastName: z
+ .string()
+ .trim()
+ .min(2, { message: "Last name must be more than 1 character" }),
+ // ...
+});
+```
+
+Email and Website — Zod has some useful built-in validators for common string patterns.
+
+```ts copy
+export const formSchema = z.object({
+ // ...
+ email: z.string().trim().email(),
+ website: z.string().trim().url(),
+ // ...
+});
+```
+
+Password — Again, another string refinement but with an added test to check if Password and Confirm Password are the same. To compare two fields to one another, we need to run the refinement on the entire schema object. In this case, if the passwords do not match, it might be nice to show the non-matching error as an error that belongs to the Confirm Password field. We can use .`superRefine()` to gain access to the schema context and define highly customized errors.
+
+```ts copy
+export const formSchema = z
+ .object({
+ // ...
+ password: z
+ .string()
+ .refine(
+ (val) =>
+ /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(
+ val
+ ),
+ {
+ message:
+ "Password must be at least 8 characters long and contain at least one uppercase character, one lowercase character, and one special symbol",
+ }
+ ),
+ confirmPassword: z.string(),
+ // ...
+ })
+ .superRefine((val, ctx) => {
+ if (val.password !== val.confirmPassword) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ path: ["confirmPassword"],
+ message: "Passwords do not match",
+ });
+ }
+ });
+```
+
+Visit the the Documenntation [here](https://zod.dev/?id=strings)
+
+### Context API Coming Soon
+
+### useReducer
+
+You can use Discriminated Unions for reducer actions. Don't forget to define the return type of reducer, otherwise TypeScript will infer it.
+
+```ts copy
+import { useReducer } from "react";
+
+const initialState = { count: 0 };
+
+type ACTIONTYPE =
+ | { type: "increment"; payload: number }
+ | { type: "decrement"; payload: string };
+
+function reducer(state: typeof initialState, action: ACTIONTYPE) {
+ switch (action.type) {
+ case "increment":
+ return { count: state.count + action.payload };
+ case "decrement":
+ return { count: state.count - Number(action.payload) };
+ default:
+ throw new Error();
+ }
+}
+
+function Counter() {
+ const [state, dispatch] = useReducer(reducer, initialState);
+ return (
+ <>
+ Count: {state.count}
+ dispatch({ type: "decrement", payload: "5" })}>
+ -
+
+ dispatch({ type: "increment", payload: 5 })}>
+ +
+
+
+ );
+}
+```
+
+### useRef
+
+In TypeScript, useRef returns a reference that is either read-only or mutable, depends on whether your type argument fully covers the initial value or not. Choose one that suits your use case.
+**Option 1: DOM element ref**
+To access a DOM element: provide only the element type as argument, and use null as initial value. In this case, the returned reference will have a read-only .current that is managed by React. TypeScript expects you to give this ref to an element's ref prop:
+
+```ts copy
+function Foo() {
+ // - If possible, prefer as specific as possible. For example, HTMLDivElement
+ // is better than HTMLElement and way better than Element.
+ // - Technical-wise, this returns RefObject
+ const divRef = useRef(null);
+
+ useEffect(() => {
+ // Note that ref.current may be null. This is expected, because you may
+ // conditionally render the ref-ed element, or you may forget to assign it
+ if (!divRef.current) throw Error("divRef is not assigned");
+
+ // Now divRef.current is sure to be HTMLDivElement
+ doSomethingWith(divRef.current);
+ });
+
+ // Give the ref to an element so React can manage it for you
+ return etc
;
+}
+```
+
+If you are sure that divRef.current will never be null, it is also possible to use the non-null assertion operator !:
+
+```ts copy
+const divRef = useRef(null!);
+// Later... No need to check if it is null
+doSomethingWith(divRef.current);
+```
+
+### Useful React Prop Type Examples
+
+Relevant for components that accept other React components as props.
+
+```ts copy
+export declare interface AppProps {
+ children?: React.ReactNode; // best, accepts everything React can render
+ childrenElement: React.JSX.Element; // A single React element
+ style?: React.CSSProperties; // to pass through style props
+ onChange?: React.FormEventHandler; // form events! the generic parameter is the type of event.target
+ // more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
+ props: Props & React.ComponentPropsWithoutRef<"button">; // to impersonate all the props of a button element and explicitly not forwarding its ref
+ props2: Props & React.ComponentPropsWithRef; // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
+}
+```
+
+### Redux with Typescript Coming Up SOON!
+
+{/* https://bluelight.co/blog/redux-toolkit-with-typescript */}
diff --git a/pages/programming-tutorials/nextjs/novel-v2.mdx b/pages/programming-tutorials/nextjs/novel-v2.mdx
new file mode 100644
index 00000000..55fe13c5
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/novel-v2.mdx
@@ -0,0 +1,1154 @@
+import { FileTree } from "nextra/components";
+
+# Novel Editor v2 Setup
+
+[Novel](https://github.com/steven-tey/novel) is a Notion-style WYSIWYG editor with AI-powered autocompletion. Built with [Tiptap](https://tiptap.dev/) + [Vercel AI SDK](https://sdk.vercel.ai/docs).
+
+### Installation
+
+Novel has been updated to newer versions but to follow along install the "novel": "^0.2.13", version:
+Checkout the documentation for the latest version :
+[Novel docs](https://novel.sh/docs/introduction)
+
+```bash copy
+npm i novel@0.2.13,
+```
+
+### Basic Usage
+
+```ts copy
+import { Editor } from "novel";
+
+export default function App() {
+ const [content, setContent] = useState(
+ formData.description || defaultValue
+ );
+ // note if you want to make the editor not editable add the isEditable prop={flase}
+ return
+ handleCommandNavigation(event),
+ },
+ handlePaste: (view, event) => handleImagePaste(view, event, uploadFn),
+ handleDrop: (view, event, _slice, moved) =>
+ handleImageDrop(view, event, moved, uploadFn),
+ attributes: {
+ class:
+ "prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
+ },
+ }}
+ editable={isEditable}
+ onUpdate={({ editor }) => {
+ onChange(editor.getJSON());
+ }}
+ slotAfter={
+
+ No results
+
+
+ {suggestionItems.map((item: any) => (
+ item.command?.(val)}
+ className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent `}
+ key={item.title}
+ >
+
+ {React.isValidElement(item.icon) ? item.icon : null}
+
+
+
{item.title}
+
+ {item.description}
+
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
+
+export default Editor;
+```
+
+#### Create a folder in your components directory holding the following files.
+
+
+
+
+
+
+
+
+```ts copy filename="slash-comand.tsx"
+import {
+ CheckSquare,
+ Code,
+ Heading1,
+ Heading2,
+ Heading3,
+ ImageIcon,
+ List,
+ ListOrdered,
+ MessageSquarePlus,
+ Text,
+ TextQuote,
+} from "lucide-react";
+import { createSuggestionItems } from "novel/extensions";
+import { Command, renderItems } from "novel/extensions";
+import { uploadFn } from "./image-upload";
+
+export const suggestionItems = createSuggestionItems([
+ {
+ title: "Send Feedback",
+ description: "Let us know how we can improve.",
+ icon:
,
+ command: ({ editor, range }) => {
+ editor.chain().focus().deleteRange(range).toggleBulletList().run();
+ },
+ },
+ {
+ title: "Numbered List",
+ description: "Create a list with numbering.",
+ searchTerms: ["ordered"],
+ icon:
+ handleCommandNavigation(event),
+ },
+ handlePaste: (view, event) => handleImagePaste(view, event, uploadFn),
+ handleDrop: (view, event, _slice, moved) =>
+ handleImageDrop(view, event, moved, uploadFn),
+ attributes: {
+ class:
+ "prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
+ },
+ }}
+ editable={isEditable}
+ onUpdate={({ editor }) => {
+ onChange(editor.getJSON());
+ }}
+ slotAfter={
+
+ No results
+
+
+ {suggestionItems.map((item: any) => (
+ item.command?.(val)}
+ className={`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-accent aria-selected:bg-accent `}
+ key={item.title}
+ >
+
+ {React.isValidElement(item.icon) ? item.icon : null}
+
+
+
{item.title}
+
+ {item.description}
+
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
+
+export default Editor;
+```
+
+#### Inside the selectors sub-folder
+
+```ts copy filename="text-buttons.tsx
+import { cn } from "@/lib/utils";
+import { EditorBubbleItem, useEditor } from "novel";
+import {
+ BoldIcon,
+ ItalicIcon,
+ UnderlineIcon,
+ StrikethroughIcon,
+ CodeIcon,
+} from "lucide-react";
+import type { SelectorItem } from "./node-selector";
+import { Button } from "@/components/ui/button";
+
+export const TextButtons = () => {
+ const { editor } = useEditor();
+ if (!editor) return null;
+
+ const items: SelectorItem[] = [
+ {
+ name: "bold",
+ isActive: (editor) => editor.isActive("bold"),
+ command: (editor) => editor.chain().focus().toggleBold().run(),
+ icon: BoldIcon,
+ },
+ {
+ name: "italic",
+ isActive: (editor) => editor.isActive("italic"),
+ command: (editor) => editor.chain().focus().toggleItalic().run(),
+ icon: ItalicIcon,
+ },
+ {
+ name: "underline",
+ isActive: (editor) => editor.isActive("underline"),
+ command: (editor) => editor.chain().focus().toggleUnderline().run(),
+ icon: UnderlineIcon,
+ },
+ {
+ name: "strike",
+ isActive: (editor) => editor.isActive("strike"),
+ command: (editor) => editor.chain().focus().toggleStrike().run(),
+ icon: StrikethroughIcon,
+ },
+ {
+ name: "code",
+ isActive: (editor) => editor.isActive("code"),
+ command: (editor) => editor.chain().focus().toggleCode().run(),
+ icon: CodeIcon,
+ },
+ ];
+
+ return (
+
+ {items.map((item, index) => (
+ {
+ item.command(editor);
+ }}
+ >
+
+
+
+ ))}
+
+ );
+};
+```
+
+```ts copy filename="node-selector.tsx"
+import {
+ Check,
+ ChevronDown,
+ Heading1,
+ Heading2,
+ Heading3,
+ TextQuote,
+ ListOrdered,
+ TextIcon,
+ Code,
+ CheckSquare,
+ type LucideIcon,
+} from "lucide-react";
+import { EditorBubbleItem, EditorInstance, useEditor } from "novel";
+
+import { Popover } from "@radix-ui/react-popover";
+import { PopoverContent, PopoverTrigger } from "@/components//ui/popover";
+import { Button } from "@/components//ui/button";
+
+export type SelectorItem = {
+ name: string;
+ icon: LucideIcon;
+ command: (editor: EditorInstance) => void;
+ isActive: (editor: EditorInstance) => boolean;
+};
+
+const items: SelectorItem[] = [
+ {
+ name: "Text",
+ icon: TextIcon,
+ command: (editor) => editor.chain().focus().clearNodes().run(),
+ // I feel like there has to be a more efficient way to do this – feel free to PR if you know how!
+ isActive: (editor) =>
+ editor.isActive("paragraph") &&
+ !editor.isActive("bulletList") &&
+ !editor.isActive("orderedList"),
+ },
+ {
+ name: "Heading 1",
+ icon: Heading1,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
+ isActive: (editor) => editor.isActive("heading", { level: 1 }),
+ },
+ {
+ name: "Heading 2",
+ icon: Heading2,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+ isActive: (editor) => editor.isActive("heading", { level: 2 }),
+ },
+ {
+ name: "Heading 3",
+ icon: Heading3,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+ isActive: (editor) => editor.isActive("heading", { level: 3 }),
+ },
+ {
+ name: "To-do List",
+ icon: CheckSquare,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleTaskList().run(),
+ isActive: (editor) => editor.isActive("taskItem"),
+ },
+ {
+ name: "Bullet List",
+ icon: ListOrdered,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleBulletList().run(),
+ isActive: (editor) => editor.isActive("bulletList"),
+ },
+ {
+ name: "Numbered List",
+ icon: ListOrdered,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleOrderedList().run(),
+ isActive: (editor) => editor.isActive("orderedList"),
+ },
+ {
+ name: "Quote",
+ icon: TextQuote,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleBlockquote().run(),
+ isActive: (editor) => editor.isActive("blockquote"),
+ },
+ {
+ name: "Code",
+ icon: Code,
+ command: (editor) =>
+ editor.chain().focus().clearNodes().toggleCodeBlock().run(),
+ isActive: (editor) => editor.isActive("codeBlock"),
+ },
+];
+interface NodeSelectorProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+export const NodeSelector = ({ open, onOpenChange }: NodeSelectorProps) => {
+ const { editor } = useEditor();
+ if (!editor) return null;
+
+ const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
+ name: "Multiple",
+ };
+
+ return (
+
+
+
+ {activeItem.name}
+
+
+
+ {items.map((item, index) => (
+ {
+ item.command(editor);
+ onOpenChange(false);
+ }}
+ className='flex cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent'
+ >
+
+ {activeItem.name === item.name &&
+ ))}
+
+
+ );
+};
+```
+
+```ts copy filename="link-selector.tsx"
+import { cn } from "@/lib/utils";
+import { useEditor } from "novel";
+import { Check, Trash } from "lucide-react";
+import {
+ type Dispatch,
+ type FC,
+ type SetStateAction,
+ useEffect,
+ useRef,
+} from "react";
+import { Button } from "@/components/ui/button";
+import {
+ PopoverContent,
+ Popover,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+
+export function isValidUrl(url: string) {
+ try {
+ new URL(url);
+ return true;
+ } catch (e) {
+ return false;
+ }
+}
+export function getUrlFromString(str: string) {
+ if (isValidUrl(str)) return str;
+ try {
+ if (str.includes(".") && !str.includes(" ")) {
+ return new URL(`https://${str}`).toString();
+ }
+ } catch (e) {
+ return null;
+ }
+}
+interface LinkSelectorProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
+ const inputRef = useRef(null);
+ const { editor } = useEditor();
+
+ // Autofocus on input by default
+ useEffect(() => {
+ inputRef.current && inputRef.current?.focus();
+ });
+ if (!editor) return null;
+
+ return (
+
+
+
+ ↗
+
+ Link
+
+
+
+
+
+
+
+ );
+};
+```
+
+```ts copy filename="color-selector.tsx"
+import { Check, ChevronDown } from "lucide-react";
+import { EditorBubbleItem, useEditor } from "novel";
+
+import {
+ PopoverTrigger,
+ Popover,
+ PopoverContent,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+
+export interface BubbleColorMenuItem {
+ name: string;
+ color: string;
+}
+
+const TEXT_COLORS: BubbleColorMenuItem[] = [
+ {
+ name: "Default",
+ color: "var(--novel-black)",
+ },
+ {
+ name: "Purple",
+ color: "#9333EA",
+ },
+ {
+ name: "Red",
+ color: "#E00000",
+ },
+ {
+ name: "Yellow",
+ color: "#EAB308",
+ },
+ {
+ name: "Blue",
+ color: "#2563EB",
+ },
+ {
+ name: "Green",
+ color: "#008A00",
+ },
+ {
+ name: "Orange",
+ color: "#FFA500",
+ },
+ {
+ name: "Pink",
+ color: "#BA4081",
+ },
+ {
+ name: "Gray",
+ color: "#A8A29E",
+ },
+];
+
+const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
+ {
+ name: "Default",
+ color: "var(--novel-highlight-default)",
+ },
+ {
+ name: "Purple",
+ color: "var(--novel-highlight-purple)",
+ },
+ {
+ name: "Red",
+ color: "var(--novel-highlight-red)",
+ },
+ {
+ name: "Yellow",
+ color: "var(--novel-highlight-yellow)",
+ },
+ {
+ name: "Blue",
+ color: "var(--novel-highlight-blue)",
+ },
+ {
+ name: "Green",
+ color: "var(--novel-highlight-green)",
+ },
+ {
+ name: "Orange",
+ color: "var(--novel-highlight-orange)",
+ },
+ {
+ name: "Pink",
+ color: "var(--novel-highlight-pink)",
+ },
+ {
+ name: "Gray",
+ color: "var(--novel-highlight-gray)",
+ },
+];
+
+interface ColorSelectorProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+export const ColorSelector = ({ open, onOpenChange }: ColorSelectorProps) => {
+ const { editor } = useEditor();
+
+ if (!editor) return null;
+ const activeColorItem = TEXT_COLORS.find(({ color }) =>
+ editor.isActive("textStyle", { color })
+ );
+
+ const activeHighlightItem = HIGHLIGHT_COLORS.find(({ color }) =>
+ editor.isActive("highlight", { color })
+ );
+
+ return (
+
+
+
+
+ A
+
+
+
+
+
+
+
+ Color
+
+ {TEXT_COLORS.map(({ name, color }, index) => (
+
{
+ editor.commands.unsetColor();
+ name !== "Default" &&
+ editor
+ .chain()
+ .focus()
+ .setColor(color || "")
+ .run();
+ }}
+ className='flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent'
+ >
+
+
+ ))}
+
+
+ Background
+
+ {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
+
{
+ editor.commands.unsetHighlight();
+ name !== "Default" && editor.commands.setHighlight({ color });
+ }}
+ className='flex cursor-pointer items-center justify-between px-2 py-1 text-sm hover:bg-accent'
+ >
+
+ {editor.isActive("highlight", { color }) && (
+
+ ))}
+
+
+ );
+};
+```
diff --git a/pages/programming-tutorials/nextjs/novel.mdx b/pages/programming-tutorials/nextjs/novel.mdx
new file mode 100644
index 00000000..e1745592
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/novel.mdx
@@ -0,0 +1,183 @@
+# Novel Editor v1 Setup
+
+[Novel](https://github.com/steven-tey/novel) is a Notion-style WYSIWYG editor with AI-powered autocompletion. Built with [Tiptap](https://tiptap.dev/) + [Vercel AI SDK](https://sdk.vercel.ai/docs).
+
+### Installation
+
+Novel has been updated to newer versions but to follow along install the "novel": "^0.1.22", version:
+Checkout the documentation for the latest version :
+[Novel docs](https://novel.sh/docs/introduction)
+
+```bash copy
+npm i novel@0.1.22
+```
+
+### Basic Usage
+
+```ts copy
+import { Editor } from "novel";
+
+export default function App() {
+ return (initialContent);
+ return (
+
+
+ );
+}
+```
+
+#### Create the NovelEditor Component
+
+```ts copy
+import React from "react";
+import { Editor } from "novel";
+import { type Editor as TipTapEditor } from "@tiptap/core";
+import { Card, CardContent } from "@/components/ui/card";
+
+type NovelEditorProps = {
+ setContent: any;
+ title: string;
+ content: string | undefined;
+};
+export default function NovelEditor({
+ setContent,
+ content,
+ title,
+}: NovelEditorProps) {
+ return (
+
+
+ {title}
+ {
+ setContent(editor?.getHTML());
+ }}
+ disableLocalStorage={true}
+ className="rounded-md border shadow-none"
+ />
+
+
+ );
+}
+```
+
+#### Render the HTML
+
+```bash copy
+npm i html-react-parser
+
+```
+
+### Create the Component to render the parsed html
+
+```ts copy
+"use client";
+import React from "react";
+import parse from "html-react-parser";
+export default function ProductContent({
+ codeString,
+}: {
+ codeString: string | null | undefined;
+}) {
+ return {parse(`${codeString}`)}
;
+}
+```
+
+### Add the Styles to rendered html
+
+```css copy
+.parsed-html h1 {
+ @apply text-2xl font-bold my-4;
+}
+
+.parsed-html h2 {
+ @apply text-xl font-bold my-4;
+}
+
+.parsed-html h3 {
+ @apply text-lg font-bold my-4;
+}
+
+.parsed-html h4 {
+ @apply text-base font-bold my-4;
+}
+
+.parsed-html p {
+ @apply text-base leading-relaxed my-2;
+}
+
+.parsed-html img {
+ @apply max-w-full h-auto my-4 block;
+}
+
+.parsed-html code {
+ @apply bg-gray-100 px-2 py-1 rounded font-mono;
+}
+
+.parsed-html ul {
+ @apply list-disc my-4 pl-8;
+}
+
+.parsed-html ul li {
+ @apply my-2;
+}
+
+.parsed-html ol {
+ @apply list-decimal my-4 pl-8;
+}
+
+.parsed-html ol li {
+ @apply my-2;
+}
+
+.parsed-html blockquote {
+ @apply border-l-4 border-gray-300 pl-4 my-4 text-gray-600 italic;
+}
+
+.parsed-html pre {
+ @apply bg-gray-100 p-4 rounded overflow-x-auto font-mono;
+}
+
+.parsed-html a {
+ @apply text-blue-600 no-underline hover:underline;
+}
+
+.parsed-html table {
+ @apply border-collapse w-full my-4;
+}
+
+.parsed-html th,
+.parsed-html td {
+ @apply border border-gray-300 px-2 py-1 text-left;
+}
+
+.parsed-html th {
+ @apply bg-gray-100 font-bold;
+}
+
+/* .novel-list-disc {
+ list-style: circle;
+} */
+```
diff --git a/pages/programming-tutorials/nextjs/redux.mdx b/pages/programming-tutorials/nextjs/redux.mdx
new file mode 100644
index 00000000..a3253a35
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/redux.mdx
@@ -0,0 +1,588 @@
+import { Steps } from "nextra/components";
+
+# Complete Redux Toolkit in Next Js with Typescript
+
+## Introduction
+
+In this tutorial, we will learn how to integrate Redux and LocalStorage into a Next.js 14 application using TypeScript. We will start by defining key Redux terminologies, and then we will build practical examples to solidify our understanding.
+
+## Setting Up Next.js 14 with TypeScript and Install redux toolkit
+
+First, let's set up a new Next.js project with TypeScript.
+
+```bash copy
+npx create-next-app@latest nextjs-redux-ts --typescript
+cd nextjs-redux-ts
+npm install @reduxjs/toolkit react-redux
+
+```
+
+## Defining Redux Terminologies
+
+- Slice: A slice is a collection of Redux reducer logic and actions for a single feature of the application. It is created using the createSlice function from Redux Toolkit.
+
+- Action: Actions are plain objects with a type property that indicates the type of action being performed. They can also contain additional data.
+
+- Dispatch: The dispatch function is used to send actions to the Redux store.
+
+- Reducers: Reducers are functions that take the current state and an action as arguments and return a new state.
+
+- Provider: The Provider component makes the Redux store available to any nested components that need to access the Redux state.
+
+## Implementing Redux with a Counter Example
+
+
+### Setting Up the Store:
+Create a store.ts file in the src/store directory.
+
+```ts copy
+// store/store.ts
+import { configureStore } from "@reduxjs/toolkit";
+import counterReducer from "./counterSlice";
+
+const store = configureStore({
+ reducer: {
+ counter: counterReducer,
+ },
+});
+
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;
+```
+
+### Creating a Counter Slice:
+
+Create a counterSlice.ts file in the store/slices directory.
+
+```ts copy
+// store/slices/counterSlice.ts
+import { createSlice } from "@reduxjs/toolkit";
+
+interface CounterState {
+ value: number;
+}
+
+const initialState: CounterState = {
+ value: 0,
+};
+
+const counterSlice = createSlice({
+ name: "counter",
+ initialState,
+ reducers: {
+ increment: (state) => {
+ state.value += 1;
+ },
+ decrement: (state) => {
+ state.value -= 1;
+ },
+ },
+});
+
+export const { increment, decrement } = counterSlice.actions;
+export default counterSlice.reducer;
+```
+
+### Integrating Provider in layout.tsx:
+
+Create a provider in the Providers folder and the Integrate it into the layout
+
+```ts copy
+// providers
+import { Provider } from "react-redux";
+import store from "../store/store";
+
+function Providers({ children }: { children: ReactNode }) {
+ return {children} ;
+}
+
+export default Providers;
+```
+
+### Creating the Counter Component:
+
+Create a Counter component in the src/components directory.
+
+```ts copy
+// src/components/Counter.tsx
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../store/store";
+import { increment, decrement } from "../store/counterSlice";
+
+const Counter: React.FC = () => {
+ const dispatch = useDispatch();
+ const count = useSelector((state: RootState) => state.counter.value);
+
+ return (
+
+
Counter: {count}
+ dispatch(increment())}>Increment
+ dispatch(decrement())}>Decrement
+
+ );
+};
+
+export default Counter;
+```
+
+### Define Typed Hooks
+
+While it's possible to import the RootState and AppDispatch types into each component, it's better to create typed versions of the useDispatch and useSelector hooks for usage in your application. This is important for a couple reasons:
+
+For useSelector, it saves you the need to type (state: RootState) every time
+For useDispatch, the default Dispatch type does not know about thunks. In order to correctly dispatch thunks, you need to use the specific customized AppDispatch type from the store that includes the thunk middleware types, and use that with useDispatch. Adding a pre-typed useDispatch hook keeps you from forgetting to import AppDispatch where it's needed.
+
+```ts copy
+import { useDispatch, useSelector } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes();
+export const useAppSelector = useSelector.withTypes();
+```
+
+### Using the Counter Component:
+
+Add the Counter component to the page.tsx page.
+
+```ts copy
+// src/pages/index.tsx
+import Counter from "../components/Counter";
+
+const Home = () => {
+ return (
+
+
Redux Counter Example
+
+
+## Implementing Redux with an Add to Cart Example
+
+
+ ### Setting Up Cart Slice:
+Create a cartSlice.ts file in the /store directory.
+
+```ts copy
+// src/store/cartSlice.ts
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface CartItem {
+ id: number;
+ name: string;
+ price: number;
+ image: string;
+}
+
+interface CartState {
+ cartItems: CartItem[];
+}
+
+// Safely retrieve cart items from localStorage
+const getInitialCartItems = (): CartItem[] => {
+ try {
+ const storedCart = localStorage.getItem("cart");
+ if (storedCart) {
+ return JSON.parse(storedCart);
+ }
+ } catch (error) {
+ console.error("Failed to parse cart items from localStorage", error);
+ }
+ return [];
+};
+
+const initialState: CartState = {
+ cartItems: getInitialCartItems(),
+};
+
+const cartSlice = createSlice({
+ name: "cart",
+ initialState,
+ reducers: {
+ addProductToCart: (state, action: PayloadAction) => {
+ state.cartItems.push(action.payload);
+ },
+ removeProductFromCart: (state, action: PayloadAction) => {
+ state.cartItems = state.cartItems.filter(
+ (item) => item.id !== action.payload
+ );
+ },
+ },
+});
+
+export const { addProductToCart, removeProductFromCart } = cartSlice.actions;
+export default cartSlice.reducer;
+```
+
+### Updating the Store:
+
+Update store.ts to include the product reducer.
+
+```ts copy
+// src/store/store.ts
+import { configureStore } from "@reduxjs/toolkit";
+import counterSlice from "./slices/counterSlice";
+import cartSlice from "./slices/cartSlice";
+
+const store = configureStore({
+ reducer: {
+ counter: counterSlice,
+ cart: cartSlice,
+ },
+});
+
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;
+```
+
+### Adding Item to CART in the Product Component
+
+```ts copy
+"use client";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { ShoppingBag } from "lucide-react";
+import { IProduct, type Product } from "@/types/types";
+import { useAppDispatch, useAppSelector } from "@/store/hooks/hooks";
+import {
+ addProductToCart,
+ removeProductFromCart,
+} from "@/store/slices/cartSlice";
+import toast from "react-hot-toast";
+
+export default function Product({ product }: { product: IProduct }) {
+ const [existing, setExisting] = useState(false);
+ const cartItems = useAppSelector((state) => state.cart.cartItems);
+
+ useEffect(() => {
+ // Check if the product already exists in the cart
+ const isExisting = cartItems.some((item) => item.id === product.id);
+ setExisting(isExisting);
+ }, [cartItems, product.id]);
+
+ const dispatch = useAppDispatch();
+ function handleAdd() {
+ const newCartItem = {
+ id: product.id,
+ image: product.images[0],
+ name: product.title,
+ price: product.price,
+ };
+ dispatch(addProductToCart(newCartItem));
+ localStorage.setItem("cart", JSON.stringify([...cartItems, newCartItem]));
+ toast.success("Item added successfully");
+ }
+ const handleRemove = (productId: number) => {
+ dispatch(removeProductFromCart(productId));
+ localStorage.setItem(
+ "cart",
+ JSON.stringify(cartItems.filter((product) => product.id !== productId))
+ );
+ };
+ return (
+
+
+
{product.title}
+
${product.price}
+
+ {existing ? (
+
handleRemove(product.id)}
+ >
+ Remove from
+
+ ) : (
+
+ Add to Cart
+
+ )}
+
+
+
Shopping Cart ({cartItems.length})
+ {cartItems.length > 0 ? (
+
+ {cartItems.map((product) => {
+ return (
+
+
+
+
{product.name}
+
+ ${product.price}
+
+
+
handleRemove(product.id)}
+ variant={"destructive"}
+ >
+
+
+ );
+ })}
+
+ ) : (
+
+
No Items in Cart
+
+ )}
+
+
+
+## Implementing a Multi-Step Form with React Hook Form
+
+
+### Installing Dependencies: Install React Hook Form.
+
+```bash copy
+npm i react-hook-form
+```
+
+### Creating a Form Slice:
+
+Create a formSlice.ts file in the src/store directory to manage the form state.
+
+```ts copy
+// src/store/formSlice.ts
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface FormState {
+ firstName: string;
+ lastName: string;
+ email: string;
+ phone: string;
+ step: number;
+}
+
+const initialState: FormState = {
+ firstName: "",
+ lastName: "",
+ email: "",
+ phone: "",
+ step: 1,
+};
+
+const formSlice = createSlice({
+ name: "form",
+ initialState,
+ reducers: {
+ updateForm: (state, action: PayloadAction>) => {
+ return { ...state, ...action.payload };
+ },
+ nextStep: (state) => {
+ state.step += 1;
+ },
+ previousStep: (state) => {
+ state.step -= 1;
+ },
+ },
+});
+
+export const { updateForm, nextStep, previousStep } = formSlice.actions;
+export default formSlice.reducer;
+```
+
+### Updating the Store:
+
+Include the form reducer in store.ts.
+
+```ts copy
+// src/store/store.ts
+import { configureStore } from "@reduxjs/toolkit";
+import counterReducer from "./counterSlice";
+import productReducer from "./productSlice";
+import formReducer from "./formSlice";
+
+const store = configureStore({
+ reducer: {
+ counter: counterReducer,
+ products: productReducer,
+ form: formReducer,
+ },
+});
+
+export type RootState = ReturnType;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;
+```
+
+### Creating the Multi-Step Form Component:
+
+Update the MultiStepForm component to use Redux for managing form state.
+
+```ts copy
+// src/components/MultiStepForm.tsx
+import React from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../store/store";
+import { updateForm, nextStep, previousStep } from "../store/formSlice";
+
+interface FormData {
+ firstName: string;
+ lastName: string;
+ email: string;
+ phone: string;
+}
+
+const MultiStepForm: React.FC = () => {
+ const dispatch = useDispatch();
+ const { firstName, lastName, email, phone, step } = useSelector(
+ (state: RootState) => state.form
+ );
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ defaultValues: { firstName, lastName, email, phone },
+ });
+
+ const onSubmit: SubmitHandler = (data) => {
+ dispatch(updateForm(data));
+ console.log(data);
+ };
+
+ return (
+
+ );
+};
+
+export default MultiStepForm;
+```
+
+### Using the Updated Multi-Step Form Component:
+
+Add the updated MultiStepForm component to the index.tsx page.
+
+```ts copy
+// src/pages/index.tsx
+import Counter from "../components/Counter";
+import Products from "../components/Products";
+import MultiStepForm from "../components/MultiStepForm";
+
+const Home = () => {
+ return (
+
+
Redux Counter, Add to Cart, and Multi-Step Form Example
+
+
+
+
diff --git a/pages/programming-tutorials/nextjs/reuseable.mdx b/pages/programming-tutorials/nextjs/reuseable.mdx
new file mode 100644
index 00000000..4060dbdb
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/reuseable.mdx
@@ -0,0 +1,2105 @@
+import { Tabs } from "nextra/components";
+
+## Re-Usable Componensts
+
+These are some of my re-usable components
+
+## General Installation
+
+Install shadcn and Darkmode
+
+```bash copy
+ npx shadcn-ui@latest init
+ npm i lucide-react
+```
+
+Install Dark Mode here : [Shadcn Guide](https://ui.shadcn.com/docs/dark-mode/next)
+
+## Website Header,Layout, Footer and Hero Sections
+
+
+
+```ts copy filename="site-header.tsx"
+
+"use client";
+import React from "react";
+import { useState } from "react";
+import { Dialog, DialogPanel } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import {
+DropdownMenu,
+DropdownMenuContent,
+DropdownMenuItem,
+DropdownMenuLabel,
+DropdownMenuSeparator,
+DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { ModeToggle } from "./mode-toggle";
+import { Session } from "next-auth";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { getInitials } from "@/lib/generateInitials";
+// import { useRouter } from "next/navigation";
+import { signOut } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import Logo from "./global/Logo";
+import AuthenticatedAvatar from "./AuthenticatedAvatar";
+
+export default function SiteHeader({ session }: { session: Session | null }) {
+ const navigation = [
+ { name: "Become a Vendor", href: "/vendor" },
+ { name: "How it Works", href: "#howItWorks" },
+ { name: "About", href: "/about" },
+ { name: "Register", href: "/register" },
+ { name: "Help", href: "/help" },
+ ];
+ const router = useRouter();
+ async function handleLogout() {
+ try {
+ await signOut();
+ router.push("/login");
+ } catch (error) {
+ console.log(error);
+ }
+ }
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+ return (
+
+ );
+}
+
+````
+
+
+
+
+```ts copy filename='layout.tsx'
+
+import Footer from "@/components/site-footer";
+import SiteHeader from "@/components/site-header";
+import React, { ReactNode } from "react";
+
+export default function HomeLayout({ children }: { children: ReactNode }) {
+ return (
+
+ );
+}
+
+````
+
+
+
+```ts copy filename='hero.tsx'
+
+
+
+
+
+ UI library for Next JS Developers
+
+
+ 50+ free and open-source animated components built with React, Typescript,
+ Tailwind CSS, and Framer Motion. Perfect companion for shadcn/ui.
+
+
+
+
+```ts copy filename='anouncement.tsx'
+import { MoveRight } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+type AnnouncementProps = {
+ title: string;
+ href: string;
+};
+export default function Announcement({ title, href }: AnnouncementProps) {
+ return (
+
+
+
+```ts copy filename='loading.tsx'
+
+"use client";
+import Lottie from "lottie-react";
+import React from "react";
+import LoaderAnimation from "../public/loader.json";
+export default function Loading() {
+return (
+
+
+ );
+ }
+
+````
+
+
+
+
+```ts copy
+
+import React, { useState } from "react";
+const Footer = () => {
+return (
+
+
+
+
+
+
+
+
+ Amet minim mollit non deserunt ullamco est sit aliqua dolor do
+ amet sint. Velit officia consequat duis enim velit mollit.
+
+
+
+
+
+
+
+
+
+
+
+ Subscribe to newsletter
+
+
+
+
+
+
+
+
+
+ © Copyright 2021, All Rights Reserved by Postcraft
+
+
+
+ );
+ };
+ export default Footer;
+
+````
+
+
+
+
+## React Quill Editor
+
+
+
+ ```bash copy
+ npm i react-quill
+ ```
+
+
+ ```ts copy
+ "use client";
+ import React from "react";
+ import ReactQuill from "react-quill";
+ import "react-quill/dist/quill.snow.css";
+ export default function QuillEditor({
+ label,
+ className = "sm:col-span-2",
+ value,
+ onChange,
+ }: {
+ label: string;
+ className: string;
+ value: any;
+ onChange: any;
+ }) {
+ const modules = {
+ toolbar: [
+ [{ header: [1, 2, false] }],
+ ["bold", "italic", "underline", "strike", "blockquote"],
+ [{ list: "ordered" }, { list: "bullet" }],
+ ["link", "color", "image"],
+ [{ "code-block": true }],
+ ["clean"],
+ ],
+ };
+ const formats = [
+ "header",
+ "bold",
+ "italic",
+ "underline",
+ "strike",
+ "blockquote",
+ "list",
+ "bullet",
+ "link",
+ "indent",
+ "image",
+ "code-block",
+ "color",
+ ];
+ return (
+
+
+ {label}
+
+
+ );
+ }
+````
+
+
+
+ ```ts copy
+ import dynamic from "next/dynamic";
+ const QuillEditor = dynamic(
+ () => import("@/components/FormInputs/QuillEditor"),
+ {
+ ssr: false,
+ }
+ );
+ const [content, setContent] = useState(initialContent);
+
+
+
+
+## Form Select Input
+
+
+
+ ```bash copy
+ npm i react-tailwindcss-select
+ ```
+ **Modify your Tailwind config**
+
+ ```ts copy
+ // in your tailwind.config.js
+ module.exports = {
+ // ...
+ content: [
+ "./src/**/*.{js,jsx,ts,tsx}",
+ "./node_modules/react-tailwindcss-select/dist/index.esm.js"
+ ]
+ // ...
+ };
+ ```
+
+
+
+ ```ts copy
+"use client";
+import AddNewButton from "@/components/AddNewButton";
+import React, { useState } from "react";
+import Select from "react-tailwindcss-select";
+import { Option, Options } from "react-tailwindcss-select/dist/components/type";
+type FormSelectInputProps = {
+ options: Options;
+ label: string;
+ option: Option;
+ setOption: any;
+ href?: string;
+ labelShown?: boolean;
+ toolTipText?: string;
+};
+export default function FormSelectInput({
+ options,
+ label,
+ option,
+ setOption,
+ href,
+ toolTipText,
+ labelShown = true,
+}: FormSelectInputProps) {
+ return (
+
+ {labelShown && (
+
+ Select {label}
+
+ )}
+
+
setOption(item)}
+ options={options}
+ placeholder={label}
+ />
+ {href && toolTipText && (
+
+
+
+ ```ts copy filename="AddNewButton.tsx"
+ import React from "react";
+import { Button } from "./ui/button";
+import Link from "next/link";
+import { Plus } from "lucide-react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+type AddNewButtonProps = {
+ href: string;
+ toolTipText: string;
+};
+export default function AddNewButton({ href, toolTipText }: AddNewButtonProps) {
+ return (
+
+
+
+
+
+
+
+ {toolTipText}
+
+
+
+ );
+}
+```
+
+
+ ```ts copy
+const initialMainCategoryId = initialData?.mainCategoryId;
+ const initialCategory = mainCategories.find(
+ (item) => item.value === initialMainCategoryId
+ );
+ const [selectedMainCategory, setSelectedMainCategory] =
+ useState(initialCategory);
+
+
+
+
+
+
+```
+
+
+
+## Single Image Input
+
+
+Follow steps in the docs of [Uploathing] (https://docs.uploadthing.com/getting-started/appdir)
+
+```bash copy
+npm install uploadthing @uploadthing/react
+```
+
+
+
+ ```ts copy
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { UploadButton } from "@/lib/uploadthing";
+import Image from "next/image";
+import React from "react";
+type ImageInputProps = {
+ title: string;
+ imageUrl: string;
+ setImageUrl: any;
+ endpoint: any;
+};
+export default function ImageInput({
+ title,
+ imageUrl,
+ setImageUrl,
+ endpoint,
+}: ImageInputProps) {
+ return (
+
+
+ {title}
+
+
+
+ {
+ // Do something with the response
+ console.log("Files: ", res);
+
+ setImageUrl(res[0].url);
+ }}
+ onUploadError={(error: Error) => {
+ // Do something with the error.
+ alert(`ERROR! ${error.message}`);
+ }}
+ />
+
+
+
+
+);
+}
+
+ ```
+
+
+
+ ```ts copy
+ const initialImage = initialData?.imageUrl || "/placeholder.svg";
+ const [imageUrl, setImageUrl] = useState(initialImage);
+
+
+
+
+## Multiple Image Upload
+
+
+
+ Follow steps in the docs of [Uploathing] (https://docs.uploadthing.com/getting-started/appdir)
+
+```bash copy
+npm install uploadthing @uploadthing/react
+```
+
+
+
+ ```ts copy
+ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { UploadButton } from "@/lib/uploadthing";
+import Image from "next/image";
+import React from "react";
+type ImageInputProps = {
+ title: string;
+ imageUrls: string[];
+ setImageUrls: any;
+ endpoint: any;
+};
+export default function MultipleImageInput({
+ title,
+ imageUrls,
+ setImageUrls,
+ endpoint,
+}: ImageInputProps) {
+ // console.log(imageUrls);
+ return (
+
+
+ {title}
+
+
+
+
+
+ {imageUrls.map((imageUrl: string, i: number) => {
+ return (
+
+
+ );
+ })}
+
+
{
+ // Do something with the response
+ // console.log(
+ // "Files: ",
+ // res.map((item) => item.url)
+ // );
+ setImageUrls(res.map((item) => item.url));
+ }}
+ onUploadError={(error: Error) => {
+ // Do something with the error.
+ alert(`ERROR! ${error.message}`);
+ }}
+ />
+
+
+ );
+}
+
+ ```
+
+
+
+ ```ts copy
+ const initialImages = initialData?.productImages || [
+ "/placeholder.svg",
+ "/placeholder.svg",
+ "/placeholder.svg",
+ ];
+ const [productImages, setProductImages] = useState(initialImages);
+
+
+
+## Text Input
+
+
+
+ See how to use React hook form under forms, Include tailwind form plugin in the tailwind config
+
+```bash copy
+npm i react-hook-form
+npm install -D @tailwindcss/forms
+```
+
+Tailwind config
+
+```ts copy
+// tailwind.config.js
+module.exports = {
+ theme: {
+ // ...
+ },
+ plugins: [
+ require("@tailwindcss/forms"),
+ // ...
+ ],
+};
+```
+
+
+
+ ```ts copy
+import { cn } from "@/lib/utils";
+import React from "react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { CircleHelp, Mail } from "lucide-react";
+type TextInputProps = {
+ register: any,
+ errors: any,
+ label: string,
+ type?: string,
+ name: string,
+ toolTipText?: string,
+ unit?: string,
+ placeholder?: string,
+ icon?: any,
+};
+export default function TextInput({
+ register,
+ errors,
+ label,
+ type = "text",
+ name,
+ toolTipText,
+ unit,
+ icon,
+ placeholder,
+}: TextInputProps) {
+ const Icon = icon;
+ return (
+
+
+
+ {label}
+
+ {toolTipText && (
+
+
+
+
+
+
+
+ {toolTipText}
+
+
+
+ )}
+
+
+
+ {icon && (
+
+
+ )}
+
+ {unit && (
+
+ {unit}
+
+ )}
+
+ {errors[`${name}`] && (
+
{label} is required
+ )}
+
+
+
+ ```ts copy
+
+
+ ```
+
+
+
+
+## Textarea
+
+
+ Install Tailwind forms Plugin
+
+ ```ts copy
+ import { cn } from "@/lib/utils";
+import React from "react";
+type TextAreaProps = {
+ register: any;
+ errors: any;
+ label: string;
+ name: string;
+ helperText?: string;
+};
+export default function TextArea({
+ register,
+ errors,
+ label,
+ name,
+ helperText = "",
+}: TextAreaProps) {
+ return (
+
+
+ {label}
+
+
+
+ {errors[`${name}`] && (
+ Description is required
+ )}
+
+ {helperText && (
+
{helperText}
+ )}
+
+
+ ```ts copy
+
+
+
+ ```
+
+
+
+## Radio Input
+
+
+ Install tailwind forms plugin
+
+ ```ts copy
+ import React from "react";
+
+ type RadioOption = {
+ label: string;
+ id: string;
+ };
+
+ type RadioInputProps = {
+ radioOptions: RadioOption[];
+ register: any;
+ label: string;
+ name: string;
+ errors: any;
+ };
+ export default function RadioInput({
+ radioOptions,
+ register,
+ label,
+ name,
+ errors,
+ }: RadioInputProps) {
+ return (
+
+
{label}
+
+ {errors[`${name}`] && (
+
{label} is required
+ )}
+
+
+ ```ts copy
+ const radioOptions = [
+ {
+ label: "Full",
+ id: "FULL",
+ },
+ {
+ label: "Half",
+ id: "HALF",
+ },
+ {
+ label: "Quarter",
+ id: "QUARTER",
+ },
+ ];
+
+
+
+
+
+
+ ```
+
+
+
+## Password Input
+
+
+ Install tailwind forms plugin
+
+ ```ts copy
+ "use client";
+import { cn } from "@/lib/utils";
+import React, { useState } from "react";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { CircleHelp, Eye, EyeOff, Mail } from "lucide-react";
+import Link from "next/link";
+type TextInputProps = {
+ register: any,
+ errors: any,
+ label: string,
+ type?: string,
+ name: string,
+ toolTipText?: string,
+ placeholder?: string,
+ forgotPasswordLink?: string,
+ icon?: any,
+};
+export default function PasswordInput({
+ register,
+ errors,
+ label,
+ type = "text",
+ name,
+ toolTipText,
+ icon,
+ placeholder,
+ forgotPasswordLink,
+}: TextInputProps) {
+ const Icon = icon;
+ const [passType, setPassType] = useState(type);
+ return (
+
+
+
+
+ {label}
+
+ {forgotPasswordLink && (
+
+
+ )}
+
+ {toolTipText && (
+
+
+
+
+
+
+
+ {toolTipText}
+
+
+
+ )}
+
+
+
+ {icon && (
+
+
+ )}
+
+ // value === "" ? generatedPassword : value,
+ })}
+ className={cn(
+ "block w-full rounded-md border-0 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 text-sm",
+ (errors[name] && "focus:ring-red-500 pl-8") || (icon && "pl-8")
+ )}
+ placeholder={placeholder || label}
+ />
+
+ setPassType((prev) => (prev === "password" ? "text" : "password"))
+ }
+ className="bg-white py-2 px-3 rounded-tr-md rounded-br-md absolute inset-y-0 right-1 my-[2px] flex items-center"
+ >
+ {passType === "password" ? (
+
+
+ {errors[name] && (
+
{errors[name].message}
+ )}
+
+
+
+ ```ts copy
+
+
+
+## Submit Button and Close Button
+
+
+
+
+ ```ts copy
+ import { Button } from "@/components/ui/button";
+ import { cn } from "@/lib/utils";
+ import { Loader, Plus } from "lucide-react";
+ import React from "react";
+ type SubmitButtonProps = {
+ title: string;
+ loadingTitle?: string;
+ className?: string;
+ loaderIcon?: any;
+ buttonIcon?: any;
+ loading: boolean;
+ showIcon?: boolean;
+ size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+ };
+ export default function SubmitButton({
+ title,
+ loadingTitle = "Saving Please wait...",
+ loading,
+ className,
+ loaderIcon = Loader,
+ buttonIcon = Plus,
+ showIcon = true,
+ }: SubmitButtonProps) {
+ const LoaderIcon = loaderIcon;
+ const ButtonIcon = buttonIcon;
+ return (
+ <>
+ {loading ? (
+
+
+ ) : (
+
+ {showIcon &&
+ )}
+
+ );
+ }
+ ```
+
+
+ ```ts copy
+ import React from "react";
+ import { Button } from "../ui/button";
+ import Link from "next/link";
+
+ export default function CloseButton({
+ href,
+ parent = "inventory",
+ }: {
+ href: string,
+ parent?: string,
+ }) {
+ return (
+
+
+ );
+ }
+
+ ```
+
+
+They are used in the form Form Footer and form header components
+
+
+## Forms, Form Header and Form Footer
+
+
+
+ ```ts copy
+ "use client";
+ import SubmitButton from "@/components/global/FormInputs/SubmitButton";
+ import { Button } from "@/components/ui/button";
+ import { ChevronLeft } from "lucide-react";
+ import { useRouter } from "next/navigation";
+ import React from "react";
+ import CloseButton from "../CloseButton";
+
+type FormHeaderProps = {
+title: string;
+editingId: string | undefined;
+loading: boolean;
+href: string;
+parent?: string;
+};
+export default function FormHeader({
+title,
+editingId,
+loading,
+href,
+parent,
+}: FormHeaderProps) {
+const router = useRouter();
+
+function goBack() {
+router.back();
+}
+return (
+
+{" "}
+
+
+
+
+ Back
+
+
+ {editingId ? "Update" : "Create"} {title}
+
+
+
+
+
+
+ ```ts copy
+ import React from "react";
+import CloseButton from "../CloseButton";
+import SubmitButton from "@/components/global/FormInputs/SubmitButton";
+
+export default function FormFooter({
+ href,
+ editingId,
+ loading,
+ title,
+ parent,
+}: {
+ href: string,
+ editingId: string | undefined,
+ loading: boolean,
+ title: string,
+ parent?: string,
+}) {
+ return (
+
+
+ );
+}
+
+ ```
+
+
+
+ ```ts copy
+ "use client";
+
+import { Button } from "@/components/ui/button";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+
+import FormHeader from "./FormHeader";
+import { useRouter } from "next/navigation";
+import Select from "react-tailwindcss-select";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { CategoryProps, SelectOption } from "@/types/types";
+
+import TextInput from "@/components/global/FormInputs/TextInput";
+import TextArea from "@/components/global/FormInputs/TextArea";
+
+import { generateSlug } from "@/lib/generateSlug";
+import {
+ createCategory,
+ deleteManyCategories,
+ updateCategoryById,
+} from "@/actions/category";
+import toast from "react-hot-toast";
+import SubmitButton from "@/components/global/FormInputs/SubmitButton";
+import ImageInput from "@/components/global/FormInputs/ImageInput";
+import {
+ Options,
+ SelectValue,
+} from "react-tailwindcss-select/dist/components/type";
+import { Category } from "@prisma/client";
+import FormFooter from "./FormFooter";
+import FormSelectInput from "@/components/global/FormInputs/FormSelectInput";
+
+export type SelectOptionProps = {
+ label: string;
+ value: string;
+};
+type CategoryFormProps = {
+ editingId?: string | undefined;
+ initialData?: Category | undefined | null;
+ mainCategories: SelectOptionProps[];
+};
+export default function CategoryForm({
+ editingId,
+ initialData,
+ mainCategories,
+}: CategoryFormProps) {
+ const {
+ register,
+ handleSubmit,
+ reset,
+ formState: { errors },
+ } = useForm({
+ defaultValues: {
+ title: initialData?.title,
+ description: initialData?.description || "",
+ },
+ });
+ const router = useRouter();
+ const initialMainCategoryId = initialData?.mainCategoryId;
+ const initialCategory = mainCategories.find(
+ (item) => item.value === initialMainCategoryId
+ );
+ const [selectedMainCategory, setSelectedMainCategory] =
+ useState(initialCategory);
+ const [loading, setLoading] = useState(false);
+ const initialImage = initialData?.imageUrl || "/placeholder.svg";
+ const [imageUrl, setImageUrl] = useState(initialImage);
+ const initialStatus = {
+ value: initialData?.status == true ? "true" : "false",
+ label: initialData?.status == true ? "Active" : "Disabled",
+ };
+ const [status, setStatus] = useState(initialStatus);
+ const options: Options = [
+ { value: "true", label: "Active" },
+ { value: "false", label: "Disabled" },
+ ];
+ const handleChange = (item: SelectValue) => {
+ console.log("value:", item);
+ setStatus(item);
+ };
+ async function saveCategory(data: CategoryProps) {
+ try {
+ setLoading(true);
+ data.slug = generateSlug(data.title);
+ data.status = status && status.value == "true" ? true : false;
+ data.imageUrl = imageUrl;
+ data.mainCategoryId = selectedMainCategory.value;
+
+ if (editingId) {
+ await updateCategoryById(editingId, data);
+ setLoading(false);
+ // Toast
+ toast.success("Updated Successfully!");
+ //reset
+ reset();
+ //route
+ router.push("/dashboard/inventory/categories");
+ setImageUrl("/placeholder.svg");
+ } else {
+ await createCategory(data);
+ setLoading(false);
+ // Toast
+ toast.success("Successfully Created!");
+ //reset
+ reset();
+ setImageUrl("/placeholder.svg");
+ //route
+ // router.push("/dashboard/inventory/categories");
+ }
+ } catch (error) {
+ setLoading(false);
+ console.log(error);
+ }
+
+}
+// async function handleDeleteAll() {
+// setLoading(true);
+// try {
+// await deleteManyCategories();
+// setLoading(false);
+// } catch (error) {
+// console.log(error);
+// }
+// }
+console.log(status);
+
+return (
+
+
+
+);
+}
+
+ ```
+
+
+
+
+## Custome Code Snippet Component
+
+
+
+ ** Install React Code block Package **
+
+```bash copy
+npm i react-code-blocks
+```
+
+
+
+ ```tsx copy filename="CustomCodeBlock.tsx"
+"use client";
+import { CopyBlock, dracula, github, atomOneLight } from "react-code-blocks";
+
+import React from "react";
+import Link from "next/link";
+type CustomCodeBlock = {
+ codeString: string,
+ language: string,
+ showLineNumbers: boolean,
+ href?: string,
+};
+export default function CustomCodeBlock({
+ codeString,
+ language,
+ showLineNumbers,
+ href = "",
+}: CustomCodeBlock) {
+ return (
+
+ {href ? (
+
+ );
+}
+
+ ```
+
+
+
+ ```tsx copy
+import React from "react";
+import CustomCodeBlock from "./CustomCodeBlock";
+import { Button } from "@/components/ui/button";
+import { getAllProducts } from "@/actions/products";
+import { getProductsCount } from "@/actions/analytics";
+
+export default async function ProductEndpoints() {
+ const productsCount = await getProductsCount();
+ const allProductsCodeString = `
+ {
+ "success":true,
+ "error":null
+ "data":[
+ {
+ "id": "667ce87f0c413652ea95cd31",
+ "name": "5ft Office Table With 3ft Extension",
+ "slug": "5ft-office-table-with-3ft-extension",
+ "productCode": "147642834",
+ "stockQty": 98,
+ "productCost": 100,
+ "productPrice": 200,
+ "alertQty": 10,
+ "productTax": 5,
+ "taxMethod": "inclusive",
+ "productImages": [
+ "https://utfs.io/f/ea7f2510-97a3-4eee-b4ff-f64dad0a9e4a-p0mwdf.jpg",
+ "https://utfs.io/f/77deeb48-ceb8-4702-b9ad-b2b03881aaec-n83ahj.jpg"
+ ],
+ "status": true,
+ "productThumbnail": "https://utfs.io/f/ea7f2510-97a3-4eee-b4ff-f64dad0a9e4a-p0mwdf.jpg",
+ "productDetails": " 5 feet desk and 3 feet extension suitable for middle managers/Supervisors",
+ "content": "Product Details This is the best table i have ever used , it really nice
Portable
Cost effective
Versatile and durable
+
+
+ Get all products
+
+
+ You can access the list of {productsCount} products by using the /products
+ endpoint.
+
+
+
+ Request [GET]
+
+
+
+
+
+
+
+
+ Response [JSON]
+
+
+
+
+
+
+
+
+ Get a Single Product
+
+
+ You can get a single product by adding the slug as a parameter:
+ /products/slug
+
+
+
+ Request [GET]
+
+
+
+
+
+
+
+
+ Response [JSON]
+
+
+
+
+
+
+
+
+```
diff --git a/pages/programming-tutorials/nextjs/stripe-checkout.mdx b/pages/programming-tutorials/nextjs/stripe-checkout.mdx
new file mode 100644
index 00000000..3edba6b8
--- /dev/null
+++ b/pages/programming-tutorials/nextjs/stripe-checkout.mdx
@@ -0,0 +1,418 @@
+# Quick Stripe Guide in Next Js Ecommerce
+
+## Getting started with Next.js, TypeScript, and Stripe Checkout
+
+### Step 1: Clone Git Repository
+
+Start by clone this git repository to simplify the product set up in the store. In the starter Code already have the Cart Functionality with redux.
+
+```bash copy
+git clone https://github.com/MUKE-coder/nextjs-ecom-redux-starter.git
+```
+
+Follow the Prompts and add typescript
+
+### ADD STRIPE SECRET KEY TO YOUR APP
+
+Create .env file and add the secret Key
+
+```
+# Stripe keys
+STRIPE_SECRET_KEY=sk_12345
+```
+
+Most developers will agree that integrating payments into a Next.js application is a complex task that often results in frustrating bugs and setbacks.
+
+## Stripe Checkout for Next.js Applications
+
+Stripe Checkout is a pre-built payment page that allows you to securely collect customer payment information in your Next.js application. It offers a seamless integration with Stripe's payment processing infrastructure to handle payments with just a few lines of code.
+
+Checkout is useful for Next.js developers as it:
+
+- Speeds up implementation of payments by handling complex logic behind the scenes
+- Provides automatic localization and optimization for mobile
+- Allows custom styling to match your brand identity
+- Includes built-in security and compliance
+
+To add Checkout to a Next.js app, you'll need to:
+
+### Set up a Stripe account
+
+First, [sign up for a Stripe account](https://stripe.com/signup). Stripe offers test data and API keys to build out your integration during development.
+
+#### Install Stripe
+
+```bash copy
+ npm install stripe
+```
+
+## Create 2 Important Components
+
+- Create the Cart Page or Cart Modal or Checkout Page , this is page where the checkout session will be initiated . In my case i am initiating from Cart page
+
+### Cart Component
+
+```ts copy
+"use client";
+import { Button } from "@/components/ui/button";
+
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
+import { useAppDispatch, useAppSelector } from "@/store/hooks/hooks";
+import {
+ removeAllProductsFromCart,
+ removeProductFromCart,
+} from "@/store/slices/cartSlice";
+import { url } from "inspector";
+import {
+ Headset,
+ HelpCircle,
+ Loader2,
+ LogOut,
+ Mail,
+ MessageSquareMore,
+ Minus,
+ PhoneCall,
+ Plus,
+ Presentation,
+ Settings,
+ ShoppingCart,
+ Trash,
+ User,
+ UserRound,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function CartMenu() {
+ const router = useRouter();
+ const [loading, setLoading] = useState(false);
+ async function checkout() {
+ const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+ setLoading(true);
+ try {
+ const response = await fetch(`${baseUrl}/api/checkout`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ products: cartItems }),
+ });
+
+ const data = await response.json();
+ console.log(data);
+
+ if (data?.url) {
+ // console.log(response.url);
+ const url = data?.url;
+ setLoading(false);
+ console.log(url);
+ dispatch(removeAllProductsFromCart());
+ window.location.href = url;
+ // router.replace(url);
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ setLoading(false);
+ }
+ }
+ const cartItems = useAppSelector((state) => state.cart.cartItems);
+ console.log(cartItems);
+ const dispatch = useAppDispatch();
+ function handleRemove(id: number) {
+ dispatch(removeProductFromCart(id));
+ }
+ const totalSum = cartItems.reduce(
+ (sum, item) => sum + item.price * item.qty,
+ 0
+ );
+ return (
+
+
+
+ Cart
+
+ {cartItems.length.toString().padStart(2, "0")}
+
+
+
+ {cartItems && cartItems.length > 0 ? (
+
+
+
+ Shopping Cart ({cartItems.length})
+
+
+ {/* CONTENT HWRE */}
+
+ {cartItems.map((item, i) => {
+ return (
+
+
+
+
{item.name}
+ handleRemove(item.id)}
+ className="text-xs flex items-center text-red-500"
+ >
+ Remove
+
+
+
+
+ );
+ })}
+
+
+
+
Total
+
${totalSum.toFixed(2)}
+
+
+
+ {!loading && (
+
+
+ Continue Shopping
+
+
+ )}
+ {loading ? (
+
+
+ ) : (
+
+ Proceed to Checkout
+
+ )}
+
+
+ ) : (
+
+
+
+ Empty Cart
+
+
+ {/* CONTENT HWRE */}
+
+
Your Cart Empty
+
+
+
+
+
+
+ )}
+
+ );
+}
+```
+
+- Create the checkout api route, that will handle the Checkout request by the client
+
+### The Checkout Api Route
+
+````ts copy
+import { CheckoutProductProps } from "@/types/types";
+import { NextRequest, NextResponse } from "next/server";
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+
+async function getActiveProducts() {
+ const stripeProducts = await stripe.products.list();
+ const activeProducts = stripeProducts.data.filter(
+ (item: any) => item.active === true
+ );
+ return activeProducts;
+}
+export async function POST(request: NextRequest) {
+ try {
+ const { products } = await request.json();
+ const checkoutProducts: CheckoutProductProps[] = products;
+ // Creating Stripe Non existing Stripe Products
+ let activeProducts = await getActiveProducts();
+ try {
+ for (const product of checkoutProducts) {
+ const stripeProduct = activeProducts?.find(
+ (stripeProduct: any) =>
+ stripeProduct?.name?.toLowerCase() === product?.name?.toLowerCase()
+ );
+
+ if (stripeProduct === undefined) {
+ const unitAmount = Math.round(product.price * 100);
+
+ const prod = await stripe.products.create({
+ name: product.name,
+ default_price_data: {
+ unit_amount: unitAmount,
+ currency: "usd",
+ },
+ images: [product.image],
+ });
+ console.log(`Product created: ${prod.name}`);
+ } else {
+ console.log("Product already exists");
+ }
+ }
+ } catch (error) {
+ console.error("Error creating products:", error);
+ }
+
+ //Creating Checkout Stripe Items
+ activeProducts = await getActiveProducts();
+ let checkoutStripeProducts: any = [];
+ for (const product of checkoutProducts) {
+ const stripeProduct = activeProducts?.find(
+ (stripeProduct: any) =>
+ stripeProduct?.name?.toLowerCase() === product?.name?.toLowerCase()
+ );
+
+ if (stripeProduct) {
+ checkoutStripeProducts.push({
+ price: stripeProduct?.default_price,
+ quantity: product.qty,
+ });
+ }
+ }
+
+ //Creating Checkout Session
+ const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+ console.log(checkoutStripeProducts);
+ const session = await stripe.checkout.sessions.create({
+ line_items: checkoutStripeProducts,
+ mode: "payment",
+ success_url: `${baseUrl}/success`,
+ cancel_url: `${baseUrl}/cancel`,
+ });
+ console.log(session?.url);
+ return NextResponse.json({
+ url: session?.url,
+ });
+ } catch (error) {
+ console.log(error);
+ }
+}
+
+```ts copy
+
+### The Cancel Page
+
+```ts copy
+
+import React from "react";
+
+export default function page() {
+ return (
+
+
+
+
+ Order Cancelled
+
+
Your order has been cancelled.
+
+ RETURN TO SHOP
+
+
+
+
+
+
+ Order Successful
+
+
Thank you so much for your order.
+
+ CHECK STATUS
+
+
+
+ Note: Do not copy the product ID. Each product can have multiple prices
+ associated with it for example a monthly price as well as an annual price. You
+ want to copy the price ID and pass it later to Stripe checkout.
+
+## Step 5:Create .env file
+```bash copy
+STRIPE_MONTHLY_PRICE_ID=
+STRIPE_YEARLY_PRICE_ID=
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
+NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL_URL=
+NEXT_PUBLIC_BASE_URL ="http://localhost:3000"
+
+````
+## Step 5:Create a Pricing Page.
+
+```ts copy
+"use client";
+import BoldHeading from "@/components/BoldHeading";
+import { Check, Loader2 } from "lucide-react";
+import axios from "axios";
+import React, { useState } from "react";
+import { loadStripe } from "@stripe/stripe-js";
+import toast from "react-hot-toast";
+import { Button } from "@/components/ui/button";
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY!);
+export default function page() {
+ // const user = await currentUser();
+ const [loading, setLoading] = useState(false);
+ async function handleStripe(priceId: string) {
+ setLoading(true);
+ try {
+ const res = await axios.post(`/api/checkout`, {
+ priceId,
+ });
+ if (res.data) {
+ setLoading(false);
+ console.log("data", res.data);
+ }
+ if (res.data.sessionId) {
+ const stripe = await stripePromise;
+ console.log("stripe", stripe);
+
+ const response = await stripe?.redirectToCheckout({
+ sessionId: res.data.sessionId,
+ });
+
+ console.log("response", response);
+
+ return response;
+ } else {
+ console.error("Failed to create checkout session");
+ toast.error("Failed to create checkout session");
+ return;
+ }
+ } catch (error) {
+ setLoading(false);
+ console.log(error);
+ }
+ }
+ const plans = [
+ {
+ title: "Starter",
+ description: "Best option for personal use & for your next project",
+ price: 29,
+ priceId: "price_1PfZLO0748fNmgXYOppKYz3B",
+ features: [
+ " Individual configuration",
+ "No setup, or hidden fees",
+ "Team size: 1 developer",
+ "Premium support: 6 months",
+ "Free updates: 6 months",
+ ],
+ },
+ {
+ title: "Company",
+ description: "Relevant for multiple users, extended & premium support.",
+ price: 99,
+ priceId: "price_1PfZOr0748fNmgXYbfUQgaN3",
+ features: [
+ " Individual configuration",
+ "No setup, or hidden fees",
+ "Team size: 10 developers",
+ "Premium support: 24 months",
+ "Free updates: 24 months",
+ ],
+ },
+ {
+ title: "Enterprise",
+ description:
+ "Best for large scale uses and extended redistribution rights.",
+ price: 499,
+ priceId: "price_1PfZQ50748fNmgXYdBzwfE5x",
+ features: [
+ "Individual configuration",
+ "No setup, or hidden fees",
+ "Team size: 100+ developers",
+ "Premium support: 36 months",
+ "Free updates: 36 months",
+ ],
+ },
+ ];
+ return (
+
+
+
+
+
+ This is Our simplified pricing , save 25% off for every package for
+ a limited period of time
+
+
+
+ {plans.map((plan, i) => {
+ return (
+
+
{plan.title}
+
+ {plan.description}
+
+
+
+ ${plan.price}
+
+
+ /month
+
+
+
+
+ {plan.features.map((feature, i) => {
+ return (
+
+ {feature}
+
+ );
+ })}
+
+
handleStripe(plan.priceId)}
+ className="text-white bg-tertiary-600 hover:bg-tertiary-700 focus:ring-4 focus:ring-tertiary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white dark:focus:ring-tertiary-900"
+ >
+ Get started
+
+
+ );
+ })}
+
+
+ {loading && (
+
+
+ )}
+
+
+ );
+}
+````
+
+## Step 6: Create a Stripe checkout endpoint
+
+We will be using the Stripe hosted checkout page to allow our users to purchase a subscription plan.
+
+In order to redirect users to this page, we will need to setup an API endpoint that will get the ID of the price associated with our subscription.
+
+We will also need to pass a user ID to the Stripe checkout session as metadata in order to retrieve it later when we receive the webhook event.
+
+```ts copy
+// api/payments/create-checkout-session/route.ts
+
+import getCurrentUser from "@/lib/getCurrentUser";
+// import { stripe } from "@/lib/getStripe";
+import { NextRequest, NextResponse } from "next/server";
+// import Stripe from "stripe";
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+// const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function POST(req: NextRequest) {
+ const { priceId } = await req.json();
+ const user = await getCurrentUser();
+ const userId = user.id;
+ const email = user.email;
+ try {
+ const session = await stripe.checkout.sessions.create({
+ payment_method_types: ["card"],
+ line_items: [{ price: priceId, quantity: 1 }],
+ metadata: { userId, email, priceId },
+ mode: "subscription",
+ customer_email: email,
+ billing_address_collection: "auto",
+ success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success?session_id={CHECKOUT_SESSION_ID}&&userId=${userId}`,
+ cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
+ // subscription_data: {
+ // trial_settings: {
+ // end_behavior: {
+ // missing_payment_method: "cancel",
+ // },
+ // },
+ // trial_period_days: 7,
+ // },
+ });
+
+ return NextResponse.json({ sessionId: session.id });
+ // return NextResponse.json(user);
+ } catch (error) {
+ console.error("Error creating checkout session:", error);
+ return NextResponse.json({ error });
+ }
+}
+```
+
+Notice the subscription_data object, which tells Stripe to add a trial period of 7 days. It’s a great way to let your users test the product for free before making the decision to purchase a premium plan.
+
+## Step7: Create prisma Schema
+
+```prisma copy
+generator client {
+ provider = "prisma-client-js"
+}
+
+datasource db {
+ provider = "mongodb"
+ url = env("DATABASE_URL")
+}
+
+enum Plan {
+ free
+ premium
+}
+
+enum SubscriptionPeriod {
+ monthly
+ yearly
+}
+
+model User {
+ id String @id @default(cuid()) @map("_id")
+ email String @unique
+ name String?
+ image String?
+ plan Plan @default(free)
+ customerId String? @unique // Stripe customer ID, this will be important when we need to delete the subscription
+
+ Subscription Subscription?
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+model Subscription {
+ id String @id @default(cuid()) @map("_id")
+ userId String @unique
+ plan Plan
+ period SubscriptionPeriod
+
+ startDate DateTime @default(now())
+ endDate DateTime
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+
+ User User @relation(fields: [userId], references: [id])
+}
+
+```
+
+## Step 8: Setup a webhook event handler
+
+When the user successfully completes the checkout process, Stripe will send webhook events to a webhook event handler, which is an API endpoint on our server that will handle these events by updating our database.
+
+First, in the Stripe dashboard go to Developers > Webhooks > Test in local environment. Then, make sure to install the Stripe CLI on your operating system. Once installed, run the stripe login command in your IDE as well as the listen command to forward Stripe webhook events to /webhook.
+
+```bash copy
+stripe login
+
+stripe listen --forward-to localhost:3000/webhook
+
+```
+
+After running these commands, Stripe should provide you with a webhook secret. Make sure to copy it and put it in a .env file as STRIPE_WEBHOOK_SECRET. We will need it later.
+
+```ts copy
+STRIPE_WEBHOOK_SECRET = whsec_1234;
+```
+
+Now, we can create our webhook event handler API endpoint that will listen to requests at /webhook and process them. Create a folder in the app directory called api/webhook. Add a route.ts file inside.
+
+```ts copy
+import prisma from "@/db/prisma";
+import { stripe } from "@/lib/stripe";
+import Stripe from "stripe";
+
+const WEBHOOK_SECRET = process.env.STRIPE_WEBHOOK_SECRET!;
+
+export async function POST(req: Request) {
+ const body = await req.text();
+
+ const sig = req.headers.get("stripe-signature")!;
+ let event: Stripe.Event;
+
+ try {
+ event = stripe.webhooks.constructEvent(body, sig, WEBHOOK_SECRET);
+ } catch (err: any) {
+ console.error("Webhook signature verification failed.", err.message);
+ return new Response(`Webhook Error: ${err.message}`, { status: 400 });
+ }
+
+ // Handle the event
+ try {
+ switch (event.type) {
+ case "checkout.session.completed":
+ const session = await stripe.checkout.sessions.retrieve(
+ (event.data.object as Stripe.Checkout.Session).id,
+ {
+ expand: ["line_items"],
+ }
+ );
+ const customerId = session.customer as string;
+ const customerDetails = session.customer_details;
+
+ if (customerDetails?.email) {
+ const user = await prisma.user.findUnique({
+ where: { email: customerDetails.email },
+ });
+ if (!user) throw new Error("User not found");
+
+ if (!user.customerId) {
+ await prisma.user.update({
+ where: { id: user.id },
+ data: { customerId },
+ });
+ }
+
+ const lineItems = session.line_items?.data || [];
+
+ for (const item of lineItems) {
+ const priceId = item.price?.id;
+ const isSubscription = item.price?.type === "recurring";
+
+ if (isSubscription) {
+ let endDate = new Date();
+ if (priceId === process.env.STRIPE_YEARLY_PRICE_ID!) {
+ endDate.setFullYear(endDate.getFullYear() + 1); // 1 year from now
+ } else if (priceId === process.env.STRIPE_MONTHLY_PRICE_ID!) {
+ endDate.setMonth(endDate.getMonth() + 1); // 1 month from now
+ } else {
+ throw new Error("Invalid priceId");
+ }
+ // it is gonna create the subscription if it does not exist already, but if it exists it will update it
+ await prisma.subscription.upsert({
+ where: { userId: user.id! },
+ create: {
+ userId: user.id,
+ startDate: new Date(),
+ endDate: endDate,
+ plan: "premium",
+ period:
+ priceId === process.env.STRIPE_YEARLY_PRICE_ID!
+ ? "yearly"
+ : "monthly",
+ },
+ update: {
+ plan: "premium",
+ period:
+ priceId === process.env.STRIPE_YEARLY_PRICE_ID!
+ ? "yearly"
+ : "monthly",
+ startDate: new Date(),
+ endDate: endDate,
+ },
+ });
+
+ await prisma.user.update({
+ where: { id: user.id },
+ data: { plan: "premium" },
+ });
+ } else {
+ // one_time_purchase
+ }
+ }
+ }
+ break;
+ case "customer.subscription.deleted": {
+ const subscription = await stripe.subscriptions.retrieve(
+ (event.data.object as Stripe.Subscription).id
+ );
+ const user = await prisma.user.findUnique({
+ where: { customerId: subscription.customer as string },
+ });
+ if (user) {
+ await prisma.user.update({
+ where: { id: user.id },
+ data: { plan: "free" },
+ });
+ } else {
+ console.error("User not found for the subscription deleted event.");
+ throw new Error("User not found for the subscription deleted event.");
+ }
+
+ break;
+ }
+
+ default:
+ console.log(`Unhandled event type ${event.type}`);
+ }
+ } catch (error) {
+ console.error("Error handling event", error);
+ return new Response("Webhook Error", { status: 400 });
+ }
+
+ return new Response("Webhook received", { status: 200 });
+}
+```
+
+## Steps to Create a Webhook Endpoint in Stripe
+
+- Log in to Your Stripe Dashboard:
+- Navigate to Webhooks Settings:
+- Once logged in, locate the “Developers” section in the dashboard. This section is typically accessible from the left sidebar menu. 3. Access Webhooks:
+
+- Within the “Developers” section, find and click on the “Webhooks” option. This action will take you to the webhooks settings page. 4. Add Endpoint:
+
+- On the webhooks settings page, locate the “Add endpoint” button and click on it to initiate the process of creating a new webhook endpoint. 4. Configure Webhook Endpoint:
+
+- In the “Add Endpoint” form, provide the following details:
+- Endpoint URL: Enter the URL of the server-side endpoint in your application that will receive webhook events from Stripe.
+- Events to Send: Select the types of events you want Stripe to send to this endpoint. You can choose from a list of predefined event types or select “All events” to receive notifications for all event types.
+- Version: Choose the version of the API you want to use for webhook events.
+- Signing Secret (Optional): Optionally, you can generate a signing secret that will be used to sign webhook events for added security. This is recommended to prevent unauthorized access to your webhook endpoint. 5. Save Endpoint:
+
+- After providing the necessary information, click on the “Add Endpoint” or “Save” button to create the webhook endpoint. 6. Click over the webhook, then click on reveal signing secret, past the signing secret in STRIPE_SECRET_WEBHOOK_KEY env variable.
+
+In the webhook event handler, we listen for a specific event called checkout.session.completed. This event is sent by Stripe when the user completes the payment.
+
+Our job is to update the database with the user and subscription. We also verify that the request came from Stripe using the headers.
+
+Here is the Webhooks docs [https://docs.stripe.com/webhooks](https://docs.stripe.com/webhooks)
diff --git a/pages/programming-tutorials/nodejs/_meta.json b/pages/programming-tutorials/nodejs/_meta.json
new file mode 100644
index 00000000..d8b06dd6
--- /dev/null
+++ b/pages/programming-tutorials/nodejs/_meta.json
@@ -0,0 +1,8 @@
+{
+ "setup": "Node Set up with Typescript ",
+ "mvc": "MVC-Versioning and Routing ",
+ "jwt": "Implementing JWT ",
+ "rate": "Implementing Rate Limiting ",
+ "api": "Using API Key to protect the API",
+ "transaction": "Prisma Transactions"
+}
diff --git a/pages/programming-tutorials/nodejs/api.mdx b/pages/programming-tutorials/nodejs/api.mdx
new file mode 100644
index 00000000..982f21e7
--- /dev/null
+++ b/pages/programming-tutorials/nodejs/api.mdx
@@ -0,0 +1,113 @@
+# Creating an API with JWT and API Key Protection in Node.js
+
+In this guide, we will create a Node.js API that uses both JWT (JSON Web Tokens) and API keys to secure endpoints. We'll protect the API key generation endpoint with a JWT access token and then use the generated API key to protect other API endpoints.
+
+## Project Setup
+
+First, install the necessary dependencies:
+
+```bash copy
+npm install express jsonwebtoken crypto
+```
+
+## Basic Project Structure
+
+Below is the complete code for the project:
+
+```ts copy
+import express, { Request, Response, NextFunction } from "express";
+import jwt, { JwtPayload } from "jsonwebtoken";
+import crypto from "crypto";
+
+const app = express();
+app.use(express.json());
+
+// Secret key for signing the JWT (in a real app, store this securely)
+const jwtSecretKey = "your-jwt-secret-key";
+// Storage for API keys (in a real app, use a database)
+const apiKeyStore: Set = new Set();
+
+// Middleware to verify JWT (used for protecting the API key creation endpoint)
+function verifyAccessToken(
+ req: Request,
+ res: Response,
+ next: NextFunction
+): Response | void {
+ const token = req.headers["authorization"];
+
+ if (!token) {
+ return res.status(403).json({ message: "No token provided" });
+ }
+
+ // Remove "Bearer " if the token is provided in "Bearer " format
+ const tokenWithoutBearer = token.replace("Bearer ", "");
+
+ jwt.verify(tokenWithoutBearer, jwtSecretKey, (err, decoded) => {
+ if (err) {
+ return res.status(401).json({ message: "Failed to authenticate token" });
+ }
+ req.user = decoded;
+ next();
+ });
+}
+
+// Middleware to verify API Key
+function verifyApiKey(
+ req: Request,
+ res: Response,
+ next: NextFunction
+): Response | void {
+ const apiKey = req.headers["x-api-key"];
+
+ if (!apiKey) {
+ return res.status(403).json({ message: "No API key provided" });
+ }
+
+ if (!apiKeyStore.has(apiKey)) {
+ return res.status(401).json({ message: "Invalid API key" });
+ }
+
+ next();
+}
+
+// Endpoint to create a new API key (Protected by Access Token)
+app.post(
+ "/api/create-api-key",
+ verifyAccessToken,
+ (req: Request, res: Response) => {
+ // Generate a random API key
+ const apiKey = crypto.randomBytes(32).toString("hex");
+
+ // Store the API key
+ apiKeyStore.add(apiKey);
+
+ // Return the new API key
+ res.status(201).json({ apiKey });
+ }
+);
+
+// Protected endpoint example
+app.get(
+ "/api/protected-resource",
+ verifyApiKey,
+ (req: Request, res: Response) => {
+ res.status(200).json({ message: "Access granted to protected resource" });
+ }
+);
+
+// Start the server
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+ console.log(`Server running on port ${PORT}`);
+});
+```
+
+Explanation
+Access Token Protection (verifyAccessToken)
+This middleware verifies the JWT access token, ensuring that only authenticated users can create API keys. The token is expected to be passed in the Authorization header as a Bearer token.
+API Key Creation Endpoint
+This endpoint is protected by the verifyAccessToken middleware. When accessed, it generates a random API key using crypto.randomBytes, stores it in a Set (apiKeyStore), and returns it to the client.
+API Key Verification (verifyApiKey)
+This middleware verifies that the request includes a valid API key in the x-api-key header. If the key is valid, the request proceeds; otherwise, an error is returned.
+Protected Resource Endpoint
+This endpoint ` (/api/protected-resource)` is an example of how you can protect your API endpoints with the generated API key. The verifyApiKey middleware ensures that only requests with a valid API key can access this endpoint.
diff --git a/pages/programming-tutorials/nodejs/jwt.mdx b/pages/programming-tutorials/nodejs/jwt.mdx
new file mode 100644
index 00000000..ebcab6f5
--- /dev/null
+++ b/pages/programming-tutorials/nodejs/jwt.mdx
@@ -0,0 +1,163 @@
+import { Steps } from "nextra/components";
+
+# How to create and implement Json Web Token (JWT) in node.js with express.js
+
+
+
+### Step 1 : Install Required Packages
+
+```bash copy
+ npm i jsonwebtoken
+ npm install --save @types/jsonwebtoken
+```
+
+### Step 2 : Create a Token Generation Function
+
+```ts copy
+import jwt, { JwtPayload } from "jsonwebtoken";
+
+interface SignOption {
+ expiresIn?: string | number;
+}
+const DEFAULT_SIGN_OPTION: SignOption = {
+ expiresIn: "1h",
+};
+export function generateAccessToken(
+ payload: JwtPayload,
+ options: SignOption = DEFAULT_SIGN_OPTION
+) {
+ const secret = process.env.SECRET_KEY;
+ // Use this command to generate SECRET_KEY: openssl rand -base64 32
+ const token = jwt.sign(payload, secret!, options);
+ return token;
+}
+```
+
+In this code:
+
+`jwt.sign(payload, secretKey, options)`: This function generates a new JWT token using the provided payload, secret key, and options.
+Important Note:
+
+- Secret Key: Make sure to replace 'yourSecretKey' with a strong and secure secret key in a production environment. It's essential to keep the secret key confidential to prevent token manipulation and unauthorized access to your application.
+ Contents for step 2.
+
+### Step 3: Add the token to the Logged in User
+
+- Crate Login Api and Implement JWT Authentication
+ api = '/auth/login'
+
+- Get The User Data From Body .
+- destructure the information from user.
+- Check the (email/user) exist in database or not .
+- if there is not any user with the email we send user not found.
+- if the (user) exist in database we will check the password is valid or not .
+- compare the password in database and the password in the request body.
+- if not matched send response that wrong password.
+- if the email and password is valid create a token .
+- To create a token JsonWebToken (JWT) receive's 3 parameter
+
+- Payload - This contains the claims or data you want to include in the token.
+- Secret Key - A secure key known only to the server used for signing the token.
+- expiration - Additional settings like token expiration or algorithm selection.
+- Don't Provide the secret openly, This secret is very sensitive for the server . keep it in the .env file. I am Keeping it Open just for demonstration.
+
+- After creating the token send the response.
+
+```ts copy
+if (isPasswordCorrect) {
+ const { password, ...userWithoutPass } = existingUser;
+ const accessToken = generateAccessToken(userWithoutPass);
+ const result = {
+ ...userWithoutPass,
+ accessToken,
+ };
+ return res.json(result).status(200);
+} else {
+ return res.status(403).json({
+ user: null,
+ error: "Wrong Credentials",
+ });
+}
+```
+
+Now if we copy the token that we got after the login and go to https://jwt.io/ and past the token and press decode
+
+### Step 4 : Verify the JWT
+
+```ts copy
+import express, { Request, Response, NextFunction } from "express";
+import jwt, { JwtPayload } from "jsonwebtoken";
+
+const app = express();
+
+// Secret key for signing the JWT (in a real app, store this securely)
+const secretKey = "your-secret-key";
+
+// Define a custom type for the request that includes the user property
+interface AuthenticatedRequest extends Request {
+ user?: string | JwtPayload;
+}
+
+// Middleware to verify JWT
+function verifyToken(
+ req: AuthenticatedRequest,
+ res: Response,
+ next: NextFunction
+): Response | void {
+ const token = req.headers["authorization"];
+
+ if (!token) {
+ return res.status(403).json({ message: "No token provided" });
+ }
+
+ // Remove "Bearer " if the token is provided in "Bearer " format
+ const tokenWithoutBearer = token.replace("Bearer ", "");
+
+ jwt.verify(tokenWithoutBearer, secretKey, (err, decoded) => {
+ if (err) {
+ return res.status(401).json({ message: "Failed to authenticate token" });
+ }
+ // If the token is valid, save the decoded information to request for use in other routes
+ req.user = decoded;
+ next();
+ });
+}
+
+// Example protected route
+app.get(
+ "/protected",
+ verifyToken,
+ (req: AuthenticatedRequest, res: Response) => {
+ // If JWT is valid, return the protected content
+ res
+ .status(200)
+ .json({ message: "Welcome to the protected page!", user: req.user });
+ }
+);
+
+// Start the server
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+ console.log(`Server running on port ${PORT}`);
+});
+```
+
+### Protect the Route when a user makes a request
+
+```ts copy
+// Example protected route
+app.get("/protected", verifyToken, (req, res) => {
+ // If JWT is valid, return the protected content
+ res
+ .status(200)
+ .json({ message: "Welcome to the protected page!", user: req.user });
+});
+
+// Start the server
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+ console.log(`Server running on port ${PORT}`);
+});
+```
+
+
diff --git a/pages/programming-tutorials/nodejs/mvc.mdx b/pages/programming-tutorials/nodejs/mvc.mdx
new file mode 100644
index 00000000..43a1e6c6
--- /dev/null
+++ b/pages/programming-tutorials/nodejs/mvc.mdx
@@ -0,0 +1,152 @@
+import DownloadBtn from "../../../components/DownloadBtn";
+
+# MVC
+
+## Download the Presentation
+
+
+### Add the express-rate-limit npm package to your project's dependencies with:
+
+```bash copy
+ npm install express-rate-limit
+```
+
+### Implement the Rate Limiting Blocking Logic in Node.js
+
+```ts copy
+import { rateLimit } from "express-rate-limit";
+```
+
+Create a middlware
+
+```ts copy
+const limiter = rateLimit({
+ windowMs: 5 * 60 * 1000, // 5 minutes
+ limit: 10, // each IP can make up to 10 requests per `windowsMs` (5 minutes)
+ standardHeaders: true, // add the `RateLimit-*` headers to the response
+ legacyHeaders: false, // remove the `X-RateLimit-*` headers from the response
+});
+```
+
+Note that rateLimit accepts an options object and returns the rate limiting middleware. The options used in the example above are:
+
+- windowMs: The time frame where requests are checked for rate limiting. The default value is 60000 (1 minute).
+- limit: The maximum number of connections to allow during the windowMs time span. By default, it's 5.
+- standardHeaders: To enable support for the RateLimit headers recommended by the IETF. The default value is false.
+- legacyHeaders: To send the legacy rate limit X-RateLimit-\* headers in the error responses. The value is true by default.
+ Other useful parameters are:
+
+- message: The response body to return when a request is rate limited. The default message is “Too many requests, please try again later.”
+- statusCode: The HTTP status code to set in the rate limiting error responses. The default value is 429.
+- skipFailedRequests: To avoid counting failed requests in limit. Set to false by default.
+- skipSuccessfulRequests: To avoid counting successful requests in limit. The value is false by default.
+- keyGenerator: The function that contains the logic used to uniquely identify users. By default, it checks the IP address of incoming requests.
+ Check out the Express documentation for a complete list of all options available.
+
+You now know what express-rate-limit has to offer. What's left is to add its rate limiting capabilities to your application. Register the limiter middleware to all endpoints with:
+
+### Step 3 :Add its rate limiting capabilities to your application.
+
+```ts copy
+app.use(limiter);
+```
+
+If you instead want to rate limit APIs under a specific path, use the limiter middleware as below:
+
+```ts copy
+app.use("/public", limiter);
+```
+
+To protect only a certain endpoint, pass limiter as a parameter in the endpoint definition:
+
+```ts copy
+app.get("/hello-world", limiter, (req, res) => {
+ // ...
+});
+```
+
+### Slowing Down Requests With express-slow-down
+
+```bash copy
+npm install express-slow-down
+```
+
+### Step 5 : Implement the Node.js Rate Limiting Slowing Down Logic
+
+```ts copy
+import { rateLimit } from "express-slow-down";
+```
+
+Use it to set up your slowing down rate limiting middleware:
+
+```ts copy
+const limiter = slowDown({
+ windowMs: 15 * 60 * 1000, // 5 minutes
+ delayAfter: 10, // allow 10 requests per `windowMs` (5 minutes) without slowing them down
+ delayMs: (hits) => hits * 200, // add 200 ms of delay to every request after the 10th
+ maxDelayMs: 5000, // max global delay of 5 seconds
+});
+```
+
+The rateLimit function provided by express-slow-down works just like that of express-rate-limit. The main difference is that it supports the following additional options:
+
+- delayAfter: The maximum number of incoming requests allowed during windowMs before the middleware starts delaying their processing. The default value is 1.
+- delayMs: The requests-to-rate-limit delay. It can be the delay itself in milliseconds or a function that defines custom - behavior. By default, it increases the delay by 1 second for every request over the limit.
+- maxDelayMs: The absolute maximum value that delayMs can reach. It defaults to Infinity.
+
+### Step 6 : Apply the limiter middleware to all endpoints or only to some APIs.
+
+```ts copy
+app.use(limiter);
+```
+
+
diff --git a/pages/programming-tutorials/nodejs/setup.mdx b/pages/programming-tutorials/nodejs/setup.mdx
new file mode 100644
index 00000000..c09bd244
--- /dev/null
+++ b/pages/programming-tutorials/nodejs/setup.mdx
@@ -0,0 +1,206 @@
+import { Steps } from "nextra/components";
+import { FileTree } from "nextra/components";
+
+# Node Js Setup with typescript
+
+## Node Js Setup
+
+Install and Verify Node js in your Operating System
+
+Go to [https://nodejs.org/en](https://nodejs.org/en) and download Node JS
+
+
+### Step 1: Create a project folder
+
+```bash copy
+ mkdir nodejs-with-ts
+ cd nodejs-with-ts/
+```
+
+### Step 2 : Initialise a node js project
+
+```bash copy
+ npm init -y
+```
+
+Create a src folder in the root and in it create index.ts file
+
+```ts copy
+console.log(2 + 3);
+```
+
+### Step 3 : Install Typescript with Types
+
+```bash copy
+ npm i -D typescript @types/node
+```
+
+Verify the Installation by running
+
+```bash copy
+ npx tsc -v
+```
+
+### Step 4 : Create Typescript config file
+
+```bash copy
+ npx tsc --init
+```
+
+Modify the generated tsconfig file to this
+
+```ts copy
+{
+ "compilerOptions": {
+ "module": "CommonJS",
+ "target": "ES2016",
+ "noImplicitAny": true,
+ "removeComments": true,
+ "strict": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "rootDir": "./src",
+ "outDir": "./dist",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules"]
+}
+
+```
+
+### Step 5 : Install Other Packages we use in Project
+
+Install express
+
+```bash copy
+ npm install express @types/express
+```
+
+Install dotenv and cors
+
+```bash copy
+ npm install cors dotenv
+```
+
+`cors:` Middleware for enabling Cross-Origin Resource Sharing (CORS) in your application. It allows your server to handle requests from different origins (domains, ports, or protocols), which is essential for accessing resources from a web browser when your frontend and backend are hosted on different domains.
+
+`dotenv:` A module that loads environment variables from a .env file into process.env. It's used to manage sensitive configuration data such as API keys, database connection strings, and other environment-specific settings without hardcoding them in your source code.
+
+Install Bycrpt and its types
+
+```bash copy
+ npm install bcrypt @types/bcrypt
+```
+
+Install Prisma and Prisma Client
+
+```bash copy
+ npm install prisma @prisma/client
+```
+
+prisma: This is the Prisma CLI, which is used to manage your Prisma schema, generate the Prisma Client, and run database migrations. It's essential for setting up and managing your database schema with Prisma.
+
+@prisma/client: This is the auto-generated database client that is tailored to your Prisma schema. It provides a strongly-typed, intuitive API for interacting with your database, making it easy to query and manipulate data with TypeScript support.
+
+Install Build Tools
+
+```bash copy
+ npm install --save-dev tsc-alias ts-node-dev tsconfig-paths
+```
+
+** tsc-alias **: A tool that replaces path aliases in compiled JavaScript files after the TypeScript compiler (tsc) runs. It allows you to use path aliases (e.g., @/components) defined in tsconfig.json in your TypeScript code and ensures they are correctly resolved in the output files.
+
+** ts-node-dev **: A development tool that automatically restarts your Node.js application when file changes are detected. It is similar to nodemon but optimized for TypeScript. It also provides faster restarts by using ts-node for on-the-fly TypeScript compilation and caching the results.
+
+** tsconfig-paths **: A package that enables Node.js to recognize and resolve path aliases defined in your tsconfig.json when running TypeScript directly (e.g., with ts-node or ts-node-dev). This ensures that modules can be imported using the defined aliases instead of relative paths.
+
+### Step 6 : Modify the Script in your package.json file
+
+```ts copy
+"scripts": {
+ "dev": "tsnd --respawn -r tsconfig-paths/register --pretty --transpile-only ./src/index.ts",
+ "build": "tsc && tsc-alias",
+ "start": "node ./dist",
+ "postinstall": "prisma generate"
+ },
+```
+
+### Step 7 : Project File Structure
+
+
+
+
+
+
+
+
+
+
+### Step 8 : Create an express server
+
+Modify your src/index.ts to this
+
+```ts copy
+import express from "express"; // Import the Express framework
+
+require("dotenv").config(); // Load environment variables from a .env file into process.env
+const cors = require("cors"); // Import the CORS middleware
+const app = express(); // Create an Express application instance
+
+app.use(cors()); // Enable Cross-Origin Resource Sharing (CORS) for all routes
+
+const PORT = process.env.PORT || 8000; // Set the server's port from environment variables or default to 8000
+
+app.use(express.json()); // Parse incoming JSON requests and make the data available in req.body
+
+app.listen(PORT, () => {
+ // Start the server and listen on the specified port
+ console.log(`Server is running on http://localhost:${PORT}`); // Log a message indicating the server is running
+});
+```
+
+Summary of What the Code Does:
+
+Express Setup: The code sets up an Express server, a popular Node.js framework for building web applications and APIs.
+
+Environment Variables: The dotenv package is used to load environment variables from a .env file, making them accessible via process.env.
+
+CORS Middleware: The cors middleware is used to enable Cross-Origin Resource Sharing, which allows the server to handle requests from different domains.
+
+Port Configuration: The server's port is set based on the PORT environment variable, or it defaults to 8000 if not specified.
+
+JSON Parsing: The express.json() middleware is used to automatically parse incoming JSON payloads and make them available in req.body.
+
+Server Start: The server is started by calling app.listen(), and it listens for incoming requests on the specified port, logging a message once it is running.
+
+### Step 9 Create a simple API Enpoint
+
+```ts copy
+import express, { Request, Response } from "express";
+// GET REQUEST
+app.get("/customers", (req: Request, res: Response) => {
+ const customers = [
+ { name: "John Doe", email: "john.doe@example.com", phone: "+1234567890" },
+ {
+ name: "Joel Smith",
+ email: "joel.smith@example.com",
+ phone: "+0987654321",
+ },
+ ];
+
+ return res.status(200).json(customers);
+});
+```
+
+
diff --git a/pages/programming-tutorials/nodejs/transaction.mdx b/pages/programming-tutorials/nodejs/transaction.mdx
new file mode 100644
index 00000000..95f807d9
--- /dev/null
+++ b/pages/programming-tutorials/nodejs/transaction.mdx
@@ -0,0 +1,212 @@
+# Creating a Prisma Transaction
+
+```ts copy
+import prisma from "@/lib/db";
+import { generateOrderNumber } from "@/lib/generateOrderNumber";
+import { ILineOrder } from "@/types/types";
+import { NotificationStatus } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+
+interface OrderLineItem {
+ id: string;
+ name: string;
+ price: number;
+ qty: number;
+ productThumbnail: string;
+}
+
+interface CustomerData {
+ customerId: string;
+ customerName: string;
+ customerEmail: string;
+ firstName?: string;
+ lastName?: string;
+ email?: string;
+ phone?: string;
+ streetAddress?: string;
+ apartment?: string;
+ city?: string;
+ state?: string;
+ zipCode?: string;
+ country?: string;
+ method?: string;
+}
+interface NewOrderProps {
+ orderItems: OrderLineItem[];
+ orderAmount: number;
+ orderType: string;
+ source: string;
+}
+type NotificationProps = {
+ message: string;
+ status?: NotificationStatus;
+ statusText: string;
+};
+export async function createNotification(data: NotificationProps) {
+ try {
+ const newNot = await prisma.notification.create({
+ data,
+ });
+ revalidatePath("/dashboard");
+ return newNot;
+ } catch (error) {
+ console.log(error);
+ }
+}
+export async function updateNotificationStatusById(id: string) {
+ try {
+ const updatedNot = await prisma.notification.update({
+ where: {
+ id,
+ },
+ data: {
+ read: true,
+ },
+ });
+ revalidatePath("/dashboard");
+ return updatedNot;
+ } catch (error) {
+ console.log(error);
+ }
+}
+export async function getNotifications() {
+ try {
+ const notifications = await prisma.notification.findMany({
+ orderBy: {
+ createdAt: "desc",
+ },
+ where: {
+ read: false,
+ },
+ });
+ return notifications;
+ } catch (error) {
+ console.log(error);
+ }
+}
+export async function createLineOrder(
+ newOrder: NewOrderProps,
+ customerData: CustomerData
+) {
+ const { orderItems, orderAmount, orderType, source } = newOrder;
+ try {
+ const lineOrderId = await prisma.$transaction(async (transaction) => {
+ // Create the Line Order
+ const lineOrder = await transaction.lineOrder.create({
+ data: {
+ customerId: customerData.customerId,
+ customerName: customerData.customerName,
+ customerEmail: customerData.customerEmail,
+ // Personal Details
+ firstName: customerData.firstName,
+ lastName: customerData.lastName,
+ phone: customerData.phone,
+ email: customerData.email,
+ // Shipping address
+ streetAddress: customerData.streetAddress,
+ apartment: customerData.apartment,
+ city: customerData.city,
+ state: customerData.state,
+ zipCode: customerData.zipCode,
+ country: customerData.country,
+ paymentMethod: customerData.method,
+ // payment Method
+ orderNumber: generateOrderNumber(),
+ orderAmount,
+ orderType,
+ source,
+ status: source === "pos" ? "DELIVERED" : "PROCESSING",
+ },
+ });
+
+ for (const item of orderItems) {
+ // Update Product stock quantity
+ const updatedProduct = await transaction.product.update({
+ where: { id: item.id },
+ data: {
+ stockQty: {
+ decrement: item.qty,
+ },
+ },
+ });
+
+ if (!updatedProduct) {
+ throw new Error(`Failed to update stock for product ID: ${item.id}`);
+ }
+
+ if (updatedProduct.stockQty < updatedProduct.alertQty) {
+ // Send/Create the Notification
+ const message =
+ updatedProduct.stockQty === 0
+ ? `The stock of ${updatedProduct.name} is out. Current stock: ${updatedProduct.stockQty}.`
+ : `The stock of ${updatedProduct.name} has gone below threshold. Current stock: ${updatedProduct.stockQty}.`;
+ const statusText =
+ updatedProduct.stockQty === 0 ? "Stock Out" : "Warning";
+ const status: NotificationStatus =
+ updatedProduct.stockQty === 0 ? "DANGER" : "WARNING";
+
+ const newNotification = {
+ message,
+ status,
+ statusText,
+ };
+ await createNotification(newNotification);
+ // Send email
+ }
+ // Create Line Order Item
+ const lineOrderItem = await transaction.lineOrderItem.create({
+ data: {
+ orderId: lineOrder.id,
+ productId: item.id,
+ name: item.name,
+ price: item.price,
+ qty: item.qty,
+ productThumbnail: item.productThumbnail,
+ },
+ });
+
+ if (!lineOrderItem) {
+ throw new Error(
+ `Failed to create line order item for product ID: ${item.id}`
+ );
+ }
+
+ // Create Sale
+ const sale = await transaction.sale.create({
+ data: {
+ orderId: lineOrder.id,
+ productId: item.id,
+ qty: item.qty,
+ salePrice: item.price,
+ productName: item.name,
+ productImage: item.productThumbnail,
+ customerName: customerData.customerName,
+ customerEmail: customerData.customerEmail,
+ },
+ });
+
+ if (!sale) {
+ throw new Error(`Failed to create sale for product ID: ${item.id}`);
+ }
+ }
+ // console.log(savedLineOrder);
+ revalidatePath("/dashboard/sales");
+ return lineOrder.id;
+ });
+
+ const savedLineOrder = await prisma.lineOrder.findUnique({
+ where: {
+ id: lineOrderId,
+ },
+ include: {
+ lineOrderItems: true,
+ },
+ });
+ // console.log(savedLineOrder);
+ return savedLineOrder as ILineOrder;
+ } catch (error) {
+ console.error("Transaction error:", error);
+ throw error; // Propagate the error to the caller
+ }
+}
+```
diff --git a/pages/roadmaps/_meta.json b/pages/roadmaps/_meta.json
new file mode 100644
index 00000000..347cea40
--- /dev/null
+++ b/pages/roadmaps/_meta.json
@@ -0,0 +1,5 @@
+{
+ "index": "Introduction",
+ "role-based": "Role Based Roadmaps",
+ "skill-based": "Skill based Roadmaps"
+}
diff --git a/pages/roadmaps/index.mdx b/pages/roadmaps/index.mdx
new file mode 100644
index 00000000..02ac95fa
--- /dev/null
+++ b/pages/roadmaps/index.mdx
@@ -0,0 +1,16 @@
+{/* https://nextra.site/docs/guide/built-ins/cards#usage */}
+import { Cards, Card } from "nextra/components";
+import { GitPullRequest, Milestone } from "lucide-react";
+
+
+
diff --git a/pages/roadmaps/role-based/_meta.json b/pages/roadmaps/role-based/_meta.json
new file mode 100644
index 00000000..fb2e3680
--- /dev/null
+++ b/pages/roadmaps/role-based/_meta.json
@@ -0,0 +1,20 @@
+{
+ "index": "Introduction",
+ "roadmaps": "Roadmaps Must see",
+ "programming-tutorials": "Desishub Lessons",
+ "youtube": "YouTube Video Tutorials",
+ "website": "Website Templates Guides",
+ "course-guides": "Course Guides",
+ "courses": "Desishub Courses",
+ "how-to": "How to Guides",
+ "about": {
+ "title": "About",
+ "type": "page"
+ },
+ "contact": {
+ "title": "Contact ↗",
+ "type": "page",
+ "href": "https://twitter.com/shuding_",
+ "newWindow": true
+ }
+}
diff --git a/pages/roadmaps/role-based/ai-data.mdx b/pages/roadmaps/role-based/ai-data.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/android.mdx b/pages/roadmaps/role-based/android.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/backend.mdx b/pages/roadmaps/role-based/backend.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/blockchain.mdx b/pages/roadmaps/role-based/blockchain.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/cyber-security.mdx b/pages/roadmaps/role-based/cyber-security.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/devops.mdx b/pages/roadmaps/role-based/devops.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/flutter.mdx b/pages/roadmaps/role-based/flutter.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/frontend.mdx b/pages/roadmaps/role-based/frontend.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/fullstack.mdx b/pages/roadmaps/role-based/fullstack.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/game-dev.mdx b/pages/roadmaps/role-based/game-dev.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/role-based/index.mdx b/pages/roadmaps/role-based/index.mdx
new file mode 100644
index 00000000..a199dc32
--- /dev/null
+++ b/pages/roadmaps/role-based/index.mdx
@@ -0,0 +1,3 @@
+https://roadmap.sh/
+https://roadmap.sh/best-practices
+https://roadmap.sh/questions
diff --git a/pages/roadmaps/role-based/react-native.mdx b/pages/roadmaps/role-based/react-native.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/_meta.json b/pages/roadmaps/skill-based/_meta.json
new file mode 100644
index 00000000..fb2e3680
--- /dev/null
+++ b/pages/roadmaps/skill-based/_meta.json
@@ -0,0 +1,20 @@
+{
+ "index": "Introduction",
+ "roadmaps": "Roadmaps Must see",
+ "programming-tutorials": "Desishub Lessons",
+ "youtube": "YouTube Video Tutorials",
+ "website": "Website Templates Guides",
+ "course-guides": "Course Guides",
+ "courses": "Desishub Courses",
+ "how-to": "How to Guides",
+ "about": {
+ "title": "About",
+ "type": "page"
+ },
+ "contact": {
+ "title": "Contact ↗",
+ "type": "page",
+ "href": "https://twitter.com/shuding_",
+ "newWindow": true
+ }
+}
diff --git a/pages/roadmaps/skill-based/angular.mdx b/pages/roadmaps/skill-based/angular.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/aws.mdx b/pages/roadmaps/skill-based/aws.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/computer-science.mdx b/pages/roadmaps/skill-based/computer-science.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/docker.mdx b/pages/roadmaps/skill-based/docker.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/golang.mdx b/pages/roadmaps/skill-based/golang.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/javascript.mdx b/pages/roadmaps/skill-based/javascript.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/kubernettes.mdx b/pages/roadmaps/skill-based/kubernettes.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/mongo.mdx b/pages/roadmaps/skill-based/mongo.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/node.mdx b/pages/roadmaps/skill-based/node.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/prompt-engineering.mdx b/pages/roadmaps/skill-based/prompt-engineering.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/python.mdx b/pages/roadmaps/skill-based/python.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/react.mdx b/pages/roadmaps/skill-based/react.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/sql.mdx b/pages/roadmaps/skill-based/sql.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/typescript.mdx b/pages/roadmaps/skill-based/typescript.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/roadmaps/skill-based/vue.mdx b/pages/roadmaps/skill-based/vue.mdx
new file mode 100644
index 00000000..e69de29b
diff --git a/pages/youtube/_meta.json b/pages/youtube/_meta.json
new file mode 100644
index 00000000..18015fc8
--- /dev/null
+++ b/pages/youtube/_meta.json
@@ -0,0 +1,4 @@
+{
+ "index": "Introduction",
+ "medical-app": "Medical App Docs "
+}
diff --git a/pages/youtube/index.mdx b/pages/youtube/index.mdx
new file mode 100644
index 00000000..2b852b68
--- /dev/null
+++ b/pages/youtube/index.mdx
@@ -0,0 +1,8 @@
+{/* https://nextra.site/docs/guide/built-ins/cards#usage */}
+import { Cards, Card } from "nextra/components";
+import { GitPullRequest, Milestone } from "lucide-react";
+
+
+
diff --git a/pages/youtube/medical-app/_meta.json b/pages/youtube/medical-app/_meta.json
new file mode 100644
index 00000000..e64c62d0
--- /dev/null
+++ b/pages/youtube/medical-app/_meta.json
@@ -0,0 +1,4 @@
+{
+ "index": "Introduction",
+ "intro": "Building Medical App "
+}
diff --git a/pages/youtube/medical-app/index.mdx b/pages/youtube/medical-app/index.mdx
new file mode 100644
index 00000000..9af9ffee
--- /dev/null
+++ b/pages/youtube/medical-app/index.mdx
@@ -0,0 +1,343 @@
+## Adding Multi-step Carousel
+
+Both the Telehealth and Inperson Visit Uses Carousel.
+We will use mult-
+
+## Single Category List Component
+
+```js copy
+import Link from "next/link";
+import React from "react";
+import CategoryCarousel from "./CategoryCarousel";
+
+export default function CategoryList({ category }) {
+ return (
+
+
+
{category.title}
+
+
+
+
+ {products.map((product, i) => {
+ return
+ );
+}
+```
+
+## Here is the Product Component
+
+```js copy
+"use client";
+import { addToCart } from "@/redux/slices/cartSlice";
+import { BaggageClaim } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import toast from "react-hot-toast";
+import { useDispatch } from "react-redux";
+
+export default function Product({ product }) {
+ const dispatch = useDispatch();
+ function handleAddToCart() {
+ // Dispatch the reducer
+ dispatch(addToCart(product));
+ toast.success("Item added Successfully");
+ }
+ return (
+
+
+
+
+
+
+
+ {product.title}
+
+
+
+
UGX {product.salePrice}
+
handleAddToCart()}
+ className="flex items-center space-x-2 bg-lime-600 px-4 py-2 rounded-md text-white"
+ >
+ Add
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {" "}
+ Search{" "}
+
+
+
+
+
+
+
+
+
+ {" "}
+ 2{" "}
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+ {user?.name}
+
+ {user.email}
+
+
+
Dashboard
+
Settings
+
Earnings
+
+
Sign out
+
+
+
+
+ );
+}
+```
+
+## Sidebar Component
+
+```ts copy
+import { BarChart, Folder, Grid2X2, Home, Settings } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import LogoutButton from "./LogoutButton";
+import { getCategories } from "@/actions/categories";
+
+export default async function Sidebar() {
+ const categories = (await getCategories()) || [];
+ return (
+
+
+
+
+
+
+
+ Analytics
+
+
+
+
+
+
+
+
+
+
+
+
+
My Project ,
+ logo: Desishub ,
project: {
- link: 'https://github.com/shuding/nextra-docs-template',
+ link: "https://github.com/MUKE-coder",
},
chat: {
- link: 'https://discord.com',
+ link: "https://www.youtube.com/@JBWEBDEVELOPER",
+ icon: (
+
+
+
+
+ ),
},
- docsRepositoryBase: 'https://github.com/shuding/nextra-docs-template',
+ docsRepositoryBase: "https://github.com/shuding/nextra-docs-template",
footer: {
- text: 'Nextra Docs Template',
+ text: "Developed with ❤️ By JB Web Developer",
},
-}
+};
-export default config
+export default config;