docs: add docs update

Signed-off-by: sarthakjdev <[email protected]>

apps/js.wapikit.com/guide/building-your-application/building-message-components.mdx

@@ -0,0 +1,125 @@
+---
+title: Building Message Components
+description: Build message components with ease using the Wapi.js SDK
+---
+
+Wapi.js SDK provides a simaple and easy to use classes architecture to build message components. You can build message component of following types using the Wapi.js SDK:
+
+- [Text Message](#text-message)
+- [Image Message](#image-message)
+- [Video Message](#video-message)
+- [Audio Message](#audio-message)
+- [Document Message](#document-message)
+- [Location Message](#location-message)
+- [Contact Message](#contact-message)
+- [Reply Message](#reply-message)
+- [Reaction Message](#reaction-message)
+- [List Message](#list-message)
+- [QuickReply ButtonMessage](#quickreply-buttonmessage)
+- [Button Message](#button-message)
+- [Product Message](#product-message)
+- [Product List Message](#product-list-message)
+
+<Tip> With the rapidly changing whatsapp business platform features and offerings, we try our best to be in sync with the new features provided by the API. If you think we are missing upon any of the available type of message support. You can open a github issue [here](https://github.com/sarthakjdev/wapi.js/issues) or direclty [contact](/guide/contact) the maintainer of the project.</Tip>
+
+### Text Message
+
+Text message is the most basic message component that you can send to a user. You can create a text message using the following code:
+
+```typescript
+
+
+```
+
+### Image Message
+
+Image message is a message component that you can use to send images to a user. You can create a image message using the following code:
+
+```typescript
+```
+
+### Video Message
+
+Video message is a message component that you can use to send videos to a user. You can create a video message using the following code:
+
+```typescript
+```
+
+### Audio Message
+
+Audio message is a message component that you can use to send audio files to a user. You can create a audio message using the following code:
+
+```typescript
+```
+
+### Document Message
+
+Document message is a message component that you can use to send documents to a user. You can create a document message using the following code:
+
+```typescript
+```
+
+### Location Message
+
+Location message is a message component that you can use to send location to a user. You can create a location message using the following code:
+
+```typescript
+```
+
+### Contact Message
+
+Contact message is a message component that you can use to send contact details to a user. You can create a contact message using the following code:
+
+```typescript
+```
+
+### Reply Message
+
+Reply message is a message component that you can use to send a reply to a message. You can create a reply message using the following code:
+
+```typescript
+```
+
+### Reaction Message
+
+Reaction message is a message component that you can use to send a reaction to a message. You can create a reaction message using the following code:
+
+```typescript
+```
+
+### List Message
+
+List message is a message component that you can use to send a list of items to a user. You can create a list message using the following code:
+
+```typescript
+```
+
+### QuickReply ButtonMessage
+
+QuickReply ButtonMessage is a message component that you can use to send a quick reply button to a user. You can create a quick reply button message using the following code:
+
+```typescript
+```
+
+### Button Message
+
+Button message is a message component that you can use to send a button to a user. You can create a button message using the following code:
+
+```typescript
+```
+
+### Product Message
+
+Product message is a message component that you can use to send a product to a user. You can create a product message using the following code:
+
+```typescript
+```
+
+
+### Product List Message
+
+Product List message is a message component that you can use to send a list of products to a user. You can create a product list message using the following code:
+
+```typescript
+```
+

apps/js.wapikit.com/guide/building-your-application/creating-wapi-client.mdx

@@ -0,0 +1,50 @@
+---
+title: Initiating the Wapi.js SDK
+---
+
+
+Wapi.js SDK provides a single client utility per phone number basis, this means you can create a client with your Whatsapp Business Account regisytered phone numnber and you whatsapp business account id.
+
+### Creating a client
+
+To create a client, you need to provide the following details:
+
+- **Phone number**: The phone number of the whatsapp business account
+- **Whatsapp Business Account ID**: The whatsapp business account id of the whatsapp business account
+- **Whatsapp Business Account Token**: The whatsapp business account token of the whatsapp business account
+
+
+<Tip>Now, to get the above details do checkout our guide on how to setup the whatsapp api to start building your application [here](/guide/whatsapp-api-setup)</Tip>
+
+```typescript
+
+// creating a wapi.js client
+
+import { Client } from '@wapijs/wapi.js'
+
+export const whatsappClient = new Client({
+	apiAccessToken: <WHATSAPP_API_ACCESS_TOKEN>,
+	businessAccountId: WHATSAPP_BUSINESS_ACCOUNT_ID,
+	phoneNumberId: WHATSAPP_PHONE_NUMBER_ID,
+	port: 8080, // the port you want your webhook to be exposed on
+	webhookEndpoint: '/webhook', // the endpoint where the webhook will be exposed
+	webhookSecret: WHATSAPP_WEBHOOK_SECRET // the secret key for the webhook, this would later be added to the whatsapp business account to verify the integrity of the webhook.
+})
+
+```
+
+### Initiating the client
+
+To initiate the client, you need to call the `initiate` method on the client instance. This method ensures that your webhook server is up and running and listening to the incoming event from the whatsapp business platform.
+
+<Warning>This method must be called at the very end of the application flow logic, which ensures that all the event listeners the application intend to listen to must be attached before initiating the client.</Warning>
+
+```typescript
+
+// assuming you have already instantiated the client from the above guide
+
+whatsappClient.initiate()
+
+// by calling 
+
+```

apps/js.wapikit.com/guide/building-your-application/handling-media.mdx

@@ -0,0 +1,26 @@
+---
+title: Handling Media
+description: Learn how to handle media messages using the Wapi.js SDK
+---
+
+
+Officially Whatsapp supports uploading of media via API, getting Media Url from media Id and deleting the media. But the SDK as of now only supports the two features: 
+
+- [Getting media Url from media Id](#getting-media-url-from-media-id)
+- [Deleting the media](#deleting-media)
+
+
+## Getting media Url from media Id
+
+You can get the media Url from media Id using the `getMediaUrl` method available on the [client](api-reference/classes/Client) class media manager. Here is an example of how you can get the media Url:
+
+```typescript
+```
+
+
+## Deleting media
+
+You can delete a media using the `deleteMedia` method available on the [client](api-reference/classes/Client) class media manager. Here is an example of how you can delete the media:
+
+```typescript
+```

apps/js.wapikit.com/guide/building-your-application/replying-and-reacting.mdx

@@ -0,0 +1,52 @@
+---
+title: Replying and Reacting to messages
+description: Learn how to reply and react to messages using the Wapi.js SDK
+---
+
+
+There are mainly two ways you can initiate a reply or a reaction to a message in Wapi.js:
+
+## Via Incoming Message Event
+
+You can listen to incoming messages and reply to them using the `on` method available on the [client](api-reference/classes/Client) event. Here is an example of how you can listen to incoming messages and reply/react to them:
+
+```typescript
+
+// assuming you already have initiated the client,
+// you can do the following to reply to incoming messages
+
+whatsappClient.on('TextMessage', async message => {
+		await message.reply({
+			message: new TextMessage({
+				text: 'This is a reply.'
+			})
+		})
+        await message.react({
+            emoji: '😄'
+        })
+})
+
+// in the similar way, any incoming message event, 
+// which is not a System event can be replied back to.
+```
+
+
+## Via Sending a Reaction or Reply message
+
+You can also send a message of type `Reply` or `Reaction` to a message. Here is an example of how you can send a reply or a reaction to a message:
+
+```typescript
+
+// assuming you already have initiated the client,
+
+const replyMessageComponent = new ReplyMessage({
+    message: new TextMessage({
+        text: 'This is a reply.'
+    })
+})
+
+
+// send a reaction message
+await whatsappClient.message.send
+
+```

apps/js.wapikit.com/guide/building-your-application/sending-messages.mdx

@@ -0,0 +1,30 @@
+---
+title: Sending Messages
+description: Learn how to send messages using the Wapi.js SDK
+---
+
+Wapi.js SDK provides a simple and easy to use classes architecture to send messages. You can send message of following types using the Wapi.js SDK:
+
+## Send a message
+
+You can send a message to a user using the `send` method available on the [client](api-reference/classes/Client) class message manager. Here is an example of how you can send a message:
+
+
+
+```typescript
+// assuming you already have initiated the client,
+const textMessage = new TextMessage({
+    text: 'Hello, how are you?'
+})
+
+// send a message
+const response = await whatsappClient.message.send({
+    to: '919876543210',
+    message: message
+})
+```
+
+<Warning>The .send() method is a asynchronous method and returns a promise of response which can either be a success response or a error response. It is suggested to acknowledge the response, as calling the .send() method does not gurantees the message has been sent, there may be some API error which may lead to message not being sent, the SDK does not retries the message, it is the application login responsibility to add retry mechanism. However, if you think this should be added to the SDK itlsef, you are invited to open a issue on the github repository of the SDK. </Warning>
+
+
+

apps/js.wapikit.com/guide/contact.mdx

@@ -0,0 +1,12 @@
+---
+Title: Contacts
+Description: You can contact us using the following methods
+---
+
+The prefered way to contact us by email at [email protected].
+
+But you can also reach out to us here:
+
+- Twitter/X: @sarthakjdev or @softlancerhq
+- Linkedin: https://www.linkedin.com/in/sarthakjdev/
+- Github: https://www.github.com/sarthakjdev

apps/js.wapikit.com/guide/contributing.mdx

@@ -0,0 +1,35 @@
+---
+title: Contributing to Wapi.js
+description: Checkout the ways you can contribute to Wapi.js
+---
+
+Wapi.js is an open source project and we welcome contributions from the community. There are many ways you can contribute to the project:
+
+- Reporting bugs
+- Suggesting new features
+- Writing documentation
+- Submitting pull requests
+- Helping others in the community
+- Sharing the project with others
+
+
+## Reporting bugs
+
+If you find a bug in the project, please report it by creating a new issue in the project's GitHub repository. Make sure to include as much information as possible, including the steps to reproduce the bug and the expected behavior.
+
+## Suggesting new features
+
+If you have an idea for a new feature that you would like to see in the project, please create a new issue in the project's GitHub repository. Make sure to include a detailed description of the feature and why you think it would be beneficial to the project.
+
+
+## Writing documentation
+
+Documentation is an important part of any project, and we welcome contributions to the project's documentation. If you find any errors or omissions in the documentation, please create a new issue in the project's GitHub repository. You can also submit a pull request with the changes you would like to see.
+
+## Submitting pull requests
+
+If you would like to contribute code to the project, you can do so by submitting a pull request. Make sure to follow the project's coding standards and guidelines, and include a detailed description of the changes you are proposing.
+
+## Helping others in the community
+
+If you are experienced with the project and would like to help others in the community, you can do so by answering questions on the project's GitHub repository or forum. Sharing your knowledge and expertise with others is a great way to contribute to the project.