Skip to content

Latest commit

 

History

History
305 lines (241 loc) · 9.25 KB

README.md

File metadata and controls

305 lines (241 loc) · 9.25 KB
Raw

Para README em Português clique aqui.

Sumary


Preview 🔎

login Page


About 📘

Kenziehub is a "social network" simulation for developers where the user can create an account, log in, access the dashboard and add their favorite technologies according to their experience level. Originally made with React/JS and refactored to React/TS, kenziehub is a front-end CRUD (Create, Read, Update, Delete) application that uses the endpoint (https://kenziehub.herokuapp.com/) to consume and send data.


Project Structuring and Technologies 👩🏻‍💻📂

In this project, concepts ofAPI Consumption, React Hooks, React Context, SPA, CRUD, React Lazy, React Suspense, Fallback, Renderização Condicional.

folder structure



Technologies / Libs

  • Axios
  • Bootstrap (Button & Modal)
  • React Context
  • React Hook Form
  • React Loader Spinner
  • React Router Dom
  • React Toastify
  • React-ts
  • Styled-Components
  • TypeScript
  • yup

How it works 🔨


Register

registration page

On the registration page we have a basic form to capture user information. All fields must be filled in.

Errors ❌

Image of errors in the form Image of validation error in email field

When the data sent has a validation error, a tooltip will be displayed that, when hovering the mouse over it, will show what did not satisfy the conditions of the field.

Sucess! ✅

If all data is successfully validated, a notification at the top of the page will show the status of the request and you will be redirected in a few seconds to the login page.

 successful login image



Login


Login page form

To enter your account, simply enter your account email and password in the respective fields.

Errors ❌

Similar to the registration page, data validation is done on the login page, however, errors are shown at the top of the page. Here are possible errors:

 Image notifying errors of fields not sent Image notifying information error

Sucesso! ✅

If the submitted data matches the database information, you will be redirected to the Dashboard!

Note: The application has Auto-login functionality. Click "sair" on the Dashboard to remove this feature the next time you log in to the application.



Dashboard


Dashboard Page


On the Dashboard you can find some information such as your name and your favorite technologies. If there are no technologies added, you can click the add technology button to populate your profile.


Adding Technologies


Add technology button Add technology form

By clicking on the button, a form will open in the center of the screen. Simply enter the name of the technology, your experience level and click Cadastrar Tecnologia.


Errors ❌

If something goes wrong, a notification will appear at the top of the screen.

 Image notifying error.

Sucess! ✅


Technology added.


If all goes well, the added technology will appear in the center of the screen!


Excluding Technologies


In a scenario where you have added a wrong technology or one that you no longer use and want to delete from your profile, there is an option to delete it by pressing the trash button for the respective technology.

list of technologies Python technology with an arrow pointing to the trash image

Errors ❌

In case something goes wrong, similarly to the other features, a notification will appear at the top of the screen.

 Image notifying technology deletion error

Sucess! ✅

Image notifying technology deletion error

If all goes well, you will no longer see the technology on your Dashboard!

Project Link: Kenziehub


Run App Locally

  1. Clone the repository on your computer.
  2. Open the terminal in the project directory.
  3. Type "yarn install" or "npm install" to install dependencies.
  4. Type "yarn start" or "npm run start" to run the app locally.