Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaplanh/react-mat_dev-library
https://github.com/kaplanh/react-mat_dev-library
async-await axios-react react react-context-api react-styled-components react-useeffect react-usestate try-catch
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaplanh/react-mat_dev-library
- Owner: kaplanh
- Created: 2023-07-31T10:08:18.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-23T04:02:33.000Z (9 months ago)
- Last Synced: 2024-02-23T22:34:25.040Z (9 months ago)
- Topics: async-await, axios-react, react, react-context-api, react-styled-components, react-useeffect, react-usestate, try-catch
- Language: JavaScript
- Homepage: https://react-matdevlibrary.vercel.app/
- Size: 34.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MAT_DEV Library
[Live Link](https://react-matdevlibrary.vercel.app/)
## Description
Project aims to create a MAT_DEV Library.
## Problem Statement
## Project Skeleton
```
Mat_Dev Library (folder)
|
|----readme.md
├── public
│ └── index.html
├── src
│ ├── App.js
│ ├── assets
│ │ ├── about.png
│ │ ├── book.jpg
│ │ ├── books.jpg
│ │ └── const.png
│ │ │
│ ├── components
│ │ ├── card
│ │ │ ├── Card.jsx
│ │ │ └── Card.style.jsx
│ │ ├── footer
│ │ │ ├── Footer.jsx
│ │ │ └── Footer.style.jsx
│ │ ├── header
│ │ │ ├── Header.jsx
│ │ │ └── Header.style.jsx
│ │ └── navbar
│ │ │ ├── Navbar.jsx
│ │ │ └── Navbar.style.jsx
│ │ │
│ ├── context
│ │ ├── AuthContext.jsx
│ │ └── ThemeContext.jsx
│ │ │
│ ├── index.css
│ ├── index.js
│ │ │
│ ├── pages
│ │ ├── about
│ │ │ ├── About.jsx
│ │ │ └── About.style.jsx
│ │ ├── detail
│ │ │ ├── Detail.jsx
│ │ │ └── Detail.style.jsx
│ │ ├── home
│ │ │ ├── Home.jsx
│ │ │ └── Home.style.jsx
│ │ ├── login
│ │ │ ├── Login.jsx
│ │ │ └── Login.style.jsx
│ │ └── register
│ │ │ ├── Register.jsx
│ │ │ └── Register.style.jsx
│ │ │
│ ├── router
│ │ ├── AppRouter.jsx
│ │ └── PrivateRouter.jsx
│ │ │
│ └── styles
│ ├── Flex.jsx
│ ├── Global.styles.jsx
│ └── theme.js
├── package.json
└── yarn.lock
```
## Objective
Build a Mat_Dev Library using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
- Styled Components
### At the end of the project, developers will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS and Styled Components.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Steps to Solution
- Step 1: Create React App using `yarn create react-app matdev-library`or `npx create-react-app matdev-library`
- Step 2: Go to `https://developers.google.com/books/docs/v1/using?hl=tr` and get api key.
- Step 3 : Using api key and `axios` for getting data from `https://www.googleapis.com/books/v1/volumes?q=${query}&printType=${printType}&key=${APP_KEY}`.
- Step 4: You are expected to code your project with **styled component**
- Step 5 : You can get random login background image from `https://picsum.photos/1600/900`
## SVG to React-Component
-
- SVGR
## Google Books API
## How can we create an apikey for the Google Books API ? Watch the video!
Watch the video
**
☺ Happy Coding ✍
**