Skip to content

a user panel by using React Js with Formik and Yup for working with the inputs and make them validate 😬🔥✨

License

Notifications You must be signed in to change notification settings

UndeadMe/React-User-Panel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

  • dont see the shit codes ! it's just experiment

User Panel Usgin React ✨🔥

a few days ago I decided to do this project for myself as practice.This user panel created by react js and I used Formik and Yup for easier input validation 🙂🎈 and I just wanted to focus on logic so I used react bootstrap to design the whole pages.

pages

login

  • register
  • user panel

Login page

Screenshot 2022-06-02 122209 as I said I didn't want to focous on the design and design take my all of times so It's a simple page for the login.

Login Inputs

  • Username
  • Email
  • Password

Register Page

Screenshot 2022-06-02 122457 as you know this page is for user register and you all of the inputs handled by the yup and formik and it maked me so easy and relax for the validation.

register inputs

  • Username
  • Email
  • Birthday
  • Password
  • Confirm Password

User Panel

Screenshot 2022-06-02 124331 this page is for the users and all the data has to be dynamic. users can change their information by information page and change password page.

Information Page

Screenshot 2022-06-02 131603

Change Password Page

Screenshot 2022-06-02 131611

Components Structure

├───Forms
│   ├───FormInput
│   ├───LoginForm
│   └───RegisterForm
├───Panel
│   ├───SideBarLinks
│   │   └───SideBarLink
│   ├───UserCard
│   ├───UserChangePassword
│   ├───UserInformation
│   └───UserProfile
└───Titles

Features

  • Users can change their information
  • simple ui design
  • responsive
  • users can upload their own profiles and banner
  • Users can set their first name and last name

About

a user panel by using React Js with Formik and Yup for working with the inputs and make them validate 😬🔥✨

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published