DOCKET APPLICATION USING APPWRITE
Tags: appwritehack, javascript, programming
Published: 2022-05-11 11:35:53

## APPWRITE HACKATHON

A Simple DOCKET APPLICATION using Appwrite and javascript. If we simply want to try out try out this App, go ahead and check out the code,

## Getting Started

## INSTALL APPWRITE

Follow us our simple Installation Guide to get Appwrite up and running in our system.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ewrwsiwrnatqfagg8rq.png)

we need to make a few configuration changes to your Appwrite server  for the project.

1.Add a new Web App in Appwrite and enter the endpoint of your website.

`(localhost, <project-name>.vercel.app etc)` 

2.Create a new collection with the following properties.

- Attributes Add the following attributes to the collection.

```
Note:
    make sure that your Attribute ID exactly matches the key in 
    the images.

```
- Add the boolean Attribute.

 
```
PERMISSION: Add the following permissions to your 
  collection.These permissions ensure that only registered users 
  can access the collection.

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m006zzucqnzoz8dus3t.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86f35my13bugo5q6utc3.png)

```
For CMD code:
```

`docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:0.13.4
`

use the code while installing the APPWRITE in CMD.
and use the code in powershell as,

```
For Powershell code:
```

`docker run -it --rm ,
    --volume /var/run/docker.sock:/var/run/docker.sock ,
    --volume ${pwd}/appwrite:/usr/src/code/appwrite:rw ,
    --entrypoint="install" ,
    appwrite/appwrite:0.13.4`

## DEPLOY THE FRONT END

you have two options to deploy the front-end and we will cover both of them here. In either case, you will need to fill in these environment variables that help your frontend connect to Appwrite.

```
  VITE_APP_ENDPOINT-Your Appwrite endpoint.
  VITE_APP_PROJECT-Your Appwrite project ID.
  VITE_APP_COLLECTION_ID-Your Appwrite collection ID

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fblxfb014t61zku07vu.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj4ytintqse5ht50bjab.png)
## Run locally

Follow these instructions to run the demo app locally

`$ git clone https://github.com/appwrite/todo-with-vue
$ cd todo-with-vue`

Run the following command to generate your .env vars

`$ cp .env.example .env`

Now fill in the envrionment variables we discussed above in your .env

Now run the following commands and you should be good to go,,

`$ npm install
$ npm run dev`

## GITHUB REPOSITORY

https://github.com/maturusupriya/Docket.git


## Submission Category: 

```
WEB2 WIZARDS
```

## Link to Code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qzmgrsdpasyohv55mk4.png)

`module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}`
 
POST THE DOCUMENT IN CSS USING .js

## Additional Resources

## Appwrite link:

https://appwrite.io/

## Docker link:

https://www.docker.com/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hltsnvjz5nj9ihef1id2.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umbrsvydae0kf7cvhhem.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2vwyn8dolic44ty3r0i0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4us2z92phoeol9kxs32.png)

#APPWRITE  #DOCKET APPLICATION  #WEB2 WIZARD  #HTML #CSS