Building a Landing Page for a game (flask)
Budget: €750 – €1,500 EUR
We are building a marketing landing page for a mobile game.
We need someone to code the landing page (all needed graphical assets and figma designs will be provided) and code it, using Flask. The landing page will have two main pages, a welcome page and an "inventory" page shown after login. The project will include work with the SDKs for firebase (login), Venly Wallet API (web3 wallet management), and Discord and Twitter APIs (verification), all REST based.
Please refer to Figma export for Design overview: Free Mint Landing Page Figma.png (all assets will be provided from Figma on start of project)
Welcome Page
The welcome Page will be the first page shown the user. Based mostly on existing design of main site http://legendaryheroes.gg. The code for the main site is flat html with tailwind CSS. CSS and HTML for the main site will be made available
On the Welcome page, the user will be prompted to “Get Free Hero Now!” via a button, which when clicked will provide options for firebase provided social logins via Facebook, Twitter, Google.
From the social login we should get an email address for the user for later storage in DB.
Inventory Page
This is where the user finds themselves after the login has been completed. As soon as the login is completed, an IMX wallet should be created for the user via Venly Wallet API (https://docs.venly.io/api/api-products/wallet-api). A custom PIN needs to be randomly chosen for the wallet. The PIN should be saved later into the DB in an encrypted way. The wallet ID and wallet address should be gotten as well here for storage into DB.
Requirements:
The "inventory" page will have a requirement for the user to subscribe to our twitter and join our discord. Until those requirements are satisfied, the “get free hero” button is disabled and should display a “Follow us on Discord and Twitter before redeeming your free pro!” message
Check discord presence: The user should be added to our discord or his presence there with the “verified” role confirmed via API call (eg https://discord.com/developers/docs/resources/guild#add-guild-member , then verify if role “Verified” on our server.. A bot is already set up and credentials/ OAuth URL can be provided for the authentication.
If success: put checkmark
If failure: add the user to our discord & prompt him to verify it, check upon refresh if the “Verified Role” was assigned to user.
Check twitter follower: should give the ability for the user to log into and connect his existing twitter account and it must be checked if the user has followed our twitter account @esportsheroesgg.
If success: put checkmark
If failure: prompt the user to follow us on twitter, linking our profile
If those criteria are satisfied, the “get free hero” button should be enabled. Both Discord and Twitter accounts should be recorded.
If the user clicks the get free hero button, we need to
Prompt the user via modal if we wants us to secure his wallet or if he wants to set his own pin and remember it himself. If he wants to set it himself, update PIN set previously via API https://docs.venly.io/api/api-products/wallet-api/update-pin
Make sure that everything is recorded properly in the DB, i.e. the following:
Datetime
Firebase user id to recognize user if he logs in again
Email
Wallet address
Wallet ID
Wallet PIN (empty if user sets own pin, otherwise the previously chosen PIN)
Discord ID / username
Twitter address
Load the “Success” version of the Inventory Page as per design.
Backend
We will provide access credentials to a DB and a machine to serve the website. The backend will be hosted on AWS, so experience there is good. Anything else needed (lamba, etc) should be requested from us asap so that we can provide.
Code should be hosted on github.
We need someone to code the landing page (all needed graphical assets and figma designs will be provided) and code it, using Flask. The landing page will have two main pages, a welcome page and an "inventory" page shown after login. The project will include work with the SDKs for firebase (login), Venly Wallet API (web3 wallet management), and Discord and Twitter APIs (verification), all REST based.
Please refer to Figma export for Design overview: Free Mint Landing Page Figma.png (all assets will be provided from Figma on start of project)
Welcome Page
The welcome Page will be the first page shown the user. Based mostly on existing design of main site http://legendaryheroes.gg. The code for the main site is flat html with tailwind CSS. CSS and HTML for the main site will be made available
On the Welcome page, the user will be prompted to “Get Free Hero Now!” via a button, which when clicked will provide options for firebase provided social logins via Facebook, Twitter, Google.
From the social login we should get an email address for the user for later storage in DB.
Inventory Page
This is where the user finds themselves after the login has been completed. As soon as the login is completed, an IMX wallet should be created for the user via Venly Wallet API (https://docs.venly.io/api/api-products/wallet-api). A custom PIN needs to be randomly chosen for the wallet. The PIN should be saved later into the DB in an encrypted way. The wallet ID and wallet address should be gotten as well here for storage into DB.
Requirements:
The "inventory" page will have a requirement for the user to subscribe to our twitter and join our discord. Until those requirements are satisfied, the “get free hero” button is disabled and should display a “Follow us on Discord and Twitter before redeeming your free pro!” message
Check discord presence: The user should be added to our discord or his presence there with the “verified” role confirmed via API call (eg https://discord.com/developers/docs/resources/guild#add-guild-member , then verify if role “Verified” on our server.. A bot is already set up and credentials/ OAuth URL can be provided for the authentication.
If success: put checkmark
If failure: add the user to our discord & prompt him to verify it, check upon refresh if the “Verified Role” was assigned to user.
Check twitter follower: should give the ability for the user to log into and connect his existing twitter account and it must be checked if the user has followed our twitter account @esportsheroesgg.
If success: put checkmark
If failure: prompt the user to follow us on twitter, linking our profile
If those criteria are satisfied, the “get free hero” button should be enabled. Both Discord and Twitter accounts should be recorded.
If the user clicks the get free hero button, we need to
Prompt the user via modal if we wants us to secure his wallet or if he wants to set his own pin and remember it himself. If he wants to set it himself, update PIN set previously via API https://docs.venly.io/api/api-products/wallet-api/update-pin
Make sure that everything is recorded properly in the DB, i.e. the following:
Datetime
Firebase user id to recognize user if he logs in again
Wallet address
Wallet ID
Wallet PIN (empty if user sets own pin, otherwise the previously chosen PIN)
Discord ID / username
Twitter address
Load the “Success” version of the Inventory Page as per design.
Backend
We will provide access credentials to a DB and a machine to serve the website. The backend will be hosted on AWS, so experience there is good. Anything else needed (lamba, etc) should be requested from us asap so that we can provide.
Code should be hosted on github.