Have a question or suggestion? Contact me on Linkedin, send an email to jaelsoncarvalhojr@gmail.com, or create a pull request on this project.

---

Pet-project. Use at your own risk. Low test coverage ratio.

Select Title

A simple project to fecth data from an api and show the informations as a sortable and filterable list.

Actually hosted on: http://www.select_title.jaelsoncarvalho.com/

---

Index

• Stack
• Design Goals
• API
• Avaialable Pages
• Getting Started
• Local Commands
  • Build
  • Development
  • Production
  • JavaScript Lint
• Docker Build and Run
• Auxiliary Commands

---

Stack

• Node.js (v6.2.2)
• npm (3.9.5)
• React (v15.4.2)
• React Router DOM (v4)
• Redux (3.6.0)
• Redux Thunk (2.2.0)
• Axios (0.15.3)
• Ant Design for the visual layout
• Webpack (1.14.0) for development and bundling
• Babel transpiler for ES6 and ES7 magic
• ESLint to maintain a consistent code style

---

Design Goals

• Use Cutting-Edge Technologies
• Best Programming Techniques
• Babel 6 with Webpack and Hot Loader
• Fast testing with mocked-out DOM
• Separate Smart and Dumb components
• Ducks: Redux Reducer Bundles

---

API

This application consumes data from the following services:

• http://jsonplaceholder.typicode.com/posts

---

Available Pages

Page	URL	Description
Home	/	Main page of application to show the fetched data
About	/about	Page that contains a little description of the project
No Match	/*	Any other URL's that don't macth with the app router

---

Getting Started

Install yarn to a better package management

$ npm install --global yarn

Install application dependencies and also do the first build

$ yarn install

---

Local Commands

In this current section you can find all commands to run the application in your machine. All the commands also are in the scripts section of package.json.

Build

$ yarn run build

The above command is used to build the production files.

Input: src/index.js and src/index.html

Output: build/

Development

$ yarn run dev

Navigate to http://localhost:3000/ to view the app.

Production

Note: Before execute the below command you need to run the build script(yarn run build).

$ yarn run start

Navigate to http://localhost:5000/ to view the app running with the production files.

JavaScript Lint

$ yarn run eslint

This above command is used to identifying and reporting on patterns in JavaScript on the entire project.

---

Docker Build and Run

In this section you can find all instruction to build a image in the production way. The current step is basically to create a image through Docker and Docker Compose, then you need to install them before any step.

Docker Install

Docker Compose Install

Docker Compose

Doc Reference

The bellow command creates a new Docker image production of our application. Building and running our application with Docke Compose.

$ docker-compose up

The command reads the Dockerfile in the current directory and processes its instructions one by one to build an image called select_title_production on your local machine.

Using the above command we have by default the select_title_production available image running a docker container on http://<YOUR_IP>:8079, http://<YOUR_IP>:8080, http://<YOUR_IP>:8081.

Why use it?

Doc Reference

Eliminate the "it works on my machine" problem once and for all. Package dependencies with your apps in Docker containers for portability and predictability during development, testing, and deployment.

Docker Auxiliary Commands

List all Docker Images

$ docker images -a

List all Docker Containers

$ docker ps -a

Build a Docker Image

$ docker build -t <INSERT THE IMAGE'S NAME> .

The command reads the Dockerfile in the current directory and processes its instructions one by one to build an image called <INSERT THE IMAGE'S NAME> on your local machine. By default, this command creates a production image of the application, and after run the image in a new container, it can be accessed on <YOUR_IP_ADDRESS>:8080.

Run a Docker Image

This below command runs the a image in a new container. In that way, our application can be accessed <YOUR_IP_ADDRESS>:8080.

$ docker run -p 8080:8080 --name <INSERT THE CONTAINER'S NAME> -d <INSERT THE IMAGE'S NAME>

Get logs from your Docker Container

$ docker logs <INSERT THE CONTAINER'S NAME>

Enter in a Docker Container

Executing the below command you will enter in you running container and operate it as your local machine.

$ docker exec -it <INSERT THE CONTAINER'S NAME> sh

---

Contributing

1. Fork it
2. Create your feature branch with specs (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

---

Contributors

• Jaelson Carvalho (jcarva)

---

Style Guide

Some parts of this project follow the style guide from React Redux Universal Hot Example and Ducks: Redux Reducer Bundles.

---

License

This project is licensed under the terms of the GNU GENERAL PUBLIC license.

You can check out the full license here

---