Say Hi React Query Project is complated

SayHiReactQuery

---

This study demonstrates the use of the React-Jquery library.In addition, the use of react-material and component-style are shown.

• The fakestoreapi API source lists fake product information.
• The product can be added to the cart
• The amount of product in the cart can be changed.
• As the amount of product changes, the total cost is recalculated.
• Product can be removed from the basket.

Installation

• npx create-react-app SayHiReactQuery --template typscript
• npm i @material-ui/core @material-ui/icons
• npm i react-query
• npm i styled-components @types/styled-components

Helpfull Websites

json-to-js fusionchartsReact-Query-Tutorial FakeStoreAPI

v.4.1.0.0: Merge pull request #21 from NisanurBulut/dev-sayhisemanticui

SayHiSemanticUi

This work is a MERNG application. Users share book status.The database is MongoDb and the backend is GraphQL.The user interface has been developed with ReactJs and SemanticUI components.

---

• Implemented apollo custom errors form form validation
• Created files&folders structure
• After login action user has token
• User can add book post
• User delete book post
• User delete his/her comment
• User can like other user's book posts
• User can comment on other users' book posts
• Users register with the application
• After login action user has token
• Showed error messages
• Used loading component for waiting processes
• Implemented custom hooks

Entities

BookPost	Comment	Like	User	RegisterInput
id: ID!	id: ID!	id: ID!	id: ID!	username: String!
author: String!	createdAt: String!	createdAt: String!	email: String!	password: String!
name: String!	username: String!	username: String!	token: String!	confirmPassword: String!
user: User!	id: ID!		username: String!	email: String!
createdAt: String!	body: String!		createdAt: String!	imageUrl: String!
comments:[Comment]!			imageUrl: String!
likes: [Like]!
likeCount: Int!
commentCount: Int!

• Query
  • getBookPosts: [BookPost]
  • getBookPost(postId: ID!): BookPost
• Mutation
  • register(registerInput: RegisterInput): User!
  • login(username: String!, password: String!): User!
  • createBookPost(author: String!, name: String!): BookPost!
  • deleteBookPost(postId: ID!): String!
  • createComment(postId: String!, body: String): BookPost!
  • deleteComment(postId: String!, commentId: ID!): BookPost!
  • likeBookPost(postId: ID!): BookPost!
• Subscription
  • newBookPost: BookPost!

Installation

• npm install apollo-server grahql mongoose
• npm install bcryptjs jsonwebtoken
• npm install @apollo/react-hooks apollo-cache-inmemory apollo-link-http apollo-client
• npm install --save dataloader

Helpfull Websites

json-to-js fusioncharts

Merge 13032021 Routing is complated

SayHiSemanticUi

---

• Implemented apollo custom errors form form validation
• Created files&folders structure
• After login action user has token
• User can add book post
• User delete book post
• User can like other user's book posts
• User can comment on other users' book posts
• Users register with the application
• After login action user has token
• Showed error messages
• Used loading component for waiting processes
• Implemented custom hooks
• Implemented Custom routing. The token is checked when its user refreshes the page. If there is a token, the user will not log in again.

Entities

BookPost	Comment	Like	User	RegisterInput
id: ID!	id: ID!	id: ID!	id: ID!	username: String!
author: String!	createdAt: String!	createdAt: String!	email: String!	password: String!
name: String!	username: String!	username: String!	token: String!	confirmPassword: String!
user: User!	id: ID!		username: String!	email: String!
createdAt: String!	body: String!		createdAt: String!	imageUrl: String!
comments:[Comment]!			imageUrl: String!
likes: [Like]!
likeCount: Int!
commentCount: Int!

• Query
  • getBookPosts: [BookPost]
  • getBookPost(postId: ID!): BookPost
• Mutation
  • register(registerInput: RegisterInput): User!
  • login(username: String!, password: String!): User!
  • createBookPost(author: String!, name: String!): BookPost!
  • deleteBookPost(postId: ID!): String!
  • createComment(postId: String!, body: String): BookPost!
  • deleteComment(postId: String!, commentId: ID!): BookPost!
  • likeBookPost(postId: ID!): BookPost!
• Subscription
  • newBookPost: BookPost!

Installation

• npm install apollo-server grahql mongoose
• npm install bcryptjs jsonwebtoken
• npm install @apollo/react-hooks apollo-cache-inmemory apollo-link-http apollo-client
• npm install --save dataloader
• npm install jwt-decode

Helpfull Websites

json-to-js fusioncharts

v.4.0.1.0: Merge pull request #18 from NisanurBulut/dev-sayhisemanticui

SayHiSemanticUi

---

