AhmedTohamy01 / Books-Library-Typescript-GraphQL

React-Typescript version of GraphQL Simple Books Library built using React, Typescript, Material-UI, Styled-Components, Apollo-Client, GraphQL, Node.JS and Express.JS.

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.

Table of Contents

• Project Walk-Through
  • Available Books
  • Book Information
  • Add Button
  • Add New Author
  • Add New Book
  • Custom Error Message
• Technology Used
• How To Use

Project Walk-Through

Available Books

In this page, you can see all available books listed in the left section

Book Information

If you clicked on any book you can see the detailed information about this book

Add Button

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

Add New Author

If you clicked on the Add New Author button this will open a modal that allows you to enter Author Name & Author Age.

Add New Book

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.

Custom Error Message

If the frontend app couldn't connect to GraphQL server the app will show a custom error message

Technology Used

I have built this project using the following technologies :

• React
• GraphQL.
• Apollo Client.
• Material UI.
• Styled-Components.
• Styled-Icons.
• VSCode.

How To Use

To be able to use this react app locally in a development environment you will need the following:

1. You will need Git and Node.js installed on your computer.

2. 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

3. Now you can see the project in your browser. Happy Hacking!