NASA Images

demo application for NASA Images using state of art pratice of react - redux - css mdules

Live Demo

https://minhlv-nasa.firebaseapp.com/explore

Technolohies

• [x] react
• [x] redux
• [x] redu -starter kit
• [x] css modules
• [x] ducks architechure
• [x] storybook
• [x] hooks
• [x] theming
• [x] scss
• [x] pwa

Installation

Get the code

0. requires Nodejs and NPM get insstaled on the local marchine

1. clone the source code

	git clone https://github.com/minhlucvan/nasa-images

2. install dependencies

	npm install

Run dev server

	npm run dev

open link: http://localhost:8080

Testing

	npm run test

Component visual test

	nom run storybook

Build

	npm run build

Development

Code base

The code base is separete into main sections:

• app
• lib
• context
• redux
• config
• redux
• scss

App

The main application contain routes ,pages, context and other stuff of the application layer

lib

The common components, helpers, api, hooks and other things that we use across the apps

Config

the configuration files

SCSS

scss styles

Redux

bussiness handlers and state management bas on redux;

Each redux module including actions, reducer, selectors, effects these factors is collected automaticly through configureStore function and integrate to the app in redux/index.js;

Context

Common context that can reuse across the app

Environments

By defautl I using 2 environments are development and production. env is provide to webpack by npm scripts specifics on package.json

If you want to and a custom env you neend to adding config to webpack.

Configuration

App configuration is localte on src/main/config. The configurations a split into files and load all in src/main/config/index.js

Base on current environments webpack will load the config file extentions. *.js for dev and *.prod.js on production mode.

Themming

Please see: this artice

Hooks

We can create insrested things base on (hooks)[https://reactjs.org/docs/hooks-intro.html]

Context

Styles

Testing

Contribution

Feel free to make pull request and open an issue

contributors: @minhlucvan

Lisence

MIT