assist-software / academy-hove-app Goto Github PK

As a user I should be able to filter and sort the listings so that I could better find what I need.

Acceptance Criteria

• You can chose one or more location for the filter
• You can chose a single price in the filter.
• You can order by a single criteria in the filter

Salut Vadym, fa te rog configuratia cu ordinea importurilor cum ai facut si la tine in proiect.

IMPORTANT
Creating the structure means to create all the necessary folders for constants, assets, components, etc. based on Figma design.
It's also important to create all the relevant component in advance and add some dummy text in each of them.
This will help us clearly define the structure before starting working on functionalities.

Use this template https://github.com/assist-software/academy-react-skeleton-app/tree/feature/app-structure as reference when creating the folder/files.

NOTE
I'm not sure "showroom" is the best name :D, if you have a better idea for the name let's discuss.

In this feature we'll have the following sub-features or functionalities

• Display the houses
• Display them in groups by latest, large, small.
• Go to dedicated pages for latest, large or small houses.
• Filter and sort the houses
• Add houses to the favourite list
• Change the way the list shows, as list or as grid.
• Search for a house using specific keywords

As a user I can see all the houses that have been posted for selling so that I could chose one or more to buy.

Acceptance Criteria

• Display the houses in three groups, latest, big, small
• Display "see everything" link that will redirect to a specific page for each group, e.g. latest, big, small

As a user I can create an account so that I could use the platform.

Acceptance Criteria

• Allow registration with Google
• Allow registration with email and password.
• The password should be at least 8 characters long and should contain one number.
• The password should be visible/invisible when toggling on the eye icon.
• The form should be accesibile, should be able to use it with tabs and enter keys.
• Add the "log in" anchor.
• While the account is being created disable the form inputs and buttons and show a single subtle loader on top of them.

A idee foarte interesanta care merita explorata.
Cum arata parti specifice din UI pe baza rolului utilizatorului.

Cand e vorba de pagini, e oarecum simplu pentru ca facem acest lucru la nivel de rute si pur si simplu un utilizator nu o sa poata vedea un anumit set de rute(pagini).

Cum facem la nivel de UI cand un admin si un user vad acelasi card spre exemplu doar ca admin-ul mai vede un button in plus in acel card?

Am cautat un pic pe net niste tutoriale si scopul acestui task e sa gasim si mai multe resurse despre care e best practice cand vine vorba de asta.

Task-ul asta e indicat pentru toti participantii.

https://selleo.com/til/posts/jseiykz9fx-tips-for-implementing-rbac-in-react
https://levelup.gitconnected.com/access-control-in-a-react-ui-71f1df60f354
https://medium.com/geekculture/how-to-conditionally-render-react-ui-based-on-user-permissions-7b9a1c73ffe2
https://www.permify.co/opens-source/react-roles (de vazut codul sursaa, nu pare complex)
https://isamatov.com/react-permissions-and-roles/

Sa fie subiect de discutie pentru urmatoare intalnire

https://www.primefaces.org/primereact/password/
https://www.primefaces.org/primereact/inputtext/

In "styles" folder create a "form.css" file and override the styles for these these two components to match our Figma design.

IMPORTANT
Creating the structure means to create all the necessary folders for constants, assets, components, etc. based on Figma design.
It's also important to create all the relevant component in advance and add some dummy text in each of them.
This will help us clearly define the structure before starting working on functionalities.

Use this template https://github.com/assist-software/academy-react-skeleton-app/tree/feature/app-structure as reference when creating the folder/files.

We have a generic todo app with 3 features: https://github.com/assist-software/academy-react-skeleton-app/tree/feature/app-structure

Requirements

1. Look at how things are structured in that project.
2. Write down any questions you have and ask @victorjeman
3. Take a look at the Figma design for the hove-app. You have been granted access.
4. Once you understand the design, identify how many features you would create and then chose one feature and create the file structure for it.

Cum ai facut si la proiectul tau, sa fie obligatoriu absolute imports si relative doar din acelasi folder.

https://www.primefaces.org/primereact/button/
If prime react doesn't have a theme, all the components have very minimal stylings.

