Simple flipcard showing weather in react.
- Yarn / Npm package managers
- ES6 supported
- React
- Babel
- Webpack
- Moment for date manipulations
- Google map visual geolocalization
Before cloning the repo be sure you have installed:
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
To install the project and all dependencies, run (from the directory of the project):
# install dependencies
npm install
or
# install dependencies
yarn
npm start
# or
yarn start
npm run build
#or
yarn build
# WORK IN PROGRESS (actually doesn't work)
npm run test
#or
yarn test
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.
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).
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).
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
).
- 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
- Weatherbit.io (weather free api)
- Yihsuan Lu (weather free icon pack)
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).