Git Product home page Git Product logo

apppwrite-blogapp-with-nextjs's Introduction

๐Ÿ”– Blog App using NextJs And Appwrite

logo

Screenshot

screenshotsignup

screenshotlogin

screenshothome

๐ŸŽฌ Getting Started!

๐Ÿค˜ Install Appwrite

Follow our simple Installation Guide to get Appwrite up and running in no time. You can either deploy Appwrite on your local machine or, on any cloud provider of your choice.

Note: If you setup Appwrite on your local machine, you will need to create a public IP so that your hosted frontend can access it.

  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
  • Rules Add the following rules to the collection.

Make sure that your key exactly matches the key in the images

Content Rule

IsComplete Rule

IsComplete Rule

  • Permissions

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

IsComplete Rule

๐Ÿš€ 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.

  • REACT_APP_ENDPOINT - Your Appwrite endpoint
  • REACT_APP_PROJECT - Your Appwrite project ID
  • REACT_APP_COLLECTION_ID - Your Appwrite collection ID

Run locally

Follow these instructions to run the demo app locally

$ git clone https://github.com/alceil/apppwrite-blogapp-with-nextjs
$ cd apppwrite-blogapp-with-nextjs

Now fill your environment variables

image

Now run the following commands and you should be good to go ๐Ÿ’ช๐Ÿผ

$ npm install
$ npm run dev

Thanks

Glad to see here! Show some love by starring this repository.

apppwrite-blogapp-with-nextjs's People

Contributors

alceil avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.