doreapp / takenews

Small web mobile application to remember to take news from friends

TakeNews

Small web mobile application to remember to take news from friends

Uses:

• ReactJS
• TailwindCSS
• MUI

Commands can be run nativelly (using Node, npm and react scripts) or using docker.

Install

Nativelly	Dockerized
npm install	make docker_build

Generation of a production-ready source code

Nativelly	Dockerized
npm run build	make build

Development

Nativelly	Dockerized
npm start	make dev

Formatting

• Automatic reformat:

  Nativelly	Dockerized
  npm run format	make format

• Static analysis (lint):

  Nativelly	Dockerized
  npm run lint	make lint

takenews's Issues

Edit a person

Be able of editing a person's details (nickname, firstname, lastname and phonenumber).

It may take the same appearance than Creation board (see #12).

Setup automatic deployment of the app on GitHub pages

Use a GitHub actions to deploy the app on GitHub pages automatically

Store and retrieve persons using local storage

Using browser local storage (IndexDB actually), store the persons list and the contact dates and retrieve the data when re-opening the app latter.

💡 Hints:

• IndexedDB
• To do notifications app shows how to use it

Deploy in-dev branches on GH-pages

Add deployment of development branches to ghpages under a route with the branch name. For instance, branch 17-do-xxx should be deployed to https://doreapp.github.io/TakeNews/17-do-xxx/ (While main still deployed at GH pages root).

Open the app for making phone calls when pressing on Call button

When pressing on the call button (phone icon), open the phone app with the phone number of the person selected.

It may look like

function PhoneButton() {
  const handleClick = () => {
    window.open('tel:[phone]', '_self');
  };

  return (
    <button onClick={handleClick}>
      Phone
    </button>
  );
}

Introduce the app styling

Define the colors of the app.

Ref: https://m2.material.io/resources/color/

Be able of correcting the last contact date

From the persons' list page (#11), be able of updating the last contact date (for instance with a calendar view)

Bug with the update-last-contact-date button on mobile phone

When using the update-last-contact-date button on mobile phone, a OK button is rendered in the dialog. However, when selecting a new date, the dialog closes and the date isn't updated.
The excepted behavior is the let the user select the date and press on OK to validate is changes. Then, update the last contact date

Setup continuous integration

1. Introduce format rules and lint checks (ESLint/Prettier)
2. Create a GitHub action dedicated to run format and lint checks

Create a new person

Introduce the creation of a person.

I may result in another page than the home page (list of contact, see #11).

It must allow the definition of:

• a nickname (optional*)
• a firstname (optional*)
• a lastname (optional*)
• a phonenumber (optional)
• a last contact date (or "long long ago")

* At least one of the 3 must be set

The new person must then be visible in the contact list.

It must be possible to cancel the operation.

Delete a person

Be able of deleting a person

Setup the codebase

From a React/MUI/Tailwind template, generate the project.

Ref: https://github.com/mui/material-ui/tree/master/examples/tailwind-css

Use a favicon mobile-firendly

The favicon currently used is a PNG with a transparent background.

This kind of favicon is not friendly for all the applications, such as installation on mobile (where the transparent background can turn black)

Improve documentation of the repo

In the main readme, explain:

• What is the purpose of the app
• How to use it (i.e. mobile, chrome or safari, install as app...)
• What is it using (Navigator.contacts api, notifications,tel: intent...)
• How to contribute
• How to develop
• The technology stack (React, MUI, Tailwind...)

Create a README in src directory explaining the roles of each file/folder

Be able of browsing phone contact list when creating a new person

When creating a new person, be able of opening the contact list of the phone (device) and selecting a contact. This contact would be imported as a new person (filling the fields of the New person form), including the phone number field.

It may look like:

function ContactPickerButton() {
  const [selectedContact, setSelectedContact] = useState(null);

  const handleClick = () => {
    navigator.contacts.pickContact((contact) => {
      setSelectedContact(contact);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>
        Select a contact
      </button>
      {selectedContact && (
        <div>
          <p>Name: {selectedContact.displayName}</p>
          <p>Phone number: {selectedContact.phoneNumbers[0].value}</p>
        </div>
      )}
    <div/>
  );
}

Introduce testing the app functionalities

Add automated tests.

It should test end-to-end functionalities such as the creation of a person resulting in it being displayed on the persons list.

The continuous integration (GH actions) should run the tests.

Introduce notifications

Introduce the workflow of notifications.

Notifications should be used to remember the user than he/she haven't been contacting someone for a long time.

This issue is just about setting up the process:

• Introduce a button to enable notifications
• Be able of scheduling notifications
• Schedule notification whenever a person is created (for now, only that)

Add an illustration related to an empty list of contact

When the list of contact is empty, display an illustration and text, as Nobody here yet.

Illustration may come from https://undraw.co

Use docker to run npm commands

Create a docker container dedicated to run npm commands (start, format, lint...)

Display persons

Introduce the view of the persons and the last time I contacted them.

It should display:

• The person nickname
• The person last and first name
• The last contact with him/her

It should allow:

• Call the person
• Request edition of the person
• Request correction of the last contact date