#GitHub repo:
https://github.com/aizhanadb/Author-Book-Management-System-Team-1-React-Project
#CodeSandBox Live Link:
https://wgd70w.csb.app/
#Link for fetching:
https://63416a4f20f1f9d799729322.mockapi.io/api/v1/users
- Determined the necessary points and tasks.
- Tech Lead is going to be Aizhan, Scrum Master is going to be Çağatay Şensoy
- Instead of dividing into teams, we will work on project together. The aim to share all knowledge with each other.
Gist and Tasks:
- Add login form.
- Use email and password
- Bonus: permission based (user A can not create/update/delete other users and other users books)
-
Add ability to view books. Click name -> /users/1/books
-
Add ability to create/update/delete books.
-
Form validations:
- title: required
- genre: optional
- description: required
- isbn: required (must be 8 chars length or less)
- edition: required
-
Add the ability to leave a review for each book. Text Rating 1-5
-
Add ability to filter books by:
- title
- isbn
- genre
- Add pagination to users and books. 10 users/books per page
What we practiced ?
- Fetch API calls, send data to API for creating, deleting and updating
- Logged in feature with verification on API data calls.
- Users logged in can change only own data, can not access other users' data.
- Route used for linked between components
- Conditional rendering
- Hooks, useState, useEffect, useContext
- Loading feature
- Arrow functions
- Rendering list data with map
- Filtering data
- setState callbacks
- Context API
- Project structure
- Create, update and delete functionality for components
- Before remove user, modal opens and asking for confirmation
- Components management
- Search functionality
- Used formik for store values and trigger the sending new values to API
- User static star rating- data and showing it on UI and change on API
Tech Used
- Formik
- React Router
- useReducer
- Context Api
- Material UI
- Try to use useQuery instead of useEffect
- React strap
- React-icons
- Moment for the dates
- Axios
- Bootstrap
- Font-awesome
- React-icons
- Context API
Challenges:
- Copy the all users and searching on that
- With updating , use formik
- Create Route for conditional rendering
- Create log out and alert message -
- Books page appears before fetching/Loading doesn't function, tried many ways to solve it (our guess is that is because of react router and it's link)
- Failed to fetch the data from Nested Rating api (response was only for one book)
- Struggled to get clicked user's data from within Books component
- Fetching book review- user static star rating- data and showing it on UI, for solution, an empty array with numbers was created and then, this array was mapped and conditional rendering was created.
Enjoy
- Create Route
- Running child for loader
- Working with real users
- Create static star rating render logic
Unfinished
- Add ability to filter books by:
- title
- isbn
- genre
- Add pagination to users and books. 10 users/books per page
- Add ability to leave a comment for each book
Questions
- API & DEBOUNCING