Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bunyamin54/library-app-project
https://github.com/bunyamin54/library-app-project
javascript jsx-syntax react-router styled-components
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/bunyamin54/library-app-project
- Owner: Bunyamin54
- Created: 2023-07-31T10:52:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-31T11:06:17.000Z (over 1 year ago)
- Last Synced: 2023-07-31T12:45:21.260Z (over 1 year ago)
- Topics: javascript, jsx-syntax, react-router, styled-components
- Language: JavaScript
- Homepage: https://libray-app-projects-bgenc.vercel.app/
- Size: 3.83 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Clarusway
# Project- : Clarus Library
## Description
Project aims to create a Clarus Library.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
007 - Clarus Library (folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── 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
```
## Expected Outcome
## Objective
Build a Clarus Library using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### At the end of the project, students will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- 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 clarus-library`or `npx create-react-app clarus-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`
- Step 6: Add project gif to your project and README.md file.
## Notes
- You can add additional functionalities to your app.
## Demo
Clarus Library
## Google Books API
## How can we create an apikey for the Google Books API ? Watch the video!
Watch the video
**
☺ Happy Coding ✍
**