https://github.com/thom4parisot/reactzine

A mobile first magasine prototype app using React.
https://github.com/thom4parisot/reactzine

application-material prototype react

Last synced: 7 days ago
JSON representation

A mobile first magasine prototype app using React.

• Host: GitHub
• URL: https://github.com/thom4parisot/reactzine
• Owner: thom4parisot
• License: mit
• Created: 2014-08-14T20:33:19.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-04-04T11:19:42.000Z (over 6 years ago)
• Last Synced: 2024-10-29T13:45:56.573Z (15 days ago)
• Topics: application-material, prototype, react
• Language: JavaScript
• Homepage: http://oncletom.github.io/reactzine
• Size: 131 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# reactzine

A single page app prototype using React.

# Install

## With Node.js

This method installs, builds the project and opens it automatically for you:

```bash

git clone https://github.com/oncletom/reactzine.git

cd reactzine && npm install

```

## Git only

This method is suitable if you do not want to bother installing Node.js:

```bash

git clone https://github.com/oncletom/reactzine.git

cd reactzine && git checkout gh-pages

```

Then double click/launch `index.html`.

## Without git

Least case scenario, you do not have either `git` or `node`:

1. [download the latest release](https://github.com/oncletom/reactzine/archive/gh-pages.zip);

1. uncompress it;

1. double click/launch `index.html`.

# Live demo

A live demo is available at [oncletom.github.io/reactzine](http://oncletom.github.io/reactzine).

A new version can be built and deployed by typing:

```bash

npm run deploy

```

# Comments

- title line height/width can be an issue depending of the screen resolution/layout/orientation (too long to fit)

- the _audio_/_video_ icons often overlap the title

- pagination is not 

- React components are not unit tested

- the development of this prototype involves a [Pull Request to the `react-classset` component](https://github.com/petehunt/react-classset/pull/1/files)

- the `iframe[sandbox]` does not deal well without the `same-domain-origin` permission: YouTube videos do not load for example — the drawback is the iframe gets the permission to write cookies, so third-party user tracking

- there is no nice way to detect the loading progress of an iframe, hence it is hard to improve efficiently the user experience

- non-scrolling + stretched items in height and width is tricky — even with CSS Flexbox — I spent more time on this than learning React

- React made it super easy to deal with UI display

- it would have been easy to use Browserstack/Saucelabs/wraith to test visual regression and mobile compatibility quality