ibbatta / react-flipcard

📚 Simple flip-card showing weather in react

REACT WEATHER FLIP-CARD

Simple flipcard showing weather in react.

---

What this boilerplate contains

                    

• Yarn / Npm package managers
• ES6 supported
• React
• Babel
• Webpack
• Moment for date manipulations
• Google map visual geolocalization

---

Set up project

Before cloning the repo be sure you have installed:

• Node (version >= 8.8.x)
• Yarn (version >= 1.2.x)
• Npm (version >= 5.5.x)

Then:

• Choose a folder project in your system and switch in cd [folder path]
• Clone the repo in your folder git clone https://github.com/ibbatta/react-flipcard.git

---

Installation

To install the project and all dependencies, run (from the directory of the project):

# install dependencies
npm install

or

# install dependencies
yarn

---

Run the project

run the project to develop

npm start
# or
yarn start

run the project to production

npm run build
#or
yarn build

run the tests

# WORK IN PROGRESS (actually doesn't work)
npm run test
#or
yarn test

---

Editor setup

To keep consistency to the style of resources, I decided to stick to some shared rules that have to be applied to every project using some editors plugins. Plese be sure to disable / remove any other js/jsx linters or custom configurations.

Basic Editor Configuration

I chose to use EditorConfig to share the basic configuration like indentation and charset. It works including an .editorconfig file in the root directory and making sure your editor has the necessary plugin. You can find a list of downloads here. The choice to keep the indentation with 2 spaces is to be compliant with actual standards (major frameworks use this configuration both for JS and CSS).

Auto correction on save

I have chose to use js-beautify. Despite of his name it works as a beautifier also for HTML and CSS. Every editor has a plugin that implement it, es. Sublime, Atom or Visual studio. The setup for js-beautify is controlled within a .jsbeautifyrc file that have to be included in the root directory of the project (.hbs are not completely supported yet).

Eslint

To check on Javascript / React [.js / .jsx] syntax I use Eslint. The rules to detect errors are written in a .eslintrc file included in the root directory of the project (best practice use airbnb linter).

---

Todo

• Webpack build optimization for production
• Code optimization (js and css)
• Manage errors when browser doesn't support Html5 geolocation
• Add i18n for messages
• Add tests

---

Credits

• Weatherbit.io (weather free api)
• Yihsuan Lu (weather free icon pack)

---

Troubleshootings

This is just a personal project created for study / demonstration purpose only, it may or may not be a good fit for your project(s).

---

GitHub @ibbatta  ·  Twitter @battago