• Implemented apollo custom errors form form validation
• Created files&folders structure
• After login action user has token
• User can add book post
• User delete book post
• User can like other user's book posts
• User can comment on other users' book posts
• Users register with the application
• After login action user has token
• Showed error messages
• Used loading component for waiting processes
• Implemented custom hooks

Entities

BookPost	Comment	Like	User	RegisterInput
id: ID!	id: ID!	id: ID!	id: ID!	username: String!
author: String!	createdAt: String!	createdAt: String!	email: String!	password: String!
name: String!	username: String!	username: String!	token: String!	confirmPassword: String!
user: User!	id: ID!		username: String!	email: String!
createdAt: String!	body: String!		createdAt: String!	imageUrl: String!
comments:[Comment]!			imageUrl: String!
likes: [Like]!
likeCount: Int!
commentCount: Int!

• Query
  • getBookPosts: [BookPost]
  • getBookPost(postId: ID!): BookPost
• Mutation
  • register(registerInput: RegisterInput): User!
  • login(username: String!, password: String!): User!
  • createBookPost(author: String!, name: String!): BookPost!
  • deleteBookPost(postId: ID!): String!
  • createComment(postId: String!, body: String): BookPost!
  • deleteComment(postId: String!, commentId: ID!): BookPost!
  • likeBookPost(postId: ID!): BookPost!
• Subscription
  • newBookPost: BookPost!

Installation

• npm install apollo-server grahql mongoose
• npm install bcryptjs jsonwebtoken
• npm install @apollo/react-hooks apollo-cache-inmemory apollo-link-http apollo-client
• npm install --save dataloader

Helpfull Websites

json-to-js fusioncharts

sayHiSemanticUi completed backend graphql api

SayHiSemanticUi

---

• Implemented apollo custom errors
• Created files&folders structure
• After login action user has token

Entities

BookPost	Comment	Like	User	RegisterInput
id: ID!	id: ID!	id: ID!	id: ID!	username: String!
author: String!	createdAt: String!	createdAt: String!	email: String!	password: String!
name: String!	username: String!	username: String!	token: String!	confirmPassword: String!
username: String!	id: ID!		username: String!	email: String!
createdAt: String!	body: String!		createdAt: String!
comments: [Comment]!
likes: [Like]!
likeCount: Int!
commentCount: Int!

• Query
  • getBookPosts: [BookPost]
  • getBookPost(postId: ID!): BookPost
• Mutation
  • register(registerInput: RegisterInput): User!
  • login(username: String!, password: String!): User!
  • createBookPost(author: String!, name: String!): BookPost!
  • deleteBookPost(postId: ID!): String!
  • createComment(postId: String!, body: String): BookPost!
  • deleteComment(postId: String!, commentId: ID!): BookPost!
  • likeBookPost(postId: ID!): BookPost!
• Subscription
  • newBookPost: BookPost!

Installation

• npm install apollo-server grahql mongoose
• npm install bcryptjs jsonwebtoken

SayHiMEAN is complated

SayHiMEAN

---

In this study, practice of grahql, apollo and angular has been done.

• Accesses mongodb database with GraphQl API.
• Angular FW is used on the frontend side.

Installation

• npm i express express-graphql graphql mongoose body-parser cors

Helpfull Websites

json-to-js fusioncharts

Smart booking Say Hi MERN is complated

Give a Star! ⭐

If you like or are using this project to learn or start your solution, please give it a star. Thanks!

SayHiMERN

---

GraphQL api and MongoDb database are used in this application.User object performs booking and home event operations with GraphQl API.the user subscribes to the application and logs on. It receives token data at the login process. With this token information, the application can be online. * React-material is used in interface designs. - If the user is not the owner of the event, he / she cannot see the detail information. - inserted react-material-spinner for waiting to response of api - The user views event detail in popup - The user can make the reservation via popup. - Avoided fetching data if components are inactive. - Each user can see their own booking list. - Each user can see their own event list. - The user can cancel the reservation.

SmartBook API

• Root Endpoint
• Get Events
• Get Bookings
• Login
• Create Event
• Create User
• Get Book Event
• Cancel Booking

for GraphQL Documentation

Getting Started

• npm install --save express body-parser
• npm install --save-dev nodemon
• npm install --save dataloader

Helpfull Websites

json-to-js fusioncharts

SayHiCode is complated

Give a Star! ⭐

If you like or are using this project to learn or start your solution, please give it a star. Thanks!

SayHiCode

With this application, the use of react hooks and context api has been implemented. Hooks used: useState, useContext, useEffect

Gihthub API

• Root Endpoint

• Get User

• Repos

• Followers

• Rate Limit

  For unauthenticated requests, the rate limit allows for up to 60 requests per hour. Unauthenticated requests are associated with the originating IP address, and not the user making requests.

  Helpfull Websites

  json-to-js fusioncharts