We can create separate css files in "styles" folder for all the components. In this case we can create a
"styles/buttons.css", style our buttons based on primereact classes and then import the css inside of the main index.ts file.

IMPORTANT
Creating the structure means to create all the necessary folders for constants, assets, components, etc. based on Figma design.
It's also important to create all the relevant component in advance and add some dummy text in each of them.
This will help us clearly define the structure before starting working on functionalities.

Use this template https://github.com/assist-software/academy-react-skeleton-app/tree/feature/app-structure as reference when creating the folder/files.

In this feature folder we'll have the functionalities for updating the general information about our profile.

We'll have all the auth functionalities here.

• login
• register
• reset password
• forgot password
• save the current user

Vrem sa facem enforce ca constantele sa foloseasca mereu caps look.
Tu le ai cu eslint, verifica te rog daca se poate face o regula ca sa constantele mereu sa fie denumite cu

NUME_CONSTNATA = {
  NUME_ATRIBUT: 'valoare'
}

As a user I should be able to login with my email and pass or google account so that I could use the platform.

Acceptance Criteria

• Display an email and password field.
• Display a login button
• Allow login with Google
• Show the necessary errors when the fields are not completed correctly.
• Remember me checkbox should remember the user and not logout it after the app has been closed.
• Show a link "Sign up" that will redirect to the register page.
• Show the password toggle icon and make it work.
• While the login request is happening disable the inputs and show a loader icon.

NOTE: Prime react has the carousel, we just need to apply specific stylings

• React + TS
• De folosit prime react.
• De facut un branch separat unde o sa lucreze internul.
• De povestit despre redux toolkit.
• De povestit despre primereact.
• De povestit despre typescript si tutorialele care trebuie facute.

As a user I should be able to see my listings so that I could manage them.

Acceptance Criteria

Make the page that holds the Profile, Notifications , etc Features

IMPORTANT
Creating the structure means to create all the necessary folders for constants, assets, components, etc. based on Figma design.
It's also important to create all the relevant component in advance and add some dummy text in each of them.
This will help us clearly define the structure before starting working on functionalities.

Use this template https://github.com/assist-software/academy-react-skeleton-app/tree/feature/app-structure as reference when creating the folder/files.

IMPORTANT
Creating the structure means to create all the necessary folders for constants, assets, components, etc. based on Figma design.
It's also important to create all the relevant component in advance and add some dummy text in each of them.
This will help us clearly define the structure before starting working on functionalities.

IMPORTANT
Creating the structure means to create all the necessary folders for constants, assets, components, etc. based on Figma design.
It's also important to create all the relevant component in advance and add some dummy text in each of them.
This will help us clearly define the structure before starting working on functionalities.

Use this template https://github.com/assist-software/academy-react-skeleton-app/tree/feature/app-structure as reference when creating the folder/files.

In this feature folder we'll have functionalities about creating and editing the houses.

• view the home details
• preview before publishing
• edit de details of a home if you have the rights
• delete a posting
• add a new posting.
• If the logged in use is an admin the there will be extra actions like approving or deleting a posting that was not created by the current user.

As a user I can request a new registration link to be send to my email if I forget my current password so that I could login into the app.

Acceptance Criteria

• Display a field for the email.
• Send an email to the user with a reset pass link.
• Validate the email is valid and exists for our app.
• Don't allow multiple the user to click the "send link" multiple times in a short interval.
• Display a "back to login" link that will redirect to the login page.
• The user should receive an email with a link.
• When clicking on the link from the email, the user should be redirected to our app and presented with two fields where it will introduce a new password and then confirm it.
• Validate that both passwords are correct.
• Once the password has been reseted successfully redirect display a success alert for 5 seconds and then redirect the user to the login page. The message: "You successfully changed your password. You will be redirected to the login page shortly."
• In case the automatic redirect doesn't work or the user wants to go to the login page faster, display a "Go to login" link that will redirect the user to the login page.

De discutat pe baza la https://github.com/assist-software/academy-react-skeleton-app