![image.png](https://ipfs.busy.org/ipfs/QmTMhCQjFTCaKDuP9Da59Ncv5Q4BbvHnqjXjvnu4JeCBnE)

#### Repository
https://github.com/mcfarhat/actifit-landingpage
*I created this repository and then transferred ownership to [mcfarhat](https://github.com/mcfarhat). That's why there are no PRs but you can see me as [the only contributor](https://github.com/mcfarhat/actifit-landingpage/graphs/contributors). For future updates there will be PRs.*

#### Read about the project:
https://steemit.com/actifit/@actifit/announcing-actifit-innovative-smt-for-rewarding-fitness-activity

# Landingpage and Wallet

The project was in need of a first little landingpage and a way for people to see their current funds.
Since this includes some data fetching and logic, I decided to use [Vue.js](https://vuejs.org/) and [Nuxt.js](https://nuxtjs.org/) again, to have a solid framework to work with.

The layout is completely custom, no templates were used, just bare [Bootstrap 4](https://getbootstrap.com/).

The images come from [pixabay.com](https://pixabay.com) and are free and require no attribution. But anyway, here are the sources:
https://pixabay.com/en/adult-body-casual-close-up-1867757/
https://pixabay.com/en/people-man-guy-running-sport-2590796/
https://pixabay.com/en/home-fitness-equipment-1840858/

Since the user wallet was the driving purpose of this page, there's a prominently placed box in the header, where you can enter a username and then see the account balance and transaction history. There's no login or other validation. You can type in any username and see it's balance and history.

By the way,... there are no features such as sending and receiving funds. It is really just pure information.

<center>
![image.png](https://ipfs.busy.org/ipfs/QmfByKAotvLo9TUwhvPFXdPLcDR3PjrRzxEFWjmkBXHLy1)
</center>

![image.png](https://ipfs.busy.org/ipfs/QmYXLWNLz1B4h2JBLUfjtmh1vQQyqcMFqyfBoMwR6Yq7MU)

The main page contains only a little bit of text and some images, that I tried to arrange nicely. The only dynamic part is those two numbers - *Tokens Distributed* and *Token Holders*.

![image.png](https://ipfs.busy.org/ipfs/Qmf5zk8XnqXrptipcJssX6vgWtoPwpBXQz8NZWWz1TRuxG)

#

# Implementation

I started with the wallet view, since this was the main task.

First step was to install a fresh Nuxt.js app. You can do this easily with the [npx installer for Nuxt](https://github.com/nuxt-community/create-nuxt-app).

`npx create-nuxt-app actifit-landingpage`

This results in this first commit: https://github.com/mcfarhat/actifit-landingpage/commit/863d551e7ca75e90da4f27e949652728c957f9c3

The second commit actually already implements the wallet view functionality:
https://github.com/mcfarhat/actifit-landingpage/commit/f3d3624442c1b7fb102ad735fb27279db1daf235

There are two views, one for the homepage, which contains a form to provide the username and later became the actual landingpage, and the wallet page to view your account balance and transaction history.

On click on the "Show Wallet" button or by hitting enter in the input field, the `goToWallet` method is triggered, and sends you to `/wallet/<username>` if the provided username is at least 3 characters long.
https://github.com/mcfarhat/actifit-landingpage/blob/master/pages/index.vue#L136

The wallet page then just fetches the data from the API that the project already provides, and displays it.
https://github.com/mcfarhat/actifit-landingpage/blob/master/pages/wallet/_username.vue#L55

Regarding the rest of the landingpage, well... I don't really know what to write about it. It's plain and simple HTML/CSS. Nothing that needs any explanation, I guess. I can only say that [all the commits](https://github.com/mcfarhat/actifit-landingpage/commits/master) after the first two, are only related to the looks of the website and displaying the content nicely.

Oh and of course it's mobile optimized:

<center>
![localhost_3000_(iPhone 5_SE).png](https://ipfs.busy.org/ipfs/QmV3FmtTKvbuy4Vdqm7FEd6skSwyqAndTftMamjQteCf1e)
</center>

# <center><sup>Final Result:</sup><br>[actifit.io](https://actifit.io/)</center>
#

This is just the first iteration, the minimum that was required. I'm already talking with @mcfarhat about future updates, so don't see this as a finished project. I guess it's far from that but it's a start.