Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/morzhanov/puffin

Image search application developed using React, Mobx-State-Tree and Unplash API
https://github.com/morzhanov/puffin

axios javascript lodash material-ui mobx mobx-state-tree react sass styled-components unplash-api

Last synced: 4 days ago
JSON representation

Image search application developed using React, Mobx-State-Tree and Unplash API

Host: GitHub
URL: https://github.com/morzhanov/puffin
Owner: morzhanov
License: mit
Created: 2018-03-22T18:11:38.000Z (almost 7 years ago)
Default Branch: master
Last Pushed: 2018-12-03T12:43:14.000Z (about 6 years ago)
Last Synced: 2024-11-08T00:52:36.672Z (about 2 months ago)
Topics: axios, javascript, lodash, material-ui, mobx, mobx-state-tree, react, sass, styled-components, unplash-api
Language: JavaScript
Homepage: https://puffin-app.herokuapp.com/
Size: 113 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Puffin - Image Search application.

Puffin is an Image search application that uses Unplash open API.

Puffin application created using React, Mobx as state management library alongside with Mobx-State-Tree state container.

This project provides an example of webpack configuration for `React+Mobx+MST`.

This application was developed using Axios for API requests, Material UI components library, and styled components. Also added ES6, ES7, decorators support so you can use all ES6+ features and decorators from ES7.

## Demo

https://puffin-app.herokuapp.com/

## Installation

Start dev server:
1. run `yarn install`
2. provide your Unplash API key into application
3. run `yarn start`

Build:
1. run `yarn build`

Production:
1. run `yarn build`
2. run `yarn production`

## Usage

This application allow you to:
1. Search for images using Unplash API.
2. Preview full and small images sizes.
3. Switch between images.

## Main Technologies

- React
- React Router
- Mobx-State-Tree
- Mobx
- Styled components
- Webpack 4
- Material UI
- ESLint
- Prettier
- Babel
- SCSS
- PostCSS

## Screenshots

## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Author

Vlad Morzhanov

## License

#### (The MIT License)