Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thebeginner86/appwrite-react
This application demonstrates integration of Appwrite and React.
https://github.com/thebeginner86/appwrite-react
appwrite css html javascript medium-article react
Last synced: about 1 month ago
JSON representation
This application demonstrates integration of Appwrite and React.
- Host: GitHub
- URL: https://github.com/thebeginner86/appwrite-react
- Owner: theBeginner86
- Created: 2021-10-01T11:56:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-03T11:22:06.000Z (over 3 years ago)
- Last Synced: 2024-10-29T10:39:46.607Z (3 months ago)
- Topics: appwrite, css, html, javascript, medium-article, react
- Language: JavaScript
- Homepage:
- Size: 19.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Newsletter Form Application with Appwrite and React
[Appwrite](https://github.com/appwrite/appwrite) is an open-source application that is built on the concept of a self-hosted backend as a service server that provides user-friendly ways to build an application.
It abstracts the time-consuming development tasks and provides pre-built SDKs to integrate your application with Appwrite APIs.
It supports multiple languages and its UI is super cool to work with.
This repo contains the code for the Newsletter Application. I wrote a blog on it at [Medium](https://thebeginner86.medium.com/newsletter-form-application-with-appwrite-and-react-2791bd38a457). Do check it out first as we would be using the concepts explained in that article. It would be helpful, if your are looking forward to using [Appwrite](https://github.com/appwrite/appwrite) in your next React application. I've explained about integrating [Appwrite](https://github.com/appwrite/appwrite) with [React](https://github.com/facebook/react) through its web client SDKs.
### Screenshots:
## Setup Instructions
1. First you need to start Appwrite services (make sure you have [Docker](https://docs.docker.com/get-docker/) installed on your system)
- **Unix**
```
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.10.4
```
- **Windows**
CMD
```
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.10.4
```
PowerShell
```
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.10.4
```
Once the Docker installation completes, go to http://localhost to access the Appwrite console from your browser.
2. Fork this repository. This will create a local copy of this Repository on your Github profile.
3. Clone it
```
$ git clone https://github.com//appwrite-react
$ cd appwrite-react
```
4. Install the dependencies
```
$ npm i
```
5. Inorder for the application to work, you need to take few ids from your project on Appwrite. Its detailed steps have been explained on my [Medium](https://thebeginner86.medium.com/newsletter-form-application-with-appwrite-and-react-2791bd38a457) article. Besure to check that out before you run your application.
6. You need to create a .env file so that those ids and credentials could be appended in it and the React applciation could easily pick those from .env file.
```
$ touch .env
```
7. Take reference from .env.example file
You would require following values:
```
REACT_APP_ENDPOINT=
REACT_APP_PROJECT_ID=
REACT_APP_COLLECTION_ID=
REACT_APP_USER_CREDENTIALS_EMAIL=
REACT_APP_USER_CREDENTIALS_PASSWORD=
```
You need to copy these into .env and take values from your Appwrite project which we had setup on my [Medium](https://thebeginner86.medium.com/newsletter-form-application-with-appwrite-and-react-2791bd38a457) article.
> Dont get intimidated. These are very easy to extract. Just follow my [Medium](https://thebeginner86.medium.com/newsletter-form-application-with-appwrite-and-react-2791bd38a457) article and everything would fall in place.
5. Now start the server
```
$ npm start
```
6. To check the running application, go to http://localhost:3000
## Demo
Thanks for testing out my application.
If you have any doubts then feel free to ask me on [Twitter](https://twitter.com/theBeginner86). My DMs are always open to interact with people 🙌
Inorder to understand the basics do checkout my article on [Medium](https://thebeginner86.medium.com/newsletter-form-application-with-appwrite-and-react-2791bd38a457).
### Developed with ❤️ by [Pranav Singh](https://twitter.com/theBeginner86) 😎 👨💻