{"id":19391316,"url":"https://github.com/equimper/twitter-clone-with-graphql-reactnative","last_synced_at":"2025-06-26T20:07:37.445Z","repository":{"id":84189451,"uuid":"97762028","full_name":"EQuimper/twitter-clone-with-graphql-reactnative","owner":"EQuimper","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-19T00:52:25.000Z","size":213,"stargazers_count":164,"open_issues_count":11,"forks_count":71,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-19T10:48:16.776Z","etag":null,"topics":["graphql","jwt","mongodb","tutorial","video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EQuimper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-19T21:17:38.000Z","updated_at":"2024-01-31T23:40:27.000Z","dependencies_parsed_at":"2023-05-23T21:45:32.181Z","dependency_job_id":null,"html_url":"https://github.com/EQuimper/twitter-clone-with-graphql-reactnative","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Ftwitter-clone-with-graphql-reactnative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Ftwitter-clone-with-graphql-reactnative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Ftwitter-clone-with-graphql-reactnative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EQuimper%2Ftwitter-clone-with-graphql-reactnative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EQuimper","download_url":"https://codeload.github.com/EQuimper/twitter-clone-with-graphql-reactnative/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250539476,"owners_count":21447315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","jwt","mongodb","tutorial","video"],"created_at":"2024-11-10T10:26:32.054Z","updated_at":"2025-04-24T00:31:47.406Z","avatar_url":"https://github.com/EQuimper.png","language":"JavaScript","readme":"# Twitter Clone with Graphql and React-Native\n\n- [Part 1](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-1)\n- [Part 2](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-2---tweet-basic-crud)\n- [Part 3](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-3---creation-of-the-user-with-signup-and-login-resolvers)\n- [Part 4](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-4---authentication-server-side-with-jwt)\n- [Part 5](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-5---add-tweet-belongs-to-user)\n- [Part 6](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-6---setup-of-mobile-side)\n- [Part 7](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-7---design-of-feed-card)\n- [Part 8](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative/tree/ep08#part-8---setup-the-navigations)\n- [Part 9](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-9---connect-the-mobile-app-with-the-server)\n- [Part 10](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-10---designing-the-signup-screen)\n- [Part 11](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-11---authorization-and-apollo-middleware)\n- [Part 12](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-12---me-query-with-header-avatar-and-logout)\n- [Part 13](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-13---designing-the-newtweetscreen)\n- [Part 14](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-14---createtweet-mutation-add-to-the-newscreentweet--optimistic-ui)\n- [Part 15](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-15---subscriptions-for-real-time-data---tweetcreation)\n- [Part 16-Prelude](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-16-prelude---talk-about-the-favorite-tweet-features)\n- [Part 16](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-16---code-the-favorite-tweet-features-server-side)\n- [Part 17](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-17---favorite-tweet-mutation-mobile-side)\n- [Part 18](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-18---adding-ui-change-for-the-favorite-tweet)\n- [Part 19](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-19---subscription-for-the-favorite-tweet)\n- [Part 20](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-20---placeholder-for-loading-card)\n- [Part 21](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-21---design-of-profile-page)\n- [Part 22](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-22---using-fragments)\n- [Part 23](https://github.com/EQuimper/twitter-clone-with-graphql-reactnative#part-23---creation-of-the-following-schema)\n\n### What is this?\n\nThis is a simple Youtube tutorial where we go over some new tech. The end product is to build a Twitter kind of clone where we have real time updates.\n\n[End Product Intro Video](https://youtu.be/U9OfNJ9Ia70)\n\n### Prerequisites\n\n- Installation of MongoDB, React Native and Nodejs\n- Understanding of MongoDB, Nodejs, React Native and a bit of GraphQL\n- Know what websocket are\n- Be patient with me ;)\n\n## Part 1\n\n### Video\n\n- [The Setup](https://youtu.be/33qP1QMmjv8)\n- [Part 1](https://youtu.be/qLBwByURMf8)\n\nThis part is mainly for the basic setup of the server. We go over the installation of Express and the basic GraphQL setup. We also add MongoDB and we make mocks on it.\n\n1. Create a folder to put the server and mobile folder in\n2. Cd into the server folder and run the command `yarn init` and click enter on each question\n3. Run `yarn add express cross-env body-parser`\n4. Create a folder called `src` and create a file inside called `index.js`\n5. Put the basic setup of express at the top of the file\n\n```js\nimport express from 'express';\nimport bodyParser from 'body-parser';\n\nconst app = express(); // create an instance of express\n\nconst PORT = process.env.PORT || 3000; // create the port\n\napp.use(bodyParser.json()); // add body-parser as the json parser middleware\n\napp.listen(PORT, err =\u003e {\n  if (err) {\n    console.error(err);\n  } else {\n    console.log(`App listen on port: ${PORT}`);\n  }\n});\n```\n5. Now we need to install babel in the devDependencies because we want to write in latest javascript feature.\n\n`yarn add -D babel-cli babel-plugin-transform-object-rest-spread babel-preset-env`\n\n6. Go into your `package.json` and add this script under the scripts:\n\n```json\n\"dev\": \"cross-env NODE_ENV=dev nodemon --exec babel-node src/index.js\"\n```\n\n7. Create a `.babelrc` with these settings:\n\n```\n{\n  \"presets\": [\n    [\n      \"env\",\n      {\n        \"targets\": {\n          \"node\": \"6.10\"\n        }\n      }\n    ]\n  ],\n  \"plugins\": [\n    [\n      \"transform-object-rest-spread\",\n      {\n        \"useBuiltIns\": true\n      }\n    ]\n  ]\n}\n```\n\nHere I make use of `babel-preset-env`. This helps us to setup babel without pain.\n\n8. Now it is time to set up some GraphQL stuff. First create a folder called `graphql` inside `src`. After that create a `schema.js` file and put the follow in it:\n\n```js\nexport default`\n  type Tweet {\n    _id: String\n    text: String\n  }\n\n  type Query {\n    getTweets: [Tweet]\n  }\n\n  schema {\n    query: Query\n  }\n`;\n```\n\nHere we have a basic schema for the tweet. Also we have a query call `getTweets` you render a list of this tweet.\n\n9. Now it's time to write the resolver for the `getTweets`. Create a folder `resolvers` inside `src/graphql/`. After that, create a file called `tweet-resolver.js`. Inside this one put this:\n\n```js\nimport Tweet from '../../models/Tweet';\n\nexport default {\n  getTweets: () =\u003e Tweet.find({})\n}\n```\n\nAnd create a `index.js` file inside `src/graphql/resolvers/` folder and put :\n\n```js\nimport TweetResolvers from './tweet-resolver';\n\nexport default {\n  Query: {\n    getTweets: TweetResolvers.getTweets\n  }\n}\n```\n\nBut where did this `Tweet` models come from? Yes, this is time to setup the db.\n\n10. Create a `db.js` inside the `src/config/` folder. Put this lines in after running this command.\n\n`yarn add mongoose`\n\n```js\n/* eslint-disable no-console */\n\nimport mongoose from 'mongoose';\n\nimport constants from './constants';\n\nmongoose.Promise = global.Promise;\n\nmongoose.set('debug', true); // debug mode on\n\ntry {\n  mongoose.connect(constants.DB_URL, {\n    useMongoClient: true,\n  });\n} catch (err) {\n  mongoose.createConnection(constants.DB_URL, {\n    useMongoClient: true,\n  });\n}\n\nmongoose.connection\n  .once('open', () =\u003e console.log('MongoDB Running'))\n  .on('error', e =\u003e {\n    throw e;\n  });\n```\n\nNothing crazy here just the basic setup of a db with mongodb. But where do the constants file came ? Time to create it. So inside the `src/config/` folder create a file called `constants.js'` and put these lines in.\n\n```js\nexport default {\n  PORT: process.env.PORT || 3000,\n  DB_URL: 'mongodb://localhost/tweeter-development',\n  GRAPHQL_PATH: '/graphql'\n}\n```\n\nHere, these are the constants where we put the base configuration of the server.\n\n  - PORT -\u003e the port of the app\n  - DB_URL -\u003e url for the db\n  - GRAPHQL_PATH -\u003e the url for graphql server\n\n11. Time to create the Mongodb schema of the tweet. Inside `src/` folder create `models` folder and inside this one `Tweet.js` file. Inside this one we create a basic schema for now ;)\n\n```js\nimport mongoose, { Schema } from 'mongoose';\n\nconst TweetSchema = new Schema({\n  text: String,\n});\n\nexport default mongoose.model('Tweet', TweetSchema);\n```\n\n12. Time to update the simple express server for add graphql on it inside `src/index.js`\n\n`yarn add apollo-server-express graphql-tools`\n\n```js\nimport express from 'express';\nimport { graphqlExpress, graphiqlExpress } from 'apollo-server-express';\nimport { makeExecutableSchema } from 'graphql-tools';\nimport { createServer } from 'http';\nimport bodyParser from 'body-parser';\n\nimport './config/db';\nimport constants from './config/constants';\nimport typeDefs from './graphql/schema';\nimport resolvers from './graphql/resolvers';\n\napp.use(bodyParser.json());\n\napp.use(\n  '/graphiql',\n  graphiqlExpress({\n    endpointURL: constants.GRAPHQL_PATH,\n  }),\n);\n\napp.use(\n  constants.GRAPHQL_PATH,\n  graphqlExpress({\n    schema\n  }),\n);\n\ngraphQLServer.listen(constants.PORT, err =\u003e {\n  if (err) {\n    console.error(err);\n  } else {\n    console.log(`App running on port: ${constants.PORT}`);\n  }\n});\n```\n\nNothing crazy here, basic setup + add graphiql the IDE of grahpql.\n\n13. Time to mocks some stuff ? Sure ;) That's gonna be easy, first think add `yarn add -D faker` which is a library to help you with mock data. We will create 10 fake mock tweet.\n\nInside `src` create a folder `mocks` and a file `index.js` inside this one.\n\n```js\nimport faker from 'faker';\n\nimport Tweet from '../models/Tweet';\n\nconst TWEETS_TOTAL = 10;\n\nexport default async () =\u003e {\n  try {\n    await Tweet.remove();\n\n    await Array.from({ length: TWEETS_TOTAL }).forEach(async () =\u003e {\n      await Tweet.create({\n        text: faker.lorem.paragraphs(1),\n      })\n    });\n  } catch (error) {\n    throw error;\n  }\n}\n```\n\n14. Add this mocks promise to the server inside `src/index.js`\n\n```js\n// all other import\nimport mocks from './mocks';\n\n// other code here\n\nmocks().then(() =\u003e {\n  graphQLServer.listen(constants.PORT, err =\u003e {\n    if (err) {\n      console.error(err);\n    } else {\n      console.log(`App running on port: ${constants.PORT}`);\n    }\n  });\n});\n```\n\n15. Time to test it. Go on https://github.com/skevy/graphiql-app and download the app. Why ? Because we will need this jwt auth later ;)\n\n16. Open this tool now and add this in the left part. This is a simple query where we get all 10 tweets. Don't forget to put the url `http://localhost:3000/graphql`\n\n```js\n{\n  getTweets {\n    _id\n\t\ttext\n  }\n}\n```\n\n17. If all work you should see that\n\n![](https://image.ibb.co/huhn5Q/Screen_Shot_2017_07_19_at_7_10_45_PM.png)\n\nGood Job!\n\n---\n\n## Part 2 - Tweet Basic Crud\n\n### Video\n\n- [Video here](https://youtu.be/tYiGpJGJatE)\n\nThis part is going to be about creating the resolver for creating and get a single Tweet\n\n1. Go inside `src/graphql/schema.js` and add this to the query object.\n\n```js\ngetTweet(_id: ID!): Tweet\n```\n\nAs you can see here we create a resolver called getTweet where we pass in the _id **Required** for fetching the tweet. Pretty simple here. The `!` mean this is required. The ID is a type build in Graphql. This is for a unique identifier, which is the key for cache.\n\n2. After we can go inside `src/graphql/resolvers/tweet-resolvers.js` and add this one.\n\n```js\ngetTweet: (_, { _id }) =\u003e Tweet.findById(_id),\n```\n\nHere we just find one single item by providing the id. Mongoose have an awesome method called `findById()` to make your life easier ;). Inside the resolver we have a function which takes 3 arguments. First one is the parent : \"We gonna talk about it later\", second one is the args object inside the argument inside the `schema.js` file. The third one is the context and we will also talk about it later. Here you see me destructuring the `{ _id }`,  `_id` prop from the args. This is just to make my code a bit cleaner.\n\n3. Now we need to go inside `src/graphql/resolvers/index.js` and add what we just did in the Query object\n\n```js\ngetTweet: TweetResolvers.getTweet,\n```\n\nTry it inside Graphiql, take a _id of one of the object by redoing the `getTweets` query and do this one\n\n![](https://image.ibb.co/cuhHqQ/Screen_Shot_2017_07_20_at_5_26_05_PM.png)\n\n4. Now time to do the mutataion one. For now I'm gonna break the code in 3 example and you can just put them in the file associate at the top of it.\n\n##### src/grahpql/schema.js`\n\n```js\ntype Mutation {\n  createTweet(text: String!): Tweet\n}\n\nschema {\n  query: Query\n  mutation: Mutation\n}\n```\n\nHere simple creation which requires a text to make it work. We also add this resolver inside a new type call Mutation. Mutation is all about everything else than GET, like PUT, DELETE, POST. Also we need to add this Mutation inside the schema object.\n\n##### src/graphql/resolvers/tweet-resolvers.js\n\n```js\ncreateTweet: (_, args) =\u003e Tweet.create(args),\n```\n\nHere we pass the full args object \"Grahpql filter for us\". For the validation that's gonna be later.\n\n##### src/grahpql/resolvers/index.js\n\n```js\nMutation: {\n  createTweet: TweetResolvers.createTweet,\n}\n```\n\nWe pass the resolver createTweet inside the new object Mutation.\n\nTry it inside you graphiql ide.\n\n![](https://image.ibb.co/jzUac5/Screen_Shot_2017_07_20_at_5_24_55_PM.png)\n\n5. Perfect so now we can create a tweet. Time to update it ;)\n\n##### src/grahpql/schema.js\n\n```js\nupdateTweet(_id: ID!, text: String): Tweet\n```\n\nAdd this one inside the Mutation type.\n\n##### src/graphql/resolvers/tweet-resolvers.js\n\n```js\nupdateTweet: (_, { _id, ...rest }) =\u003e Tweet.findByIdAndUpdate(_id, rest, { new: true }),\n```\n\nO boy, what we just did here ? If you don't understand the `...rest` I have made a video where I explain this thing ;) [Link Here](https://youtu.be/UA6fvCcSluA).\n\nWe find the tweet by using the id and we make use of the `findByIdAndUpdate()` method of mongoose. First argument is the id of the object. The second is the object we change. The `{ new: true }` mean we want to send back the new object.\n\n##### src/grahpql/resolvers/index.js\n\n```js\nupdateTweet: TweetResolvers.updateTweet,\n```\n\n6. Now time to delete our awesome tweet ;)\n\n##### src/grahpql/schema.js\n\n```js\ndeleteTweet(_id: ID!): Status\n```\n\nWhere this Status type came ? Time to create it :)\n\n```js\ntype Status {\n  message: String!\n}\n```\n\nThis is my way for show in the front-end the message of something happening. Because remember when you delete something that does not exist anymore.\n\n##### src/graphql/resolvers/tweet-resolvers.js\n\n```js\ndeleteTweet: async (_, { _id }) =\u003e {\n  try {\n    await Tweet.findByIdAndRemove(_id);\n    return {\n      message: 'Delete Success!'\n    }\n  } catch (error) {\n    throw error;\n  }\n}\n```\n\nHere this is the bigger resolver we create for this part. First this function gonna be an `async` one who mean this is gonna be asynchronous. First we delete the tweet and after we send the success message.\n\n##### src/grahpql/resolvers/index.js\n\n```js\ndeleteTweet: TweetResolvers.deleteTweet\n```\n\nPut this inside Mutation.\n\nTime to test it.\n\n![](https://image.ibb.co/btPGH5/Screen_Shot_2017_07_20_at_6_17_25_PM.png)\n\n7. But now the problem is the tweet came in descendant fashion. We still don't have a way to managed it like in twitter the last tweet is at the top of the feed not the other way around. We can change that, its easy. Go inside the tweets models\n\n##### src/models/Tweet.js\n\n```js\nconst TweetSchema = new Schema({\n  text: String,\n}, { timestamps: true });\n```\n\nHere I add the timestamps who give us 2 new field to our model. `createdAt` and `updatedAt` who are dates. Cause of it we gonna add in the schema this 2 field. Also we gonna create a `scalar Date` which is the way to do a custom type in graphql.\n\n##### src/graphql/schema.js\n\n```js\nscalar Date\n\ntype Tweet {\n  _id: ID!\n  text: String!\n  createdAt: Date!\n  updatedAt: Date!\n}\n```\n\nNow go inside the main resolver file after install `yarn add graphql-date`\n\n##### src/grahpql/resolvers/index.js\n\n```js\nimport GraphQLDate from 'graphql-date';\n\nimport TweetResolvers from './tweet-resolvers';\n\nexport default {\n  Date: GraphQLDate,\n  Query: {\n    getTweet: TweetResolvers.getTweet,\n    getTweets: TweetResolvers.getTweets,\n  },\n  Mutation: {\n    createTweet: TweetResolvers.createTweet,\n    updateTweet: TweetResolvers.updateTweet,\n    deleteTweet: TweetResolvers.deleteTweet\n  }\n};\n```\n\nGraphql gonna always use this Date here when he see the type. Why we do this ? This is for serializing the input.\n\nNow time to add the sort on mongoose for get the lastone create first\n\n##### src/grahpql/resolvers/tweet-resolvers.js\n\n```js\nimport Tweet from '../../models/Tweet';\n\nexport default {\n  createTweet: (_, args) =\u003e Tweet.create(args),\n  getTweet: (_, { _id }) =\u003e Tweet.findById(_id),\n  getTweets: () =\u003e Tweet.find({}).sort({ createdAt: -1 }),\n  updateTweet: (_, { _id, ...rest }) =\u003e Tweet.findByIdAndUpdate(_id, rest, { new: true }),\n  deleteTweet: async (_, { _id }) =\u003e {\n    try {\n      await Tweet.findByIdAndRemove(_id);\n      return {\n        message: 'Delete Success!'\n      }\n    } catch (error) {\n      throw error;\n    }\n  }\n};\n```\n\n---\n\n## Part 3 - Creation of the user with signup and login resolvers\n\n### Video\n\n[Link](https://youtu.be/3BeFarO6Wt8)\n\nIn this part we go over the basic signup and login features for our app. We gonna start by creating the user schema for mongodb, after we gonna jump on the schema model inside grahpql. And finally we gonna work with the resolver and add action for crypt the user password.\n\n1. First we need to make the basic setup for the user schema for mongodb. Create a new file inside `src/models/` call `User.js`.\n\n```js\nimport mongoose, { Schema } from 'mongoose';\n\nconst UserSchema = new Schema({\n  username: {\n    type: String,\n    unique: true,\n  },\n  firstName: String,\n  lastName: String,\n  avatar: String,\n  password: String,\n  email: String,\n}, { timestamps: true });\n\nexport default mongoose.model('User', UserSchema);\n```\n\nHere we just setup the basic field of what our user gonna need.\n\n2. Now time to create the user schema inside the defs of graphql.\n\n##### src/graphql/schema.js\n\n```js\ntype User {\n  _id: ID!\n  username: String\n  email: String!\n  firstName: String\n  lastName: String\n  avatar: String\n  createdAt: Date!\n  updatedAt: Date!\n}\n```\n\nOk what happen here ? Why do we don't have password ? We don't put the password for one unique and good reason. We don't want the client to have access to the password. In rest we need to manage a good way inside the models or maybe the controler for don't let a client access it. But in grahpql this is much more easy ;)\n\n3. Perfect time to work on the signup resolver. inside `src/graphql/resolvers/` create a file call `user-resolvers.js`\n\n```js\nimport User from '../../models/User';\n\nexport default {\n  signup: (_, { fullName, username, password, email, avatar }) =\u003e {\n    const [firstName, ...lastName] = fullName.split(' ');\n    return User.create({ firstName, lastName, username, password, email, avatar });\n  },\n}\n```\n\n??? What did I just did with the `fullName.split(' ')` what is this dark margic ;) \"I'm just joking here ;)\".\n\nHere as you can see first we make use of destructuring for get all the single value. I don't want to need to make use of args.email everywhere. After the thing is I want my client to have only one single input for get the fullName of the user. Less input and easier to work with. So the fullName came as a string with surely at least 2 words. the split method break the string inside an array when he see space. That's why the `(' ')`. After we say the first index = firstName and all the others equals the lastName. After we push it inside the new user creation.\n\nNow we need to add this inside the resolver index.\n\n##### src/graphql/resolvers/index.js\n\n```js\nimport GraphQLDate from 'graphql-date';\n\nimport TweetResolvers from './tweet-resolvers';\nimport UserResolvers from './user-resolvers';\n\nexport default {\n  Date: GraphQLDate,\n  Query: {\n    getTweet: TweetResolvers.getTweet,\n    getTweets: TweetResolvers.getTweets,\n  },\n  Mutation: {\n    createTweet: TweetResolvers.createTweet,\n    updateTweet: TweetResolvers.updateTweet,\n    deleteTweet: TweetResolvers.deleteTweet,\n    signup: UserResolvers.signup,\n  }\n};\n```\n\nAnd finally inside the schema graphql file\n\n##### src/graphql/schema.js\n\n```js\nsignup(email: String!, fullName: String!, password: String!, avatar: String, username: String): User\n```\n\nFor now we return the User type.\n\nTry it ;)\n\n![](https://image.ibb.co/cD3Ns5/Screen_Shot_2017_07_23_at_11_57_09_AM.png)\n\n4. We have a little problem at this point. If you check in your db using `Robo 3T` app or with the terminal you gonna see we save the password as a plain text string. This is REALLLLLLYYYYY bad. We need to crypt this thing and thank to the communities we have a simple packages who can make it for us easy.\n\n`yarn add bcrypt-nodejs`\n\n##### src/models/User.js\n\n```js\nimport mongoose, { Schema } from 'mongoose';\nimport { hashSync } from 'bcrypt-nodejs';\n\nconst UserSchema = new Schema({\n  username: {\n    type: String,\n    unique: true,\n  },\n  firstName: String,\n  lastName: String,\n  avatar: String,\n  password: String,\n  email: String,\n}, { timestamps: true });\n\nUserSchema.pre('save', function(next) {\n  if (this.isModified('password')) {\n    this.password = this._hashPassword(this.password);\n    return next();\n  }\n  return next();\n});\n\nUserSchema.methods = {\n  _hashPassword(password) {\n    return hashSync(password);\n  },\n}\n\nexport default mongoose.model('User', UserSchema);\n```\n\nHere we have import the function `hashSync` who hash the password for you. We make use of the pre hook method built in mongodb where before the user save we check first if he really modified the password. Because maybe we want to update the username of the user and we don't want to hash again the password for nothing. After we call a methods function call `_hashPassword()` who take the current password and return the hashing version. A methods is a function who can be use by the instance of the schema. Also `hashSync` is asyncronous.\n\nSo now if you try again you should see a version hash of the password inside mongodb.\n\n![](https://image.ibb.co/gyb625/Screen_Shot_2017_07_23_at_12_05_40_PM.png)\\\n\n5. Time to loged this user. First because the user schema file is open we can create a function who decrypt the password and make sure this is the equivalent of what the use sent.\n\n##### src/models/User.js\n\n```js\nimport mongoose, { Schema } from 'mongoose';\nimport { hashSync, compareSync } from 'bcrypt-nodejs';\n\nconst UserSchema = new Schema({\n  username: {\n    type: String,\n    unique: true,\n  },\n  firstName: String,\n  lastName: String,\n  avatar: String,\n  password: String,\n  email: String,\n}, { timestamps: true });\n\nUserSchema.pre('save', function(next) {\n  if (this.isModified('password')) {\n    this.password = this._hashPassword(this.password);\n    return next();\n  }\n  return next();\n});\n\nUserSchema.methods = {\n  _hashPassword(password) {\n    return hashSync(password);\n  },\n  authenticateUser(password) {\n    return compareSync(password, this.password);\n  },\n};\n\nexport default mongoose.model('User', UserSchema);\n```\n\nHere we add the `compareSync` import at the top. And finally we just create a methods on the user call `authenticateUser` who take the password coming from the client and return a boolean if the password match the one crypt.\n\nTime to jump on the resolver\n\n##### src/graphql/resolvers/user-resolvers.js\n\n```js\nimport User from '../../models/User';\n\nexport default {\n  signup: (_, { fullName, username, password, email, avatar }) =\u003e {\n    const [firstName, ...lastName] = fullName.split(' ');\n    return User.create({ firstName, lastName, username, password, email, avatar });\n  },\n  login: async (_, { email, password }) =\u003e {\n    const user = await User.findOne({ email });\n\n    if (!user) {\n      throw new Error('User not exist!');\n    }\n\n    if (!user.authenticateUser(password)) {\n      throw new Error('Password not match!');\n    }\n\n    return user;\n  }\n}\n```\n\nHere lot of code happening in the login but nothing crazy. First this gonna be an async function. After we destructuring the email and password field.\n\nFirst we find the user by his email. If no user came back we return an error about user not exist.\n\nAfter that mean a user exist we check if it match the password crypting version. If no we return an error about password don't match.\n\nFinally we return the user if all the guard case is good.\n\n##### src/graphql/resolvers/index.js\n\n```js\nMutation: {\n  createTweet: TweetResolvers.createTweet,\n  updateTweet: TweetResolvers.updateTweet,\n  deleteTweet: TweetResolvers.deleteTweet,\n  signup: UserResolvers.signup,\n  login: UserResolvers.login\n}\n```\n\nAdd the login inside the mutation.\n\n##### src/graphql/schema.js\n\n```js\ntype Mutation {\n  createTweet(text: String!): Tweet\n  updateTweet(_id: ID!, text: String): Tweet\n  deleteTweet(_id: ID!): Status\n  signup(email: String!, fullName: String!, password: String!, avatar: String, username: String): User\n  login(email: String!, password: String!): User\n}\n```\n\nAdd this in the schema grahpql. Here for now we return the user.\n\nTry it ;)\n\n![](https://image.ibb.co/dLpyFQ/Screen_Shot_2017_07_23_at_12_12_51_PM.png)\n\n---\n\n## Part 4 - Authentication server side with JWT\n\n### Video\n\n[Link](https://youtu.be/2mXUcBHoJcA)\n\nIn this part we go throught the user authentication server side. We gonna make use of JWT \"json web token\" [JWT Website](https://jwt.io) for being the strategy we use. Why ? Because that keep the server serverless, and this is really easy to implement in mobile app and also web app.\n\nFirst thing we gonna need a new package for the app.\n\n`yarn add jsonwebtoken`\n\nThis is a library who gonna help you create a jwt and also verify this last one.\n\n1. We need to create a JWT_SECRET constants for the app. This way we make sure the JWT is provide by our server.\n\n##### src/config/constants.js\n\n```js\nexport default {\n  PORT: process.env.PORT || 3000,\n  DB_URL: 'mongodb://localhost/tweet-development',\n  GRAPHQL_PATH: '/graphql',\n  JWT_SECRET: 'thisisasecret123'\n};\n```\n\nFor now we put a really bad secret. We gonna change that on production.\n\n2. We gonna add a methods on the user for creating the jwt by taken his information.\n\n#####  src/models/User.js\n\n```js\nimport mongoose, { Schema } from 'mongoose';\nimport { hashSync, compareSync } from 'bcrypt-nodejs';\nimport jwt from 'jsonwebtoken';\n\nimport constants from '../config/constants';\n\nconst UserSchema = new Schema({\n  username: {\n    type: String,\n    unique: true\n  },\n  firstName: String,\n  lastName: String,\n  avatar: String,\n  password: String,\n  email: String\n}, { timestamps: true });\n\nUserSchema.pre('save', function(next) {\n  if (this.isModified('password')) {\n    this.password = this._hashPassword(this.password);\n    return next();\n  }\n\n  return next();\n});\n\nUserSchema.methods = {\n  _hashPassword(password) {\n    return hashSync(password);\n  },\n  authenticateUser(password) {\n    return compareSync(password, this.password);\n  },\n  createToken() {\n    return jwt.sign(\n      {\n        _id: this._id,\n      },\n      constants.JWT_SECRET,\n    );\n  },\n}\n\nexport default mongoose.model('User', UserSchema);\n```\n\nHere we add the method `createToken()` who finally return a JWT with the payload of the user id in. As you can see we need the secret for the creation.\n\nP.S we don't make it expires for this tutorial.\n\n3. Now we gonna create the services for authentication for the server. I like to keep this kind of strategies outside of my current code. So if I decide to change stuff I know where to go.\n\n##### src/services/auth.js\n\n```js\nimport jwt from 'jsonwebtoken';\n\nimport User from '../models/User';\nimport constants from '../config/constants';\n\nexport async function requireAuth(user) {\n  if (!user || !user._id) {\n    throw new Error('Unauthorized');\n  }\n\n  const me = await User.findById(user._id);\n\n  if (!me) {\n    throw new Error('Unauthorized');\n  }\n\n  return me;\n}\n\nexport function decodeToken(token) {\n  const arr = token.split(' ');\n\n  if (arr[0] === 'Bearer') {\n    return jwt.verify(arr[1], constants.JWT_SECRET);\n  }\n\n  throw new Error('Token not valid!');\n}\n```\n\nHere I create a function call `requireAuth` who take a user object. This is coming from the client side inside the context \"We gonna talk about this later\".\n\nFirst I make sure we have user is not null and also _id prop too.\n\nAfter I search for the user with the user._id. Just again for security and maybe too if my user delete is account and try to do other stuff we make sure if the jwt pass the validation we can push out the user from our app.\n\nWe return it for maybe take it inside resolver later.\n\nThe second function is `decodeToken` who take a token string. First thing we split it because I want the jwt too look like `Bearer oiwgnwioeungowingonwogn`. But the `jwt.verify` only need the token himself.\n\n3. But now how can we access the user for make the requireAuth function work ?\n\nFirst we gonna refact the code.\n\nWe gonna break up all the middlewares inside the same file and we gonna import it inside the index.js file\n\n##### src/config/middlewares.js\n\n```js\nimport bodyParser from 'body-parser';\nimport { graphiqlExpress, graphqlExpress } from 'apollo-server-express';\nimport { makeExecutableSchema } from 'graphql-tools';\n\nimport constants from './constants';\nimport typeDefs from '../graphql/schema';\nimport resolvers from '../graphql/resolvers';\n\nconst schema = makeExecutableSchema({\n  typeDefs,\n  resolvers,\n});\n\nexport default app =\u003e {\n  app.use(bodyParser.json());\n  app.use(\n    '/graphiql',\n    graphiqlExpress({\n      endpointURL: constants.GRAPHQL_PATH,\n    }),\n  );\n  app.use(\n    constants.GRAPHQL_PATH,\n    graphqlExpress({\n      schema,\n      context: {\n        user: req.user,\n      },\n    }),\n  );\n};\n```\n\n##### src/index.js\n\n```js\n/* eslint-disable no-console */\n\nimport express from 'express';\nimport { createServer } from 'http';\n\nimport './config/db';\nimport constants from './config/constants';\nimport middlewares from './config/middlewares';\nimport mocks from './mocks';\n\nconst app = express();\n\nmiddlewares(app);\n\nconst graphQLServer = createServer(app);\n\nmocks().then(() =\u003e {\n  graphQLServer.listen(constants.PORT, err =\u003e {\n    if (err) {\n      console.error(err);\n    } else {\n      console.log(`App listen to port: ${constants.PORT}`);\n    }\n  });\n});\n```\n\nWhy do this ? Just for make my code cleaner ;)\n\nNow time to add a middleware inside express who gonna add the user inside the context. So this way we have access to it on every request.\n\n##### src/config/middlewares.js\n\n```js\nimport bodyParser from 'body-parser';\nimport { graphiqlExpress, graphqlExpress } from 'apollo-server-express';\nimport { makeExecutableSchema } from 'graphql-tools';\n\nimport constants from './constants';\nimport typeDefs from '../graphql/schema';\nimport resolvers from '../graphql/resolvers';\nimport { decodeToken } from '../services/auth';\n\nconst schema = makeExecutableSchema({\n  typeDefs,\n  resolvers,\n});\n\nasync function auth(req, res, next) {\n  try {\n    const token = req.headers.authorization;\n    if (token != null) {\n      const user = await decodeToken(token);\n      req.user = user; // eslint-disable-line\n    } else {\n      req.user = null; // eslint-disable-line\n    }\n    next();\n  } catch (error) {\n    throw error;\n  }\n}\n\nexport default app =\u003e {\n  app.use(bodyParser.json());\n  app.use(auth);\n  app.use(\n    '/graphiql',\n    graphiqlExpress({\n      endpointURL: constants.GRAPHQL_PATH,\n    }),\n  );\n  app.use(\n    constants.GRAPHQL_PATH,\n    graphqlExpress(req =\u003e ({\n      schema,\n      context: {\n        user: req.user,\n      },\n    })),\n  );\n};\n```\n\nIf you look at the function auth we make a middleware who check the headers authorization. If he find one he decode the token provide in it and if a user come from it he put it inside the req object.\n\nAfter inside the graphqlExpress middleware we add the req callback and we return the user inside the context.\n\nAfter we can change the resolvers for the tweet.\n\n##### src/graphql/resolvers/tweet-resolvers.js\n\n```js\nimport Tweet from '../../models/Tweet';\nimport { requireAuth } from '../../services/auth';\n\nexport default {\n  getTweet: async (_, { _id }, { user }) =\u003e {\n    try {\n      await requireAuth(user);\n      return Tweet.findById(_id);\n    } catch (error) {\n      throw error;\n    }\n  },\n\n  getTweets: async (_, args, { user }) =\u003e {\n    try {\n      await requireAuth(user);\n      return Tweet.find({}).sort({ createdAt: -1 });\n    } catch (error) {\n      throw error;\n    }\n  },\n\n  createTweet: async (_, args, { user }) =\u003e {\n    try {\n      await requireAuth(user);\n      return Tweet.create(args);\n    } catch (error) {\n      throw error;\n    }\n  },\n\n  updateTweet: async (_, { _id, ...rest }, { user }) =\u003e {\n    try {\n      await requireAuth(user);\n      return Tweet.findByIdAndUpdate(_id, rest, { new: true });\n    } catch (error) {\n      throw error;\n    }\n  },\n\n  deleteTweet: async (_, { _id }) =\u003e {\n    try {\n      await Tweet.findByIdAndRemove(_id);\n      return {\n        message: 'Delete Success!',\n      };\n    } catch (error) {\n      throw error;\n    }\n  },\n};\n```\n\nNow we make sure all this function work only on when is auth. That gonna help you a lot for add the user id inside the Tweet in the next part too. As you can see I add also some trycatch for make sure if error we throw it.\n\n4. Now we can also add a resolver call me where we can receive the user object in the front end.\n\n##### src/graphql/resolvers/user-resolvers.js\n\n```js\nimport User from '../../models/User';\nimport { requireAuth } from '../../services/auth';\n\nexport default {\n  signup: async (_, { fullName, ...rest }) =\u003e {\n    const [firstName, ...lastName] = fullName.split(' ');\n    try {\n      const user = await User.create({ firstName, lastName, ...rest });\n      return {\n        token: user.createToken(),\n      };\n    } catch (error) {\n      throw error;\n    }\n  },\n\n  login: async (_, { email, password }) =\u003e {\n    try {\n      const user = await User.findOne({ email });\n\n      if (!user) {\n        throw new Error('User not exist!');\n      }\n\n      if (!user.authenticateUser(password)) {\n        throw new Error('Password not match!');\n      }\n\n      return {\n        token: user.createToken(),\n      };\n    } catch (error) {\n      throw error;\n    }\n  },\n\n  me: async (_, args, { user }) =\u003e {\n    try {\n      const me = await requireAuth(user);\n      return me;\n    } catch (error) {\n      throw error;\n    }\n  },\n};\n```\n\nWe get the me object from the function `requireAuth` build earlier.\n\nNow the schema should look like this\n\n##### src/graphql/schema.js\n\n```js\nexport default`\n  scalar Date\n\n  type Status {\n    message: String!\n  }\n\n  type Auth {\n    token: String!\n  }\n\n  type User {\n    _id: ID!\n    username: String\n    email: String!\n    firstName: String\n    lastName: String\n    avatar: String\n    createdAt: Date!\n    updatedAt: Date!\n  }\n\n  type Me {\n    _id: ID!\n    username: String\n    email: String!\n    firstName: String\n    lastName: String\n    avatar: String\n    createdAt: Date!\n    updatedAt: Date!\n  }\n\n  type Tweet {\n    _id: ID!\n    text: String!\n    createdAt: Date!\n    updatedAt: Date!\n  }\n\n  type Query {\n    getTweet(_id: ID!): Tweet\n    getTweets: [Tweet]\n    me: Me\n  }\n\n  type Mutation {\n    createTweet(text: String!): Tweet\n    updateTweet(_id: ID!, text: String): Tweet\n    deleteTweet(_id: ID!): Status\n    signup(email: String!, fullName: String!, password: String!, avatar: String, username: String): Auth\n    login(email: String!, password: String!): Auth\n  }\n\n  schema {\n    query: Query\n    mutation: Mutation\n  }\n`;\n```\n\nNow you see we return a auth type not anymore the user.\n\nFinally inside the index resolvers we do\n\n##### src/graphql/resolvers/index.js\n\n```js\nimport GraphQLDate from 'graphql-date';\n\nimport TweetResolvers from './tweet-resolvers';\nimport UserResolvers from './user-resolvers';\n\nexport default {\n  Date: GraphQLDate,\n  Query: {\n    getTweet: TweetResolvers.getTweet,\n    getTweets: TweetResolvers.getTweets,\n    me: UserResolvers.me\n  },\n  Mutation: {\n    createTweet: TweetResolvers.createTweet,\n    updateTweet: TweetResolvers.updateTweet,\n    deleteTweet: TweetResolvers.deleteTweet,\n    signup: UserResolvers.signup,\n    login: UserResolvers.login\n  }\n};\n```\n\n---\n\n\n## Part 5 - Add tweet belongs to user\n\n### Video\n\n[Link](https://youtu.be/G2vt7BW4Sgw)\n\nIn this part we go over the setup for adding a reference of the user inside the tweet schema. This way we can track who is the creator of this tweet and make sure he can be the only one to update this one or delete it.\n\n1. We need to change the setup of the tweet schema for mongodb.\n\n##### src/models/Tweet.js\n\n```js\nimport mongoose, { Schema } from 'mongoose';\n\nconst TweetSchema = new Schema({\n  text: {\n    type: String,\n    minlength: [5, 'Text need to be longer'],\n    maxlength: [144, 'Text too long'],\n  },\n  user: {\n    type: Schema.Types.ObjectId,\n    ref: 'User'\n  },\n  favoriteCount: {\n    type: Number,\n    default: 0\n  }\n}, { timestamps: true });\n\nexport default mongoose.model('Tweet', TweetSchema);\n```\n\nHere you see I add some database validation about the text. I add a minimun of 5 and a maximum of 144 characters. The thing in the bracket with the number are the error message show by the database.\n\nuser here are reference of the User model we create earlier. We just need to save the id here.\n\n2. Add the user inside the create tweet resolvers.\n\n##### src/graphql/resolvers/tweet-resolvers.js\n\n```js\ncreateTweet: async (_, args, { user }) =\u003e {\n  try {\n    await requireAuth(user);\n    return Tweet.create({ ...args, user: user._id });\n  } catch (error) {\n    throw error;\n  }\n},\n```\n\nHere I spread my args to make sure we don't add an object in a object. This way each property get out of the last object and become a part of the new one. You can see too I add the `user._id` inside the user. This is how you add references to it. But this user came from the jwt so that's why he need to be authorized.\n\n3. We can do the same too with the update and delete so we can make sure the user who create it his the only who can update or delete it.\n\n##### src/graphql/resolvers/tweet-resolvers.js\n\n```js\nupdateTweet: async (_, { _id, ...rest }, { user }) =\u003e {\n  try {\n    await requireAuth(user);\n    const tweet = await Tweet.findOne({ _id, user: user._id });\n\n    if (!tweet) {\n      throw new Error('Not found!');\n    }\n\n    Object.entries(rest).forEach(([key, value]) =\u003e {\n      tweet[key] = value;\n    });\n\n    return tweet.save();\n  } catch (error) {\n    throw error;\n  }\n},\ndeleteTweet: async (_, { _id }, { user }) =\u003e {\n  try {\n    await requireAuth(user);\n    const tweet = await Tweet.findOne({ _id, user: user._id });\n\n    if (!tweet) {\n      throw new Error('Not found!');\n    }\n    await tweet.remove();\n    return {\n      message: 'Delete Success!'\n    }\n  } catch (error) {\n    throw error;\n  }\n}\n```\n\nFor the update we get the tweet from the promise resolve. As you can see I make use of the `findOne` function who return only one document. I search a tweet who have the tweet id provide inside the args but also the user id provide from the jwt. If I have no tweet return that mean the tweet don't exist or the tweet exist but it's not belongs the user.\n\nAfter I loop over the rest object for update the tweet with the method `Object.entries` who give you access to the key and value. And finally we return the promise `tweet.save()`.\n\nFor the delete almost the same process but we delete it and return a message.\n\n4. Now we can return an array of tweets belongs the user himself.\n\n##### src/graphql/resolvers/tweet-resolvers.js\n\n```js\ngetUserTweets: async (_, args, { user }) =\u003e {\n  try {\n    await requireAuth(user);\n    return Tweet.find({ user: user._id }).sort({ createdAt: -1 })\n  } catch (error) {\n    throw error;\n  }\n},\n```\n\nThis way we can as the mobile dev take it for show the user tweets in his profile.\n\nBut don't forget the add this to the index resolver\n\n##### src/graphql/resolvers/index.js\n\n```js\nexport default {\n  Date: GraphQLDate,\n  Tweet: {\n    user: ({ user }) =\u003e User.findById(user),\n  },\n  Query: {\n    getTweet: TweetResolvers.getTweet,\n    getTweets: TweetResolvers.getTweets,\n    getUserTweets: TweetResolvers.getUserTweets, // here\n    me: UserResolvers.me\n  },\n  Mutation: {\n    createTweet: TweetResolvers.createTweet,\n    updateTweet: TweetResolvers.updateTweet,\n    deleteTweet: TweetResolvers.deleteTweet,\n    signup: UserResolvers.signup,\n    login: UserResolvers.login\n  }\n};\n```\n\n5. Finally we can update the mocks for create the user + tweet with it.\n\n##### src/mocks/index.js\n\n```js\nimport faker from 'faker';\n\nimport Tweet from '../models/Tweet';\nimport User from '../models/User';\n\nconst TWEETS_TOTAL = 3;\nconst USERS_TOTAL = 3;\n\nexport default async () =\u003e {\n  try {\n    await Tweet.remove();\n    await User.remove();\n\n    await Array.from({ length: USERS_TOTAL }).forEach(async (_, i) =\u003e {\n      const user = await User.create({\n        username: faker.internet.userName(),\n        firstName: faker.name.firstName(),\n        lastName: faker.name.lastName(),\n        email: faker.internet.email(),\n        avatar: `https://randomuser.me/api/portraits/women/${i}.jpg`,\n        password: 'password123'\n      });\n\n      await Array.from({ length: TWEETS_TOTAL }).forEach(\n        async () =\u003e await Tweet.create({ text: faker.lorem.sentence(), user: user._id }),\n      );\n    });\n  } catch (error) {\n    throw error;\n  }\n};\n```\n\n---\n\n## Part 6 - Setup of mobile side\n\n### Video\n\n[Link](https://youtu.be/c_8M5l4itrA)\n\n---\n\n## Part 7 - Design of feed card\n\n### Video\n\n[Link](https://youtu.be/Lkn1FDbUU0U)\n\n#### End Result Of This Episode\n\n\u003cimg src=\"https://image.ibb.co/nGHnpv/Screen_Shot_2017_08_03_at_8_31_10_PM.png\" height=\"75%\" width=\"75%\" border=\"0\"\u003e\n\n---\n\n## Part 8 - Setup the navigations\n\n### Video\n\n[Link](https://youtu.be/RrIPpWcuN5w)\n\n#### End Result Of This Episode\n\n\u003cimg src=\"https://preview.ibb.co/eKsdWa/Screen_Shot_2017_08_05_at_10_57_43_AM.png\" alt=\"Screen_Shot_2017_08_05_at_10_57_43_AM\" border=\"0\"\u003e\n\n---\n\n## Part 9 - Connect the Mobile app with the Server\n\n### Video\n\n[Link](https://youtu.be/LVr3qaZGqUw)\n\n---\n\n## Part 10 - Designing the Signup Screen\n\n### Video\n\n[Link](https://youtu.be/Zca5Kyi9cyc)\n\n#### End Result Of This Episode\n\n\u003cimg src=\"https://image.ibb.co/iX2rNF/Screen_Shot_2017_08_09_at_8_02_22_AM.png\" alt=\"Screen_Shot_2017_08_05_at_10_57_43_AM\" border=\"0\"\u003e\n\u003cimg src=\"https://image.ibb.co/j27QhF/Screen_Shot_2017_08_09_at_8_02_25_AM.png\" alt=\"Screen_Shot_2017_08_05_at_10_57_43_AM\" border=\"0\"\u003e\n\n---\n\n## Part 11 - Authorization and Apollo Middleware\n\n### Video\n\n[Link](https://youtu.be/Ttvt3JhzGQ4)\n\n---\n\n## Part 12 - Me Query with Header avatar and logout\n\n### Video\n\n[Link](https://youtu.be/DDeNQ55mWTQ)\n\n---\n\n## Part 13 - Designing the NewTweetScreen\n\n### Video\n\n[Link](https://youtu.be/0u_HUWkEIII)\n\n\u003cimg src=\"https://image.ibb.co/jrQBcF/Screen_Shot_2017_08_15_at_8_43_24_AM.png\" alt=\"Screen_Shot_2017_08_05_at_10_57_43_AM\" border=\"0\"\u003e\n\n\u003cimg src=\"https://image.ibb.co/dLYKWa/Screen_Shot_2017_08_15_at_8_43_29_AM.png\" alt=\"Screen_Shot_2017_08_05_at_10_57_43_AM\" border=\"0\"\u003e\n\n---\n\n## Part 14 - CreateTweet mutation add to the NewScreenTweet + Optimistic-ui\n\n### Video\n\n[Link](https://youtu.be/sDCfEh6XIU0)\n\n## Part 15 - Subscriptions for real time data -\u003e TweetCreation\n\n### Video\n\n[Link](https://youtu.be/V472NiWt2Jg)\n\n---\n\n## Part 16-Prelude - Talk about the Favorite Tweet features\n\n### Video\n\n[Link](https://youtu.be/h6m1gs9OjB4)\n\n---\n\n## Part 16 - Code the favorite tweet features server side\n\n### Video\n\n[Link](https://youtu.be/n8VNuRvMYv4)\n\n---\n\n## Part 17 - Favorite tweet mutation mobile side\n\n### Video\n\n[Link](https://youtu.be/8zNfgm_vp3A)\n\n---\n\n## Part 18 - Adding ui change for the favorite tweet\n\n### Video\n\n[Link](https://youtu.be/iAxeLDaU-ms)\n\n---\n\n## Part 19 - Subscription for the favorite tweet\n\n### Video\n\n[Link](https://youtu.be/2zHBhSp8V3c)\n\n---\n\n## Part 20 - Placeholder for loading card\n\n### Video\n\n[Link](https://youtu.be/vvMnG8SZfaU)\n\n---\n\n## Part 21 - Design of Profile page\n\n### Video\n\n[Link](https://youtu.be/B2b4LS4WBtQ)\n\n---\n\n## Part 22 - Using fragments\n\n### Video\n\n[Link](https://youtu.be/3xt9Rm31Prc)\n\n---\n\n## Part 23 - Creation of the following schema\n\n### Video\n\n[Link](https://youtu.be/Ldo0SsairC4)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequimper%2Ftwitter-clone-with-graphql-reactnative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fequimper%2Ftwitter-clone-with-graphql-reactnative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fequimper%2Ftwitter-clone-with-graphql-reactnative/lists"}