Para README em Português clique aqui.

Sumary

• Preview
• About
  • Project Structuring and Technologies
  • Technologies / Libs
• How It Works
  • Register
    • Errors
    • Sucess
  • Login
    • Errors
    • Sucess
  • Dashboard
    • Adding Techonologies
    • Errors
    • Sucess
    • Excluding Technologies
• Project Link
• Run App Locally

Preview 🔎

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.

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

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

Errors ❌

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.

---

Login

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:

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

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

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.

Sucess! ✅

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.

Errors ❌

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

Sucess! ✅

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.