Skip to content

Commit b58ecdd

Browse files
anijitsaoanijitsao
committed
ui code copied
1 parent a1a6695 commit b58ecdd

40 files changed

+6193
-81
lines changed

‎package-lock.json

Lines changed: 707 additions & 81 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,10 @@
2626
"react-dom": "^18.2.0",
2727
"style-loader": "^3.3.2",
2828
"uuid": "^9.0.0"
29+
},
30+
"devDependencies": {
31+
"http-server": "^14.1.1",
32+
"webpack": "^5.76.3",
33+
"webpack-cli": "^5.0.1"
2934
}
3035
}

‎public/.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-react",
5+
{
6+
"runtime": "automatic"
7+
}
8+
]
9+
]
10+
}

‎public/README.md

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# react-app-simple-book-search-graphql
2+
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/)
4+
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/).
6+
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.
8+
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.
10+
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>
30+
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_
42+
43+
44+
## Installation
45+
46+
Clone the repository:
47+
48+
```bash
49+
$ git clone https://github.com/anijitsao/react-app-simple-book-search-graphql.git
50+
```
51+
52+
Navigate inside the directory:
53+
54+
```bash
55+
$ cd react-app-simple-book-search-graphql
56+
```
57+
58+
Install all the necessary dependecies and run the application
59+
60+
```bash
61+
$ npm install
62+
63+
# To serve the application we use a npm module named http-server
64+
$ npm run serve
65+
```
66+
67+
### Login to book search
68+
69+
---
70+
71+
1. Open web browser and type`http://localhost:8080` in the address bar to load the application
72+
2. Now login with username `admin` and password `admin123`
73+
74+
**Test users**
75+
76+
| Username | Password |
77+
| -------- | -------- |
78+
| admin | admin123 |
79+
80+
_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/)_
81+
82+
## Screenshots
83+
84+
Some screens of the application is given below for better understanding.
85+
86+
Desktop as well as Mobile version of the screenshots are given side by side.
87+
88+
<p> Login Screen <br/>
89+
<img src="screenshots/desktop 1.png" width="590px" title="Login screen"/>
90+
<img src="screenshots/mobile 1.png" width="190px" title="Login screen"/>
91+
</p>
92+
93+
<p> If credentials are not correct <br/>
94+
<img src="screenshots/desktop 2.png" width="590px" title="Entering credentials screen"/>
95+
<img src="screenshots/mobile 2.png" width="190px" title="Entering credentials screen"/>
96+
</p>
97+
98+
<p> After submitting credentials and Search a book <br/>
99+
<img src="screenshots/desktop 3.png" width="590px" title="After submitting credentials screen"/>
100+
<img src="screenshots/mobile 3.png" width="190px" title="After submitting credentials screen"/>
101+
</p>
102+
103+
<p> Add a Book <br/>
104+
<img src="screenshots/desktop 4.png" width="590px" title="If credentials are not correct screen"/>
105+
<img src="screenshots/mobile 4.png" width="190px" title="If credentials are not correct screen"/>
106+
</p>
107+
108+
<p> Edit a Book <br/>
109+
<img src="screenshots/desktop 5.png" width="590px" title="After a successful login screen"/>
110+
<img src="screenshots/mobile 5.png" width="190px" title="After a successful login screen"/>
111+
</p>
112+
113+
<p> Delete a Book <br/>
114+
<img src="screenshots/desktop 6.png" width="590px" title="When a new user joins screen"/>
115+
<img src="screenshots/mobile 6.png" width="190px" title="When a new user joins screen"/>
116+
</p>
117+

0 commit comments

Comments
 (0)