https://github.com/gsans/iwd2017-first-graphql-app
📷 Create an Instagram clone using Angular & Apollo
https://github.com/gsans/iwd2017-first-graphql-app
angular apollo-client graphql
Last synced: 7 months ago
JSON representation
📷 Create an Instagram clone using Angular & Apollo
- Host: GitHub
- URL: https://github.com/gsans/iwd2017-first-graphql-app
- Owner: gsans
- License: mit
- Created: 2017-03-07T23:48:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-08T00:13:03.000Z (over 8 years ago)
- Last Synced: 2025-01-26T17:32:21.700Z (9 months ago)
- Topics: angular, apollo-client, graphql
- Language: TypeScript
- Homepage:
- Size: 53.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# iwd2017-first-graphql-app
In this hands-on workshop we are going to learn about GraphQL and how to build a basic application using the latest version of Angular, the Apollo Client and graphcool, a GraphQL backend as a service.
## Getting Started
### 1. Create an account
To run this example, please create a [graph.cool](http://graph.cool) account and **copy your endpoint**. This shouldn't take longer than a minute. We promise!
This is how our GraphQL data model looks like:
```graphql
type Post {
description: String!
imageUrl: String!
}
```
### 2. Configure app data endpoint
Open `src/app/client.ts` and paste your endpoint to the following line:
```js
const networkInterface = createNetworkInterface('https://api.graph.cool/simple/v1/__PROJECT_ID__')
```
### 3. Run the example
You're done configuring the example application. Please run the following command and open [localhost:3000](http://localhost:3000) in your browser. Have fun exploring! 🎉
```sh
npm install
npm start
```
## Instructions
The goal is to build a basic instagram clone. We start out pretty simple and extend it step by step. By the end of the workshop we will do a showcase. Show us how you implemented your instagram clone and especially the aha-moments while building it.
### Steps
- Fetch the list of posts (description and imageUrl)
- Add a new post feature (description and imageUrl)
- Add delete post feature