#### Repository

HapRamp Alpha Web App - https://github.com/hapramp/alpha-web

### About
[Hapramp](https://hapramp.com/) is a Steem based Social Media platform which rewards cryptocurrency for posting your work which is valuable to the community.

In this post, I am introducing the Alpha Web app for the platform.

#### Technology
The web app uses [`React`](https://reactjs.org/) as the base UI library. Bootstrapped with [Create React App](https://github.com/facebook/create-react-app), it uses many other popular JS libraries such as [`redux`](https://redux.js.org/), [`react-router`](https://reacttraining.com/react-router/), [`lodash`](https://lodash.com/), etc.

You can find the full list of dependencies in project's [`package.json`](https://github.com/hapramp/alpha-web/blob/master/package.json) file.

#### Features
The web app is under rapid development and new features are added every day. Some of the current features are - 
- Authorization using user's username and private posting key.
- Seeing the posts from all users that are in the following list of the current user.
- Rating a post out of 5 (5 being best).
- Replying to a post.
- Seeing hot/latest/trending posts from all communities.
- Visiting a user's profile and seeing all their posts, communities and more.
- Following/Unfollowing a user.

#### Screenshots

Here are a few screenshots from the web app containing real data from the blockchain - 

##### User Feed
![User feed.png](https://ipfs.busy.org/ipfs/QmStBTj1FM9jyW7G33yarVDQ2xg57JfV4JHXoj17jwkr2g)

##### User Profile
![User profile.png](https://ipfs.busy.org/ipfs/QmQNntnPc4YnWA1XVhbJM7MXQ1f4MDV8m2F478XQ7RRDsc)

##### Single Post
![Full post.png](https://ipfs.busy.org/ipfs/Qmdt7R35idw2MpD6znv6uHtHztX1LNfjD7QFwJdH8qPvj3)

##### Post with embedded YouTube Video
![Post with embedded youtube video.png](https://ipfs.busy.org/ipfs/QmdjCAZjEqVc56vy8vt49yWbj44sv5VTZPf3Luw749gLmo)


##### Single Article
![article full view.png](https://ipfs.busy.org/ipfs/QmUjDyjpcNJKycQf8k8fregGquCJaWkUtc5S1zHRdGSvXx)


### Travis-CI Integration

The first thing that I did after putting the code open source is introducing Travis CI. Before this, the project used Gitlab CI.

I had to consider the following before writing the travis configuration - 
- I had to use `node@9.8.0` for builds.
- Yarn had to be used as package manager.
- We had to store `node_modules` and yarn related file to cache.
- We had to prepare the optimized build and run tests with CI.

To achieve this, the following configurations were used - 
```yml
language: node_js
node_js:
  - 9.8.0
cache:
  yarn: true
  directories:
  - node_modules
script:
  - yarn build
  - yarn test
```
[See [.travis.yml](https://github.com/hapramp/alpha-web/blob/master/.travis.yml)]

Here is a screenshot of the successful build of [`hapramp/alpha-web` on Travis](https://travis-ci.org/hapramp/alpha-web/) -
![travis build.png](https://ipfs.busy.org/ipfs/QmWfvra3pSYRx7MaewJyLLQ8D4LZucc56WfkVYvZ3ozwtv)

Check out the commit on Github - https://github.com/hapramp/alpha-web/commit/b1fddc32685c30df6c96b1162db8d6fe4e5776a0.

### Roadmap
We're planning to make the first public alpha release within 2 weeks now, so stay tuned.

### How to contribute?
You can contribute to the project in many ways, the easiest being [opening an issue](https://github.com/hapramp/alpha-web/issues/new) for reporting a bug or making a feature request. If you are an open source developer, you can create pull requests to improve the app.

#### Github Account
https://github.com/singhpratyush