Ideamotive PWA demo

Demo

App

TODO: add link to app demo

Storybook

TODO: add link to hosted storybook

General info

Motivation

progressive-web-app-react-demo is an application made for experimenting with new technologies, new libraries and new approaches.

Functionality

progressive-web-app-react-demo is a small app for sharing photos. The application allows for taking pictures, adding a description and putting it on the world map. Users can explore the map and preview pictures of other users. The application works on mobile and desktop browsers.

Make apps great again

• Let’s make all components independent - Thanks to storybook all components can be displayed separately, tested manually or automatically. Any props can be injected to a separate component through storybook addons. Thanks to styled-components application styles can be very strictly controlled. Situations when styles added to one place of the application breaks other components, can be reduced or eliminated.
• Let’s not mix functionalities - one component - one feature. If any component needs more features - use HOC or render-props
• Let’s use customs middlewares - Should the data be loaded from an API or from cache? Which part will decide? Components, reducers, actions shouldn’t care about it. Let the custom middleware decide.
• Let’s not use HTML dom markups - We have styled components so we use a higher level of abstraction. Let style-components care about tags. Let the name describe the function. Call things by what they do not what they are. Let’s stop drowning in divs with tens of classes and unobvious functionality.

Technologies

Libraries

• react
• redux
• storybook
• styled-components
• polished

PWA

• service workess
• push notifications
• camera api
• localization api
• voice recognition api
• offline storege

Structure

Frontend

The project has been bootstrapped on a create-react-app template, with a custom routing. The routing gives availability of animated switching routes and it has been developed on the render-props pattern,

Containers - components connected with redux by passing actions creators and selected state’s fields to it.

Components - UI elements. Components can contain other components or styled-components. In this small app, they shouldn't contain containers.

Styled-components - stateless components generated by the styled-components library

Stories - scenarios for the storybook

Services - custom tools for handling specific functionality

Backend

small node script with socket.io, cloudinary client, and MongoDB.

Running The App

Development

1. Provide all environmental variables in /server/.env file
2. Run server

$ yarn start

It should run server on :8000 port

3. In second terminal run react application

$ yarn dev

The application should be available on port :3000

Production

1. Build frontend

$ yarn build

2. Run full application

$ yarn start

Application should be available on port :8000

Storybook

For running storybook, the server is also necessary. (It hosts .env’s with API keys)

1. Run server

$ yarn start

2. Run storybook

$ yarn storybook

Storybook should be available on port :9001

Tests

TODO: Finish tests

Contact

Created by Ideamotive's developers.