DEV Community

Cover image for DOCKET APPLICATION USING APPWRITE
supriya maturu
supriya maturu

Posted on

DOCKET APPLICATION USING APPWRITE

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

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.

Enter fullscreen mode Exit fullscreen mode
  • Add the boolean Attribute.
PERMISSION: Add the following permissions to your 
  collection.These permissions ensure that only registered users 
  can access the collection.

Enter fullscreen mode Exit fullscreen mode

Image description

Image description

For CMD code:
Enter fullscreen mode Exit fullscreen mode

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:
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Image description

Image description

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
Enter fullscreen mode Exit fullscreen mode

Link to Code

Image description

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

Image description

Image description

Image description

APPWRITE #DOCKET APPLICATION #WEB2 WIZARD #HTML #CSS

Top comments (0)