- This project is a hiring program prepared by Malwation on application development.
- Case is wep application about users list that have different functionality.
- There are two case for this program that frontend web development and backend web development.
- My case includes two options.So My app is Full-Stack web development [ MERN Stack (Next.js) ].
✔️ redux-toolkit --> Client Side State Management
✔️ redux-toolkit-query --> Server Side State Management
✔️ next-auth --> Authentication
✔️ react-hook-form --> Management Form Action and Validations
✔️ validator --> Form Validations
✔️ dayjs --> Handling Time and Date
✔️ tailwindcss --> Handling Styling
✔️ meterial-ui --> User Interface
✔️ gsap --> Awesome Animation
✔️ react-toastif --> Feedback
✔️ express --> Node.js Framework
✔️ mongoose --> MangoDB Object Modeling
✔️ nodemon --> Automaticaly Restarting
✔️ bcryptjs --> Encryption, crtpt
✔️ cors --> CORS
✔️ meterial-ui --> User Interface
✔️ jsonwebtoken --> Web Token
✔️ mangoDB --> Database [No libary :)]
The user should be able to make the following entries
- Name
- Password
- Role,Gender,Status
Goal
- Taking the above information from the user as input in a form
- Create User Account by registering information to the database
- Update User Account by registering information to the database
- Delete User Account by removing information in the database
Project Details
- Tailwindcss, pure css and metarial ui built in css-styles features is used for css edits.
- It is designed as a single page application.
- Next.js is used for Frontend web development, Next Auth is used for Auth process.
- There are 3 (three) page. Main page, login page and register page.
- Login page has a animation that trigger with mouse scroling.
- User must scroling to reach to login form.
- User need to scroling to reach login form when in the login route.
- There are one main custom component (Forms.js) file that contains 4 form component and Icon Component.
- Also in some files has micro components.
- Login process implements via next.js built-in api routes.
- App has protected routes.
- if User has not session (via next auth) user will re-direct to login page.
- if User has session (via next auth) user will re-direct to main page.
- Other process about database implements via node.js server.
- There are function that able to auth process in the server but theese are inactive.( Next auth used).
- These can be activated İf desired.
- When user account createted The password firstly hashed and after registered.
- There two button for change to user status without open the update dialog.. (Active/DeActive)
- User can multiple update accounts status at the same time.
- User can multiple delete account at the same time.
- User can update one account at the same time.
- Log is created after Each CRUD operation.
- When user registered some features default assigned. (role:User , status:"Active")
- Each account has a log about CRUD process.
- Each Form has a validation and error message (dynamicly).
- In case of clicking on a different address, a 404 not found page is shown to the user.
- Each user have a avatar depand on your gender.If User dont specify your gender unknown avatar will be assigned to user.
- User list is refetched after Each update process.
- There are user interface that show api request is contiuning. ( loading , spinner)
- CRUD buttons are inactive if user dont select the user account row.
- "Active" action button (first button) will be active if user select minumum one row.
- "Inactive" action button (second button) will be active if user select minumum one row.
- "Update" action button (third button) will be active if user just one row.
- "Delete" action button (fourth button) will be active if user select minumum one row.
- User dont CRUD process İf user's role is "User" (excluding own info).--This features removed it can be enabled if desired - Each user can crud process --
- User can edit your info via Edit Info button.
- Just "Super Admin" see the account's log. -- This features removed it can be enabled if desired - Each user can see logs
- There are two log list.First list is "updated users" logs and second list is "deleted users" logs.
- if user want to register user must specify strong password and email that already have not registered.
This is a Next.js project bootstrapped with create-next-app.
npm install
npm install --save
npm run dev
npm build
