Giter Club home page Giter Club logo

contactable-js's Introduction

Contactable

Keep track of contact emails and phone numbers in your local memory (your brain) is something from the past. Contactable make your life easier keeping track of all that information for you.

https://p-vvf5mjm.t4.n0.cdn.getcloudapp.com/items/4gulpyNv/e7081837-0ef5-4008-aa7e-dd461b3b99b1.jpg?source=viewer&v=2cede67098f688aed48ba60fda60c02b

Resources

  • Design: here
  • API repo: **here** (contains a insomnia json file)

User personas

There's only one type of user for Contactable application, this will be referred as "user"

Stories:

User can login to the app

As a user, I want to login into the app to see my contacts

  • When I enter the app I'm redirected to the login page
  • Then I see a login form
  • When I fill the fields with valid information my account is created
  • And I see my list of contacts.

Implementation notes

If I'm already login I should be redirected to the contacts page directly.

User can create an account

As a visitor, I want to create an account in order to use the app.

  • When I enter the app I'm redirected to the login page
  • When I click the Signup button I'm redirected to the Signup form
  • When I fill the fields with valid information my account is created
  • And then I see my list of contacts.

User can logout

As a user, I want to close my session to protect my information

  • Given that I am logged in
  • I can see a logout button in the header of any page
  • When I click the logout button my session is destroyed
  • And I am redirected to the Login page

User can see a list of their contacts

As a user, I can see a list of all my contacts in alphabetical order.

  • Given that I am on the main page
  • Then I can see a list of all my contacts in alphabetical order.
  • And a subtitle "Contacts" that tell me how many contacts I have.

User can create a new contact

As a user, I want to be able to create a new contact so that I can keep track of new people I know.

  • Given that I am on the main page
  • Then I see a button "+" button on the bottom-right corner of the screen.
  • When I click the button
  • Then I see a form for creating a new contact with the fields: Name, Number, Email, and Relati
  • When I fill these inputs with valid information
  • And a click the "Save" button on the bottom of the screen
  • Then a new contact is created
  • And I am redirected to the main page where I can see my new contact created on the list.

Implementation notes

Validations:

  • All the fields are required
  • Email should have a valid email format.
  • Number should be a numeric value
  • Relation should be one of these values: Family, Friends, Work, Acquaintance

User can see contact details

As a user, I want to see the detail of any contact so that I can use all their information.

  • Given that I am on the main page
  • When I click on any contact on the list
  • Then I see to the Contact detail page
  • At the bottom of the page I can see 3 buttons: Back, Delete and Edit

User can edit a contact

As a user, I want to be able to edit a contact so I could correct any mistakes I made while creating it.

  • Given that I am on a Contact Detail page
  • When I click on the Edit button
  • Then I see to the Edit contact page
  • Then I see a form with pre-filled information from the contact.
  • Then I can edit the current information
  • When I click the Save button
  • Then the contact is updated and I navigate to the main page.

User can delete a contact

As a user, I want to be able to delete permanently any contact so that I could mantain a clean and updated contact list

  • Given that I am on a Contact Detail page
  • When I click on the Delete button
  • The contact is deleted
  • And I navigate to the main page
  • And I don't see the contact anymore on the list.

User can mark a contact as favorite

As a user, I want to mark some contacts as favorites so I can reach them quickly on my contact list.

  • Given that I am on the main page
  • I see a "Star" button at the right of each contact.
  • When I click the button
  • Then the contact is marked as favorite
  • And is displayed on the top of the page in a new list called "Favorites"

Implementation notes

The "Favorites" list is only visible when there is at least one contact marked as favorite. The contact marked as favorited appears in both lists: Favorites and Contacts.

User can remove a contact from favorites

As a user, I want to remove the favorite mark of any contact currently marked as favorite

  • Given that I am on the main page
  • And at least one contact is marked as favorite
  • When I click on the Star button of a favorite contact
  • Then the favorite mark is removed from the contact
  • And it is removed from the Favorites list

HAPPY CODING! 👨‍💻 👨‍💻

contactable-js's People

Contributors

mhatw avatar frankcdlc avatar fabio4520 avatar heyariam avatar github-classroom[bot] avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.