yocmen / address-book

Address book example using randomuser.me API

Addres book app

A simple react app mocking an address-book

LIVE DEMO -> Demo page hosting on Netlify

Installation

First, you need to clone the repo, for example:

git clone https://github.com/yocmen/address-book

them go to the folder

cd address-book

Create a .env and provide a valid string API:

To create a .env file just run:

touch .env

Example values:

REACT_APP_USERS_API="https://randomuser.me/api"
STORYBOOK_USERS_API="https://randomuser.me/api"

For Develop -> front-end

To work in the front-end you need to install the package dependencies.

Using Yarn just execute:

yarn install

to start the dev server just run:

yarn start

This will start the dev server on http://localhost:3000

If you need change the app port just add in the .env file

PORT=NEW_PORT_NUMBER

StoryBook is used for some components, you can run:

yarn storybook

To start a new server on port 6006 and check the visuals.

Note: the faker library has some problems with the image URLs, that's why you can't see them in the components.

PRODUCTION Usage

Install all the dependencies in front-end (see For develop above).

The next step is create a build of the React client, just run:

yarn build

When the process finished you can test the app running:

For install a webserver

yarn global add serve

To run the app in the webserver

serve -s build

This will start the PRODUCTION server on http://localhost:5000 and from there you can see the app working.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT