- I will work on the UI and UI components from scratch using tailwindcss
- I will work on the SEO and SGC "static generated components" on the end of the project to save more time meanwhile.
- Admins theme currentlly working on it
- full access epic
- HR epic
- Humen Resource epic: access the insturctors and lower position
- Instructor theme
- Dashboard Epic
- Public theme.
- overview epic
- fonts
- main color gray-800
- second color gray-700
- hover color gray-900
- success text color green-600
- error text color red-600
- warnint text color yellow-600
- backgrounds
- main color gray-900
- second color gray-800
- light mani color gray-600
- light second color gray-500
- light hover color gray-700
- buttons
- success:
- main color gray-800
- second color gray-700
- hover color gray-900
- disabled color gray-500
- danger:
- main color red-800
- second color red-700
- hover color red-900
- disabled color red-500
- warning:
- main color yellow-800
- second color yellow-700
- hover color yellow-900
- disabled color yellow-500
- info:
- main color blue-800
- second color blue-700
- hover color blue-900
- disabled color blue-500
- success:
- inputs
- static
- main color gray-800
- second color gray-700
- focus-visible color gray-800
- focus-visible outline color gray-200
- success
- main color green-800
- second color green-700
- focus-visible color green-800
- focus-visible outline color green-200
- error
- main color red-800
- second color red-700
- focus-visible color red-800
- focus-visible outline color red-200
- static
-
created
Button, Input, Dynamic navbarUI components -
I needed to share the dynamic navbar between the home
"/"routes and the'/dashboard/**routes, So it was confusing to handle the navbar that was displayed in theDrawer.tsxUI component of the dashboard and the mainlayout.tsxof the nextjs root, because it will duplicate if I navigate to/dashboard/**, However I found out that I should use the following file structure to manage the layout as I want:/app | /(home) // don't add '/home' route |-- page.tsx |-- layout.tsx | /dashboard |-- page.tsx |-- layout.tsx | layout.tsx // the root layout of the app
- input status
- style the button status (status, variants, sizes)
- customize the home page layout.
- login form
- changed the color palette and write the brand
- login-form.tsx
- avatar dropdown list more customization and its navlinks.
- a lot and alot of layout changes.
- style the inputs (sizes)
- auto overflow the drawer nav links.
- adding hero component for home page.
- reinforce the button component, you can using it as a link or button and added the width and loading props.
- fixed the
action.tsxredirect issue by removing the"use server"directive. - set up axios and endpoints reusable snippets
- users table
- Loading status for dashboard content
- protected route using
is-auth.tsxcomponent - enable deploying to vercel by disable typescript error😑
- title component
facing issues while redirect the user after login, because of my wrong nextjs component usage
- I need to know where to use nextjs cookies and clien cookies. done
- understanding how the cookies and the composition pattern works in nextjs
- change the way I display avatar-list data, I need to seperate the aciton buttons and the navlinks
- set up react hook forms and yup
- change none
.tsxfiles to.ts
notes:
you will encounter the following error message, it because when you pass a null value in the react child like mapping an array of objects, let's say we have an array of objects for users we get it from an API. In this scenario you should implement a functionality to handle this error, and if you have an key of an object let's say address: null you can return it this way {address === null && "no address"}. There is another way to break this bug, but I did not try, you can check here and here with use cases
Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {street, city, state, zipCode, country}). If you meant to render a collection of children, use an array instead.it is hard to share the response of the catch and the try, so I should use ether RTK or React Query
- return the error message from the API request for the login form.
- update the api schema by the database changes
- changed the
is-auth.tsxcomponent to an async component and add"use server"directive. -
is-auth.tsxchecks if the user is signed in or not using an endpoint that responds if the token is valid or not, this procedure helped me to manage the authentication process efficiantly with no depending on the cookies - create custom skeleton UI Component. it needs more enhancements
- subtask: remove the navlink from the avatar list if the pathname === the navlink pathname
- badge UI Component
- create table, thead,tbody, tr,th,and td UI Components
- add outline button variant
- remove the
<Link>feature of theButton-with-link.tsxUI Component and only use it as a button, and change the component name toButton.tsx. If you need to use the same format of the button for the nextjs'sLinkyou can wrap theButtonUI Component with the nextjs'sLinknavigation tag.
- set up the initial procedures of react hook form "onChange"
- instructors data
- students data
- departments data
- subjects data
- reinforce the table and data component
- created reusable skeleton table
- refactor:
button.tsxcomponent now hasprops.outlineprop containsbooleantype. - refactor:
badge.tsxcomponent you can add variant prop
- feat: message UI component for the error and success messages
- reafactor: endpoints
- just strugling with server and client components pattern concept
- user avatar and dropdown uses the API data to display the user details and check if the user is loggedin instead of using the token
- create
drawer-container.tsxcomponent to use it as a parent async/await component, so I can use it to pass the data to the navbar for the user details and avatar image. - created
avataranddropdowncomponents instead ofavatar-with-list.
- block login and register pages if the user logged in
- clean up some components and unneeded files
- using validToken endpoint to check if the user is logged in for the logout function instead of using tokens to have more security.
- [/] update user page. // I completed the half of this work
- display the user image
-
file-input.tsxUI Component - changed the get user by id schema with the backend developer
- removed the cookies from any global scope or client side components.
- fixed the catch block bug "I got error but the user updates the data to the server successfull" the solution was that I needed to return the status code or the data, if I returned only the response it will return nextjs's error, due to it is a server code.
- refctore: button component, now you can use it as a link.
- feat: file input component
- feat: role-based component as a wrapper
is-role-auth.tsx, you need only to wrap the main layout returned value and it will handle the authorization. - refactor: user's dropdown menu displays the links depends on its role.
- user role update.
- setting up yup schema
- user delete.
- button enhancements
- user create.
- improve the delete button. I changed the main component to client component, thus I did not needed to customize delete button client component.
- reset user's password.
- I created a popover for the delete button of the users; to avoid deleting users unintentionally.
- enhanced the typescript deffinections and yup schemas.
- I needed to replace the className attribute at the last of the UI components props to apply the additional className prop.
- customize dynamic table for all the data, avoiding the duplication.
- error messages for all forms, login, create user, update user and reset password
- created response deffinition for the endpoints that return errors and success messages.
- delete button of the
table-layer.tsxdisabled in all pages include the current user table row, thus I need to solve this issue the next session.
- forget password endpoint with the code and email.
- instructors delete, udpate, create.
- user and the current user's profile.
- dynamic breadcrump.
- button: you can pass any props or attribute it will dynamically work, but you must pass the value prop
- inputs: you can pass any prop or attribute it will dynamically work.
- nav: dynamically displaying the data depending on the user status
- user avatar with a list: displays data and links depending on its authentication data if authenticated or not
- logo layout: provide some props to customize it