Development.md

[Reed Barger] Build an Instagram Clone with React [ENG, 2020]

Development step by step

01 React Crash Course

01 - React Core Concepts

$ cd client
$ npx create-react-app .

$ npm run start

02 - React Hooks Deep Dive

03 - Building our Social Media App

04 - Advanced React Hooks (useContext, useReducer)

02 Mastering GraphQL and Material UI

01 - GraphQL Core Concepts (with Hasura)

https://hasura.io/

https://build-an-instagram-clone.herokuapp.com/

Data --> Add a new table

02 - Building a CRUD App with Apollo React Hooks

https://www.apollographql.com/docs/react/get-started/

$ cd graphql
$ npx create-react-app .
$ npm install apollo-boost @apollo/react-hooks graphql

http://tachyons.io/

03 - Material UI Crash Course

https://material-ui.com/

$ cd apollo-music-share
$ npx create-react-app .

$ npm install @material-ui/core @material-ui/icons

04 - Creating our App UI

03 Building our App Interface

01 - Integrating GraphQL with Subscriptions

$ npm install apollo-boost @apollo/react-hooks graphql
$ npm install react-player
$ npm install apollo-link-ws subscriptions-transport-ws apollo-cache-inmemory apollo-client

mutation addSong {
  insert_songs(objects: {thumbnail: "http://img.youtube.com/vi/--ZtUFsIgMk/0.jpg", title: "Space", artist: "Enjoykin", duration: 1.5, url: "https://www.youtube.com/watch?v=n-AdoTkXwbc"}) {
    returning {
      id
      duration
      created_at
      artist
      title
      url
      thumbnail
    }
  }
}

query MyQuery {
  songs {
    id
    artist
    duration
    thumbnail
    title
    url
  }
}

02 - Managing State with React and Apollo

03 - Playing Songs / Finishing the App

04 Polishing our Final Instagram App

01 - Breaking Down the Instagram UI

starting point

https://github.com/codeartistryio/instagram-react12

$ npm install

02 - Building Accounts Pages

http://localhost:3000/accounts/login

http://localhost:3000/accounts/emailsignup

03 - Making Feed Page

http://localhost:3000/

04 - Improving Navbar

05 - Explore and Post Pages

06 - Loading Skeletons and Profile Page

07 - Edit Profile Page and Deployment

Deploy to now.sh (not interesting for me)

05 - Instagram App + Backend

01 - Setup Auth, Create Users

https://hasura.io/blog/authentication-and-authorization-using-hasura-and-firebase/

HASURA_GRAPHQL_ADMIN_SECRET

http://firebase.google.com/

Create Project "build-an-instagram-clone"

Authentication -> Set up sign-in method

Email/Password -> Enabled

Databases -> Rules

read, write -> true

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": true,
    ".write": true
  }
}

$ cd "project_root"
$ npm install -g firebase-tools
$ firebase login
// $ firebase login --reauth
$ firebase init

1. Functions: Configure and deploy Cloud Functions

2. JavaScript

3. Do you want to use ESLint. No

4. Do you want to install dependencies with npm now? Yes

   $ firebase deploy --only functions

// without debug i had an error

$ // firebase deploy --only functions --debug

// Try to signup
http://localhost:3000/accounts/emailsignup

02 - Signup Form Validation and Error Handling

https://react-hook-form.com/

$ npm install react-hook-form validator

03 - Email Login and Third Party Auth

Authentication -> Set up sign-in method

Google -> Enabled

Add Project support email.

04 - Me Subscription and Editing User Data

05 - Uploading Avatars and Adding User Search

cloudinary.com

cloudinary.com -> Settings -> Upload -> Add upload preset

Name: Instagram-clone
Signing Mode: unsigned

06 - Adding New Posts and Uploading Media

https://docs.slatejs.org/

$ npm install slate slate-react slate-history
$ npm install escape-html

cloudinary.com -> Settings -> Upload -> Instagram-clone -> Upload Manipulations -> Incoming Transformation

Width: 500
Height: 500

07 - Liking, Saving, and Commenting on Posts

http://localhost:3000/p/dfbbf276-c000-4baf-b0fc-4769f4f55f8a

08 - Creating and Displaying Notifications

http://date-fns.org/

09 - Profile Page, plus Following and Unfollowing Users

10 - Finishing Explore Page

11 - Adding User Feed with Infinite Scroll

$ npm install react-graceful-image

12 - Finishing App

https://console.firebase.google.com/

Authentication -> Sign-in method

Add domain

---

Marley

Any questions on eng: https://jsdev.org/chat/
Любые вопросы на русском: https://jsdev.ru/chat/