Skip to content

Commit 2d6f4b2

Browse files
anijitsaoanijitsao
committed
README file is updated
1 parent 9639abc commit 2d6f4b2

File tree

2 files changed

+139
-150
lines changed

2 files changed

+139
-150
lines changed

‎README.md

Lines changed: 139 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,49 @@
1-
# react-simple-apollo-server-graphql
2-
Simple [GraphQL](https://graphql.org/) APIs implementation using [Node JS](https://nodejs.org/en/docs/) and [AWS Lambda](https://aws.amazon.com/lambda/) with [Apollo Server](https://www.apollographql.com/docs/apollo-server/) and [MongoDB Atlas](https://www.mongodb.com/docs/atlas/).
1+
# react-app-simple-book-search-graphql
32

4-
This example illustrates how to deploy [GraphQL](https://graphql.org/) APIs using [NodeJS](https://nodejs.org/en/docs/) functions running on [AWS Lambda](https://aws.amazon.com/lambda/) using the traditional [Serverless](https://www.serverless.com/framework/docs/providers/aws/guide/intro) Framework. The deployed functions work with [MongoDB Atlas](https://www.mongodb.com/docs/atlas/).
3+
A Simple Book Search Application using [React JS](https://reactjs.org/docs/getting-started.html), a JavaScript library to make awesome UI by Facebook, [Node JS](https://nodejs.org/en/docs) with [AWS Lambda](https://aws.amazon.com/lambda/) and [MongoDB](https://docs.mongodb.com/). To connect with the Backend [GraphQL](https://graphql.org/) is used with the framework [Apollo Client](https://www.apollographql.com/docs/react/) where the [Apollo Server](https://www.apollographql.com/docs/react/)
54

6-
To work with [GraphQL](https://graphql.org/) features, i.e. **Type Definitions, Mutations, Queries, Resolvers** the framework [Apollo Server](https://www.apollographql.com/docs/apollo-server/) is used.
5+
This application uses [React JS](https://reactjs.org/docs/getting-started.html) component oriented UI creation paradigm. All components are written in [JSX](https://reactjs.org/docs/jsx-in-depth.html) and ES6 style and are combined to get a single build for production purpose using [Webpack 5](https://webpack.js.org/concepts/).
76

8-
This Example works with [AWS HTTP API](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-develop.html) events i.e. `httpApi`. All *logs* for the function is kept in [AWS Cloudwatch](https://aws.amazon.com/cloudwatch/) i.e *persistent*.
9-
10-
For *session tracking* [JSON Web Token (JWT)](https://jwt.io/) is used.
7+
ES6 `module` creation along with `import /export` is used. [Babel](https://babeljs.io/docs/en/babel-preset-react) is used to _transpile_ all [JSX](https://reactjs.org/docs/jsx-in-depth.html) code to vanilla JavaScript code. To install all the dependecies `npm` is used.
118

12-
To use the code in this example you **must** have an valid [AWS account](https://aws.amazon.com/account/) and necessary [AWS IAM](https://aws.amazon.com/iam/) roles and programmatic access to an user. You **must** have a [MongoDB Atlas](https://www.mongodb.com/docs/atlas/) account.
9+
Back end is implemented using [Node JS](https://nodejs.org/en/docs) with [AWS Lambda](https://aws.amazon.com/lambda/) and [MongoDB](https://docs.mongodb.com/). [Atlas](https://www.mongodb.com/cloud/atlas), the _Cloud_ version of [MongoDB](https://docs.mongodb.com/) is used.
1310

14-
**This application is closely related to [simple-book-search-react](https://github.com/anijitsahu/simple-book-search-react). For Frontend deployment please check the repo [simple-book-search-react](https://github.com/anijitsahu/simple-book-search-react)**
11+
For UI creation [HTML5](https://www.w3schools.com/html/html5_intro.asp) and [CSS3](https://www.w3schools.com/css/) are used. [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout), the new feature of [CSS3](https://www.w3schools.com/css/) is used for layout creation purpose.
12+
13+
This is a _responsive web application_ for viewing in both Mobile and Desktop.
14+
15+
**This Application is closely related to [simple-apollo-server-graphql-lambda](https://github.com/anijitsahu/simple-apollo-server-graphql-lambda). For Backend Deployment details please check [simple-apollo-server-graphql-lambda](https://github.com/anijitsahu/simple-apollo-server-graphql-lambda).**
16+
17+
## Features
18+
19+
1. Code is rewritten with [React JS 18](https://reactjs.org/docs/getting-started.html) and [Node JS 18](https://nodejs.org/en/docs/)
20+
2. Latest features of JavaScript i.e. ES6, ES7, ES8 is used
21+
3. [React JS Hooks](https://reactjs.org/docs/hooks-intro.html) are used with Functional components
22+
4. ES8 `async/await` is used
23+
24+
<br/>
25+
26+
<ol start=5>
27+
<li> This is Simple Book Search Application. It is a <b>CRUD</b> application. </li>
28+
<li> It is a Full Stack Application. This repo contains only the <i>Frontend</i> part. For the <b>Backend</b> please check the <a href="https://github.com/anijitsahu/simple-apollo-server-graphql-lambda">simple-apollo-server-graphql-lambda</a></li>
29+
</ol>
1530

31+
7. All the book details, authors and publication detils are stored in the [MongoDB Atlas](https://www.mongodb.com/cloud/atlas). This is a _free/ shared_ account on [Atlas](https://www.mongodb.com/cloud/atlas). **So Please use it wisely**
32+
33+
<ol start=8>
34+
<li>Login feature is added </li>
35+
<li>Error will be shown if the credentials are not correct or Network is <i>not</i> present</li>
36+
<li> <b>Session tracking</b> is supported using <a href="https://https://jwt.io/">JSON Web Tokens (JWT)</a>
37+
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">LocalStorage</a> is used to save the <a href="https://https://jwt.io/">JSON Web Tokens (JWT)</a></li>
38+
<li> To implement the features of <a href="https://graphql.org/">GraphQL</a> like <b>Queries, Mutations</b> the framework <a href="https://www.apollographql.com/docs/react/">Apollo Client</a> is used</li>
39+
</ol>
40+
41+
13. _for simplicity passwords are not encrypted_
1642

1743
## Features
44+
1845
1. [AWS Lambda](https://aws.amazon.com/lambda/) function using [NodeJS](https://nodejs.org/en/docs/)
19-
2. Function is using latest version of [AWS SDK JavaScript v3](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/welcome.html) with all **ES6+** syntaxes like Promises, `async/await`
46+
2. Function is using latest version of [AWS SDK JavaScript v3](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/welcome.html) with all **ES6+** syntaxes like Promises, `async/await`
2047

2148
<ol start="3">
2249
<li>
@@ -28,8 +55,7 @@ To use the code in this example you **must** have an valid [AWS account](https:/
2855
<li>
2956
All the deployment is created in <a href="https://aws.amazon.com/s3/">AWS S3</a> to store the <code>.zip</code> of the function code and <a href="https://aws.amazon.com/cloudformation/">AWS CloudFormation</a> Stack.
3057
</li>
31-
</ol>
32-
58+
</ol>
3359

3460
6. For **session tracking** [JWT](https://jwt.io/) is used.
3561
7. [AWS HTTP API](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-develop.html) are using [AWS API GateWay](https://aws.amazon.com/api-gateway/)
@@ -40,12 +66,47 @@ To use the code in this example you **must** have an valid [AWS account](https:/
4066
<li> This APIs can also be consumed by any <b>Frontend Application</b>.</li>
4167
<li> To use <a href="https://graphql.org/">GraphQL</a> features <a href="https://www.apollographql.com/docs/apollo-server/">Apollo Server</a> is used
4268
<li> For the <i>Schema</i> generation <b>Type Definitions</b> are added. <b>Queries</b> are used for the <i>Reading</i> operations while <b>Mutations</b> are added for <i>Mutable</i> operations.
43-
</ol>
69+
</ol>
4470

71+
12. [NPM](https://www.npmjs.com/) dependencies are used for various purposes.
4572

73+
## Installation
4674

47-
12. [NPM](https://www.npmjs.com/) dependencies are used for various purposes.
75+
Clone the repository:
76+
77+
```bash
78+
$ git clone https://github.com/anijitsao/react-app-simple-book-search-graphql.git
79+
```
80+
81+
Navigate inside the directory:
82+
83+
```bash
84+
$ cd react-app-simple-book-search-graphql
85+
```
86+
87+
Install all the necessary dependecies and run the application
88+
89+
```bash
90+
$ npm install
91+
92+
# To serve the application we use a npm module named http-server
93+
$ npm run serve
94+
```
4895

96+
### Login to book search
97+
98+
---
99+
100+
1. Open web browser and type`http://localhost:8080` in the address bar to load the application
101+
2. Now login with username `admin` and password `admin123`
102+
103+
**Test users**
104+
105+
| Username | Password |
106+
| -------- | -------- |
107+
| admin | admin123 |
108+
109+
_tested with latest versions of <img src="screenshots/chrome.png" width="20px" title="Google Chrome">[Google Chrome](https://www.google.com/chrome/) and <img src="screenshots/firefox.png" width="25px" title="Firefox Developer edition">[Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/)_
49110

50111
## Usage
51112

@@ -54,6 +115,7 @@ First clone the repo
54115
```bash
55116
$ git clone https://github.com/anijitsao/simple-apollo-server-graphql.git
56117
```
118+
57119
Install all the necessary dependencies by going inside the directory
58120

59121
```bash
@@ -64,7 +126,6 @@ $ cd simple-apollo-server-graphql
64126
$ npm install
65127
```
66128

67-
68129
### Deployment
69130

70131
In order to deploy the example, you need to run the following command:
@@ -75,34 +136,33 @@ $ serverless deploy
75136

76137
### Invocation
77138

78-
After successful deployment, you can invoke the deployed **functions / resolvers**.
139+
After successful deployment, you can invoke the deployed **functions / resolvers**.
79140

80-
However, to call using [GraphQL](https://graphql.org/) API you can use any *supported* Client like [Altair GraphQL Client](https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeellpciglgpaodhkhmapeljopja?hl=en) with the `url` and *HTTP Verbs* as shown in Terminal after using `serverless deploy`.
141+
However, to call using [GraphQL](https://graphql.org/) API you can use any _supported_ Client like [Apollo Sandbox](https://studio.apollographql.com/sandbox/explorer/?_gl=1%2Abuieem%2A_ga%2AMjAyNTg2NTkxOC4xNjc5OTg3MzI4%2A_ga_0BGG5V2W2K%2AMTY3OTk4NzMyOC4xLjEuMTY3OTk4NzM0NS4wLjAuMA..) with the `url` and _HTTP Verbs_ as shown in Terminal.
81142

82143
## API Listing
83144

84145
API listing is given below, -
85146

86-
**POST** /url-of-the-deployed-lambda/graphql
147+
All APIs have common endpoint as following.
148+
**POST** /url-of-the-deployed-lambda/graphql (for `localhost` it will be `http://localhost:4000/graphql`)
87149

88150
Following username and password is valid
89151

90-
|Username | Password |
91-
|---|---|
92-
|admin | admin123 |
152+
| Username | Password |
153+
| -------- | -------- |
154+
| admin | admin123 |
93155

94156
```javascript
95157
query CreateTokenQuery{
96158
// these are the only possible username and password
97-
createToken(username: "admin", password: "admin123") {
159+
createToken(username: "admin", password: "admin123") {
98160
token
99161
}
100162
}
101163
```
102164

103-
**GET** /url-of-the-deployed-lambda/graphql
104-
105-
Following *Queries* use the same URL mentioned above
165+
Following _Queries_ use the same URL mentioned above
106166

107167
```javascript
108168
query HelloQuery {
@@ -130,9 +190,7 @@ query FindAllAuthors{
130190
}
131191
```
132192

133-
**POST** /url-of-the-deployed-lambda/graphql
134-
135-
Following *Mutations* have the same URL mentioned above
193+
Following _Mutations_ have the same URL mentioned above
136194

137195
```javascript
138196
mutation ModifyCount {
@@ -163,15 +221,13 @@ mutation UpdateBookMutation($updateId: ID!, $bookData: UpdataBookParams!) {
163221
// variables
164222
{
165223
"updateId": "id-of-the-book-to-update",
166-
"bookData": {
224+
"bookData": {
167225
"name": "You Don't Know ES6"
168226
}
169227
}
170228
```
171229

172-
**POST** /url-of-the-deployed-lambda/graphql
173-
174-
Following **Author** related *Mutations* have the same URL mentioned above
230+
Following **Author** related _Mutations_ have the same URL mentioned above
175231

176232
```javascript
177233
mutation AddAuthorMutation {
@@ -199,10 +255,60 @@ mutation UpdateAuthorMutation(
199255
// variables
200256
{
201257
"updateId": "id-of-the-author-to-update",
202-
"authorData": {
258+
"authorData": {
203259
"firstName": "Agatha",
204260
"lastName": "Christie",
205261
"country": "United Kingdom"
206262
}
207263
}
208264
```
265+
266+
## Screenshots
267+
268+
Some screens of the application is given below for better understanding.
269+
270+
Desktop as well as Mobile version of the screenshots are given side by side.
271+
272+
<p> Login Screen <br/>
273+
<img src="screenshots/desktop 1.png" width="590px" title="Login screen"/>
274+
<img src="screenshots/mobile 1.png" width="190px" title="Login screen"/>
275+
</p>
276+
277+
<p> If credentials are not correct <br/>
278+
<img src="screenshots/desktop 2.png" width="590px" title="Entering credentials screen"/>
279+
<img src="screenshots/mobile 2.png" width="190px" title="Entering credentials screen"/>
280+
</p>
281+
282+
<p> After submitting credentials and Search a book <br/>
283+
<img src="screenshots/desktop 3.png" width="590px" title="After submitting credentials screen"/>
284+
<img src="screenshots/mobile 3.png" width="190px" title="After submitting credentials screen"/>
285+
</p>
286+
287+
<p> Add a Book <br/>
288+
<img src="screenshots/desktop 4.png" width="590px" title="If credentials are not correct screen"/>
289+
<img src="screenshots/mobile 4.png" width="190px" title="If credentials are not correct screen"/>
290+
</p>
291+
292+
<p> Edit a Book <br/>
293+
<img src="screenshots/desktop 5.png" width="590px" title="After a successful login screen"/>
294+
<img src="screenshots/mobile 5.png" width="190px" title="After a successful login screen"/>
295+
</p>
296+
297+
<p> Delete a Book <br/>
298+
<img src="screenshots/desktop 6.png" width="590px" title="When a new user joins screen"/>
299+
<img src="screenshots/mobile 6.png" width="190px" title="When a new user joins screen"/>
300+
</p>
301+
302+
Simple [GraphQL](https://graphql.org/) APIs implementation using [Node JS](https://nodejs.org/en/docs/) and [AWS Lambda](https://aws.amazon.com/lambda/) with [Apollo Server](https://www.apollographql.com/docs/apollo-server/) and [MongoDB Atlas](https://www.mongodb.com/docs/atlas/).
303+
304+
This example illustrates how to deploy [GraphQL](https://graphql.org/) APIs using [NodeJS](https://nodejs.org/en/docs/) functions running on [AWS Lambda](https://aws.amazon.com/lambda/) using the traditional [Serverless](https://www.serverless.com/framework/docs/providers/aws/guide/intro) Framework. The deployed functions work with [MongoDB Atlas](https://www.mongodb.com/docs/atlas/).
305+
306+
To work with [GraphQL](https://graphql.org/) features, i.e. **Type Definitions, Mutations, Queries, Resolvers** the framework [Apollo Server](https://www.apollographql.com/docs/apollo-server/) is used.
307+
308+
This Example works with [AWS HTTP API](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-develop.html) events i.e. `httpApi`. All _logs_ for the function is kept in [AWS Cloudwatch](https://aws.amazon.com/cloudwatch/) i.e _persistent_.
309+
310+
For _session tracking_ [JSON Web Token (JWT)](https://jwt.io/) is used.
311+
312+
To use the code in this example you **must** have an valid [AWS account](https://aws.amazon.com/account/) and necessary [AWS IAM](https://aws.amazon.com/iam/) roles and programmatic access to an user. You **must** have a [MongoDB Atlas](https://www.mongodb.com/docs/atlas/) account.
313+
314+
**This application is closely related to [simple-book-search-react](https://github.com/anijitsahu/simple-book-search-react). For Frontend deployment please check the repo [simple-book-search-react](https://github.com/anijitsahu/simple-book-search-react)**

0 commit comments

Comments
 (0)