in this project, I'm trying to challenge my adaptability and resilience by facing new frameworks and libraries for the first time and depending on the authorized documentation, Thus you will notice some bad practices in some components It's intentional because I'm trying to simulate the real world project process approach then I'll enhance the components and the code on the final stage.
BIG NOTE: this project needs more refactoring after finishing its development
- react query in a single file (get data, post data, update data, delete data).
- register
- login
- user
- categories
- products
- rewrite the custom react hooks in the common way that devs write.
- use shared components for duplicated components and features.
- user profile
- users & categories pagination
- get categories: get(categories)
- get single category: get(categoy/:id)
- update category: post(category/edit/:id)
- delete category: post(category/:id)
- add category: post(category/add)
- save pagination data on reload using cookies: maybe I can shorten the code using react custom hooks and send the cookies name and value as hook arguments
- skeleton effect for loading elements
- get products : get(products)
- add product: post(product/add)
- create dummy data to send for the database onChange the inputs
- create an image post request to send the images to the API
- handle the loading progress bar of the image keeping in mind the loading process works normally with any network speed
- get single product: get(product/:id)
- update product: post(product/edit/:id)
- remove product: post(product/:id)
- set up react form hooks
- bring the product data
- setup the images uploading progress bar
- forms skeleton
- refine (AddProduct.tsx, UpdateProduct.tsx) components
- create a reusable function for product images uploading
NOTE: I encountered some bugs, if I added the useGetSingleData(id: number)
hook into The Returned DOM it occurs the following error.
Unexpected Application Error! Rendered more hooks than during the previous render. Error: Rendered more hooks than during the previous render.
so I can't use any function containing a hook even if it doesn't return a hook.
For more information about the above error read more
- search function for users, categories, products
- create a custom search hook
- protected routes
- user-based routes
-
refine the react query best practice and typescript types users
- users
- add user
- update user
- remove user
categories
- categories
- add category
- update category
- remove category
products
- products
- add product
- update product
- remove product
-
refine toast messages for the correct status and display normal messages for the rest
-
separate public ,private and paginated data APIs