![](https://ipfs.busy.org/ipfs/QmaREWvH5eMq66QZ5m9V9c4vJZtK1pRsRt9aQb47VkXRs1)
<center>
_1Ramp is available on [Web](https://alpha.1ramp.io) and [Android](https://bit.ly/1ramp-android)_
</center>



#### Repository
https://github.com/hapramp/alpha-web

-----

# 1. Improved Reply Editor
<center>![Screenshot 2019-02-04 at 5.26.20 PM.png](https://ipfs.busy.org/ipfs/Qmenmo9femtmfSnxThFde7wvTuH4bMLasDVELyQiXosaDT)</center>

The reply editor used earlier consisted of only one line and was not suitable for the application. But with [markdown editor introduced in the web app](https://alpha.1ramp.io/@singhpratyush/1ramp-web-app-update-markdown-editor-infinite-scroll-and-skeleton-placeholder), it was fairly easy to use it for writing replies too.

# 1.1. Isolating and customizing `MarkdownEditor`
The markdown editor was dependent on the redux state to get the content. This would prevent us from using the component directly as the reply editor.

This involved removing logic to get/set content from redux state and plugging them in as parent props.

![Screenshot from 2019-01-30 16-04-37.png](https://ipfs.busy.org/ipfs/QmcFGqxpws7StVr5XmdFpkLMZkhwEhXU3aDTtiXYQxhrnS)

After we had isolated the component state from redux, we had to make some more changes to make it look better when using as the reply editor. This included specifying the props to hide redundant texts inside the component, allowing to set initial rows and specifying if the borders should be shown for the component.

## 1.3. Integrating it with the `CreateReply` Component

After the changes mentioned above, we were now good to use `MarkdownEditor` inside the component which renders UI for creating a reply.

Reply text is stored in the component state and is initially set to `@{parent_author} ` for the post. The markdown editor is then rendered with 1 rows initially and ability to update its content using parent component's state.

The `onReplyPosted` prop can be passed in the `CreateReply` component which allows the parent component to take actions as the reply gets posted.

![Screenshot from 2019-01-30 16-15-25.png](https://ipfs.busy.org/ipfs/QmNeXc5AEtgyvuZCp8DqRndS4J3nb4VvPTPXxBPSVWRRRB)

## 1.4. BONUS: Fixing auto update replies after posting one

The earlier method used to get the state for a post from Steem stopped sending the parent post in content and hence the comments were not getting updated as they were posted.

The comments are now updated using the special action which gets triggered after fetching content for a post and `replies` are set accordingly for the post.

## 1.5. Pull Requests

[#144: Use markdown for comment editor](https://github.com/hapramp/alpha-web/pull/144)
[#149: Add docs related to onboarding pages](https://github.com/hapramp/alpha-web/pull/149)

-----

# 2. Onboarding Pages
1Ramp is all about interests, communities, and contests on Steem. And now, we are at a stage that with every little update we are preparing for a beta launch (in a few months).  So it is time to put up a friendly and meaningful welcome message for the visitors.  The logged out users will see onboarding pages introducing them to 1Ramp.
<center>![ezgif.com-video-to-gif (4).gif](https://ipfs.busy.org/ipfs/QmVs4B3BhL1Cd3onHDbEytAGiZxaP8q9ffQgrXkkoqLZiG)</center>

## 2.1. Making `BodyModal` reusable

The modal used earlier for displaying rating could be used at other places too. So after refactoring the `PostRatings` components, we had the `BodyModal` which could be used anywhere in the app.

What this basically did was use the props from parent component and override a few for custom behavior such as enabling/disabling the scroll for `document`, selecting parent, etc.

For detailed changes, check out this diff - https://github.com/hapramp/alpha-web/pull/147/commits/88ac8b28df67a8b0b1e5ecefceb8817bc0d0a858.

## 2.2. The `Onboard` component

This component is rendered whenever the app decides to show the onboarding. It uses the `BodyModal` and has a collection of pages (called `overlayPages`) that it needs to show - 

![carbon1.png](https://ipfs.busy.org/ipfs/QmagRD8f8kE8KFUkNGoBWAJNUCU3gUTcbuvCSDsmxhjQFP)

The onboarding is showed when both of the following is true -
- A cookie specific to onboarding is not set.
- The user is not logged in.

If both of this is true, the redux action to show the onboarding is triggered after 5 seconds and the modal is shown.

The state of onboarding (the current page to show and if we want to show the onboarding) is stored with redux. Initially, the onboarding is set to be hidden and the default page is 0. This changes based on the different actions and constraints are set to not render the current index useless.

Once the user sees the onboarding, the cookie is set and it won't re-appear on the next reload.

## 2.3. Auth required components and `Onboard`

The `Onboard` component has a page which prompts users to sign in to the app using SteemConnect. This same page is used when a user tries to take an action which only signed in users can take (e.g. comment and rate).

For achieving this, we have an action called `showSignIn` which set's the current page to the onboarding page - 
![carbon2.png](https://ipfs.busy.org/ipfs/Qmc2J5WRSTWhCDqeZJyW7X5ZDUYBEMQSUMxAm679WY4ymg)

-----

# 3. Code Splitting and Optimized Bundles

App size plays a significant rate in user experience if we talk about the first load of the web app. The final bundled size for the 1Ramp Alpha web app was over 800kB - which made it load slowly in almost all conditions.

To resolve this, a few steps were taken. Let's take a look at them one-by-one.

## 3.1. Code Splitting

> Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

<span>-</span> [Webpack Official Guide](https://webpack.js.org/guides/code-splitting/)

For the app, components are split based on the routes using [`react-loadable`](https://github.com/jamiebuilds/react-loadable). We used route based splitting here to load the required code only when we are on the route that uses it.

Following are the different bundles generated after splitting the components - 

![carbon3.png](https://ipfs.busy.org/ipfs/QmP3u1qYaaLYKFJvzLFwiqiY2WnVZKDGVV31eG66Vxj4oQ)

## 3.2. Source Map Analyzer

To make proper optimizations for the overall size of the app, we need to know that which components are taking up the most of our space. There are many plugins in JS which help us find this out.

We used [`source-map-explorer`](https://www.npmjs.com/package/source-map-explorer) based on the [`create-react-app` documentation](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size).

Once we had the numbers, things were clear about which dependencies were taking a lot of space and could be removed or optimized.

## 3.3. Firebase was causing all the fire
The firebase dependency is the single most significant factor for the large bundle size of the application. And to make things worse, it was not even used as of now - it was used long back in the app.

Just removing Firebase completely made the app much lighter.

## 3.4. UIKit and New Notifications

[`uikit`](https://getuikit.com/) was responsible for a significant amount of bundle size but all it did was showing toasts in the app. So we decided to remove the dependency altogether and move to some lighter solution - [`react-toastify`](https://github.com/fkhadra/react-toastify).

It had all the things we needed and was much smaller in size. Also, it was very easy to change the existing code to utilize this new library ([see diff](https://github.com/hapramp/alpha-web/pull/143/files#diff-8696e08fad2149786075278675fa7ca6)).

## 3.5. Optimizing other dependencies
- `showdown` was used to convert markdown to HTML at few places but was taking too much space and could be replaced with the method which converts post body to HTML.
- `lodash` imports were optimized to only use the function needed in a file.
- Redundant fonts and other resources were fixed in the entry HTML ([see diff](https://github.com/hapramp/alpha-web/pull/143/files#diff-528c3923d718a8860f5d8c05c3931c55)).

## 3.6. Pull requests

- [#148: Makes on-boarding responsive](https://github.com/hapramp/alpha-web/pull/148)
- [#147: Add onboarding page and show login modal for auth required actions](https://github.com/hapramp/alpha-web/pull/147)

-----

# 4. And More...

## 4.1. "Sign in to Participate" in 1Ramp competitions

Earlier, the participate button was simply hidden from the view if the user was signed out. With [#146](https://github.com/hapramp/alpha-web/pull/146), the users will now see a button saying "Sign in to Participate" and would take them to SteemConnect login page if clicked.

This used the newly introduced [`SignInButton`](https://github.com/hapramp/alpha-web/pull/146/files#diff-533f1ab8304d6f4327b69c61cc6e5917) which takes into account the current location of the map and wraps its children inside a hyperlink which points to the SteemConnect login page.

## 4.2. Consistent headings in Posts
There was also a small change which made headings consistent in the posts. Earlier, different headings were of different colors and non-uniform sizes. But with [#145](https://github.com/hapramp/alpha-web/pull/145), it was fixed.

-----

# 5. What's Next?


## 5.1. Contests on 1Ramp --
So far we've hosted 12 contests and participants have won 129 Steem in prizes. From the time we released the [contest feature](https://alpha.1ramp.io/@the1ramp/introducing-competition-pools-on-1ramp-with-2-ongoing-contests) on 1Ramp, we reserved its access to limited accounts as we were testing how this feature will turn out. We are using our Android app to host contests and declare winners and we are loving the ease and experience. Soon this feature will be available for all the 1Ramp users on our web and android app.

![Screenshot 2019-02-04 at 10.22.36 PM.png](https://ipfs.busy.org/ipfs/QmbBQdrHmZYGWZhg38haJk79uhSDXiHYvi5i9pnra798mL)

Don't forget to check out the latest competitions: ["Finish this story"](https://alpha.1ramp.io/competitions/hw3JUeG2UXwkQN4q6fTR) and ["caption this photo"](https://alpha.1ramp.io/competitions/w8lwDxe0MxoyS8DfZqZ9).


## 5.2. We need your feedback
We are building a platform on Steem where anyone with creative interests can come together, engage with each other, participate in the communities, and compete in the contests. We imagine an exciting place on Steem with a friendly and familiar interface and experience. We invite you to try out [1Ramp](https://1ramp.io) and give us your feedback.
 ____________
 <center>
![logo_hapramp_regular@48px.png](https://ipfs.busy.org/ipfs/QmVsvgkVmbc8tzrNR7LvyAAaWyCw8KpUCTK9uHkQ8bVSXw)</center>
###### [1Ramp](https://1ramp.io) is a Social Media platform for creators (powered by Steem blockchain). On 1Ramp, you can join communities of your interest: Art, Dance, Design, Fashion, Film, Literature, Photography, and Travel and earn rewards for sharing your work. We are on a mission to give all creative communities one stage where you can compete, collaborate, and make good art.
###### 1Ramp is Available on [Google Play](https://play.google.com/store/apps/details?id=com.hapramp~) and [Web](https://alpha.1ramp.io).
_____________
<center>
###### Join the conversation on [our Discord](https://discord.gg/c6N9kVM) or write us at [hi@1ramp.io](mailto:hi@1ramp.io) ![Communities_on_1Ramp.png](https://ipfs.busy.org/ipfs/QmNTCSNLxiuexTZ5Ry21jXWk9cayMBEp5yaikTb2RXJA9g) [Twitter](https://twitter.com/the1ramp) | [Medium](https://medium.com/1ramp) | [Instagram](https://instagram.com/the1ramp) | [Facebook](https://facebook.com/the1ramp)
</center>"