PureDevPer / Mystagram-FrontEnd

Front-End | Instagram clone with React, React Native, Express, GraphQL and Prisma

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mystagram - Front End

Instagram replica with React, React Native, Express, GraphQL and Prisma

MystaGram (Front-End)

Front End for Instagram clone (GraphQL + Hooks)

react react_router react_hooks react_dom react_toastify GraphQL styled_components apollo_boost Server

MystaGram (Back-End)

MystaGram (Back-End)

prisma GraphQL_Yoga passport jsonwebtoken nodemailer dotenv babel nodemon AWS multer_s3 Server

MystaGram (iOS / Android App)

MystaGram (App)

expo react_native react react_hooks react_navigation styled_components graphql axios apollo_boost

User Stories

  • Home
  • explore
  • Activity
  • Search
  • Profile
  • Edit Profile
  • Login
  • LogOut
  • Photo Like
  • Photo Comments
  • Photo Details
  • Photo - Multiple

Reading

React Toastify

Styled Components

  • ThemeProvider: A helper component for theming. Injects the theme into all styled components anywhere beneath it in the component tree. https://www.styled-components.com/docs/api#themeprovider
  • theme: An object that will be injected as theme into all interpolations in styled components beneath the provider
  • createGlobalStyle: A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components. In the case of createGlobalStyle, this limitation is removed and things like CSS resets or base stylesheets can be applied. https://www.styled-components.com/docs/api#createglobalstyle

React-router-dom

HashRouter vs BrowserRouter

Apollo Boost

React Fragments

https://reactjs.org/docs/fragments.html

  • Fragments: A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

React Hooks

https://reactjs.org/docs/hooks-overview.html

React Router - withRouter

https://reacttraining.com/react-router/core/api/withRouter

You can get access to the history object’s properties and the closest <Route>'s match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

About

Front-End | Instagram clone with React, React Native, Express, GraphQL and Prisma


Languages

Language:JavaScript 96.3%Language:HTML 3.7%