Typescript Version Of GraphQL Books Library Built Using React.JS, GraphQL, Apollo Client, Node.JS, Express.JS and MongoDB.
This is a Full Stack Project built using Typescript, React, Apollo-Client, Material-UI, Styled-Components, Styled-Icons in frontend and using GraphQL, Express & MongoDB in backend.
This project consist of 2 repos, this repo is the frontend repo and here is the link of backend repo: https://github.com/AhmedTohamy01/GraphQL-Express-Server
The project is a Book Library where you can explore available books and know a detailed information about each book, you can also add a new book or a new author.
In this page, you can see all available books listed in the left section
If you clicked on any book you can see the detailed information about this book
If you clicked on the Add button at the bottom of the page this will open a modal that allows you to add a new author or new book
If you clicked on the Add New Author button this will open a modal that allows you to enter Author Name & Author Age.
If you clicked on the Add New Button button this will open a modal that allows you to enter Book Name, Book Genre & Select Author for this book from available authors.
If the frontend app couldn't connect to GraphQL server the app will show a custom error message
I have built this project using the following technologies :
- React
- GraphQL.
- Apollo Client.
- Material UI.
- Styled-Components.
- Styled-Icons.
- VSCode.
To be able to use this react app locally in a development environment you will need the following:
-
Then From your terminal, you should do the following:
# Clone the backend repository
git clone https://github.com/AhmedTohamy01/GraphQL-Express-Server
# Go into the repository
cd GraphQL-Express-Server
# Install dependencies
npm install
# Run the app (and keep it running)
npm start
# Clone this repository
git clone https://github.com/AhmedTohamy01/Books-Library-GraphQL
# Go into the repository
cd Books-Library-GraphQL
# Install dependencies
npm install
# Run the app
npm start
- Now you can see the project in your browser. Happy Hacking!