Dapp Templates.

Save over 100 hours of coding with fully functional Dapp templates.


Mini Jobs Board


Mini Jobs Board is a fully functional jobs board that collects payments for business job posts in Ethereum. It has a 2-Click sign in with Metamask, and a range of features listed below:

  • Admin can:
    • Set preferred blockchain network for receiving payments. E.g Ethereum Rinkeby
    • Set price and expiration days of job posts.
    • View all users (businesses and job seekers).
    • Can edit a business user’s job post
    • View all paid posts.
    • View all blockchain transactions.
    • Change SEO meta tags.
    • View sitemap.
  • Business users can: 
    • Post a job including tagging it.
    • Repost the job by paying the fee again. The fields will auto-populate in create form.
    • Review applicants
  • Jobseeker users can:
    • Browse jobs in order of data created.
    • Apply for jobs. These are recorded in the dashboard of the user and the business.
    • Can only apply once, but can edit their cover letter.
    • Save jobs to view later, like favourites.
    • The list of jobs, and individual job posts, give feedback to the user what they’ve already saved and applied for.
  • The business can edit the post after the payment and any time before it expires. The job title cant be changed - this is just to prevent ‘malicious’ users using a single paid post to effectively create multiple job posts during the validity period.


Architecture

The languages used are HTML, CSS, Javascript, and Laravel PHP.

The site has a core template which then has the custom HTML/PHP built on top of it to suit the unique project. The core template functionality is in a single folder kept completely separate from all the main files you’ll customize.

 

    1. Core template: Metamask integration & login, admin & user dashboards.
    2. Project files of your project: In this case ‘Mini Analytics’ demo.

 

The core template folder contains routes, controllers, views, and models. The template folder is easily upgradable so if there's any new features, additional blockchain integrations, or bug fixes etc, you can simply replace this one folder and everything will work.

 

View injection

Your custom files are injected into the core template files. For example, the navbar has just a login button and Metamask wallet connect button. You'll edit separate code with the logo & nav links that are injected into the navbar.

 

 

 

Core template

The core template folder creates the minimum site including:

  • Navbar with Metamask button and login
  • Blank landing page
  • Admin dashboard:
    • Settings: Metamask account, Blockchain Network, Website meta tags
    • Users: list of every user account created
    • Transactions: list of every blockchain transaction made
  • Sitemap
  • User dashboard:
    • Settings: name and email (email validated to be unique)

 

In a nutshell, users can connect to Metamask which also logs into the application. There is a user verification process that involves sending a small amount of TEST Ether on the Rinkeby test net. Admin can log in with Metamask, update settings, manage users, and see all blockchain transactions.

 

Project files

These files, which are separate from the template, can be deleted or modified in any way. In this demo application, their purpose is to have prebuilt blockchain logic you can modify to suit your project ideas. Being separate from the core template files, you don't need to worry about 'messing up' the core functionality.

 

The features are:

  • Users: extra settings like a phone number
  • Users: extra page called 'ETH transfer widget'. This can send ETH to any account.
  • Users: extra page called 'Premium data'. This is a paid subscription where the user buys say 6 months access to premium data.
  • Admin: extra settings like 'Job Post cost', and 'Job Post expiry days'
  • Admin: extra page called 'Paid Posts'. Lists paid posts created by business users.

 

 

Notes about the demo

  • Admin settings are locked because multiple test users logged in at the same time will create unexpected results.
  • There's a test admin one-click login

 

 

 

Metamask connection in detail

  • Logs the user in with 2 clicks.
  • Connects Metamask wallet to application.
  • If Metamask isn't installed on the browser, then a button displays as "download Metamask" with a link to Metamask’s site.
  • If installed & not logged in, then the button displays as "Connect MetaMask".
  • If a user is on a Mobile device in which Metamask isn't compatible, the Metamask button is replaced with a message informing the user to open on a Desktop browser.
  • Button disabled out while pending login.
  • Detects blockchain networks used. Admin can set a preferred chain to guide the user.
  • Admin sets required test networks, e.g Ropsten, Rinkeby, Kovan, Goerli.
  • A message appears under the navbar to guide the user to be connected to the intended network. e.g Rinkeby Testnet
  • If the user changes Network in Metamask, the message is updated.

 

 

Minimum views required

There are some project area views which, although can be blank, should be kept with their current names so that the core template can reference them properly if needed.

  • “backend” > “admin” > “admin”, “sidebar_menu”
  • “backend” > “user” > “user”, “sidebar_menu”
  • “backend” > “nav_logo_backend”
  • “frontend” > “landing”
  • “frontend” > “nav_links”
  • “frontend” > “nav_logo”
  • “libraries” > “frontend_styles”

 

 

Dependencies (all free)

 

 

Installation (localhost - Xampp)

  1. Sign up to Etherscan free plan and get API key
  2. Create your project folder somewhere in xampp > htdocs, then unzip the contents of ‘minijobsboard.zip’. Let's say xampp>htdocs>minianalyics.
  3. Open up phpMyAdmin   http://localhost/phpmyadmin/
  4. Create a new database called “mini_jobs_board”.
  5. Open the ENV file in your project folder. You’ll need to fill out:
    • Etherscan_api_key
    • db_host
    • db_database
    • db_username
    • Db_password

 

Note there are 2 sections “LOCALHOST DB Settings” and “PRODUCTION DB Settings”. The ‘#’ is commenting out the lines not being used. Mine looks like:

 

  1. Command Prompts:

cd /xampp/htdocs/minijobsboard

php artisan migrate

php artisan migrate --seed --path=/template/database/migrations/

php artisan key:generate

php artisan serve --port=8001

 

  1. Go to http://127.0.0.1:8001/

 

That's it, it should all be working now.

 

Installation (Live production on Cpanel)

  1. Sign up to Etherscan free plan and get API key
  2. In cpanel, you’ll need 2 folders. A public folder, and a project files folder. I’m using a subdomain, but the concept is the same. Your format could be:
  • Yoursite.com (public folder)
  • Yousite_files (project files)

  1. Cpanel > File Manager > {project files folder}: click upload, then import ‘minianalytics.zip’

  1. Extract the zip folder, then delete the original zip file. You’ll be left with just ‘minianalytics folder’.
  2. Open this folder, and move the contents within the ‘public’ folder to your public folder. E.g yoursite.com. Use ‘select all’ then ‘move’. You can delete the newly empty folder.
  3. Open the project files folder, move the contents up one level, and delete the newly empty folder.

 

 

  1. Create a new database in ‘MySQL Database Wizard’ in Cpanel. Select ‘all privileges’. Record the username, database name, and password. It usually has hosting-related prepending. My username and database are both called ‘fresenom_mini_analytics’.
  2. Open the ENV file in your project folder. You’ll need to fill out:

 

  • Etherscan_api_key
  • db_host
  • db_database
  • db_username
  • Db_password

 

Note there’s 2 sections “LOCALHOST DB Settings” and “PRODUCTION DB Settings”. The ‘#’ is commenting out the lines not being used. Mine looks like:

‘APP_DEBUG’ hides or shows server level errors.  For production this should be ‘false’ to prevent hackers seeing sensitive database information, but whilst setting up, make this ‘true’ so you can diagnose any setup problems.

 

  1. In the public folder, open index.php. Change the ‘autoload’ and ‘app’ paths. I have:

 

require __DIR__.'/../minijobsboard_files/vendor/autoload.php';

 

$app = require_once __DIR__.'/../minijobsboard_files/bootstrap/app.php';

 

  1. Run data migrations and seeder. In cPanel, open ‘Terminal’. List of commands:

 

cd minianalytics_files

php artisan migrate

php artisan migrate --seed --path=/template/database/migrations/

php artisan key:generate

 

That's it, it should all be working now.

 

 

Demo features

Ether transfer widget
  • Send Ether on the testnet to an account you choose.
  • The widget disables inputs if the user doesn't have the correct Metamask network in use.
  • The transactions appear in the table with a link to the transaction on etherscan.io
  • All transactions are initially ‘pending’, then an API checks their completion status to update their status.

 

Premium subscription
  • Admin sets price and duration.
  • The user sends the fee via the Ether transfer widget.
  • The Etherscan API intercepts and checks if the amount is correct.
  • The user is granted access to the premium area.
  • The subscription expires after the set time.

 

 

General notes

  • The Free Etherscan API allows the testnets Kovan, Rinkeby, Ropsten, and Goerli.
  • Appserviceprovider contains a boot method to put $settings in every view

 

Listeners

  • loginEvent (user has logged in)
  • walletConnectEvent (wallet has been connected)
  • transferCancelledEvent (Starts a transfer, but cancel in Metamask)

Add Javascript to views/libraries/frontend_scripts

Published 26 Sep 2021
Browsers Chrome, Firefox
Languages Laravel PHP, JS, CSS, HTML
25 USD

   Quality checked by DappTemplates

   Documented

   Responsive


Price is in US dollars and excludes tax

Published 26 Sep 2021
Browsers Chrome, Firefox
Languages Laravel PHP, JS, CSS, HTML

Innovative Dapp Templates

Are you a Dapp developer? Add a Dapp template to start earning.

A Simple Guide to Finding the Best Website Template for Your Business

If you’ve just started a new business, or are planning on launching a new website for your existing business, you might be wondering how to find the best website template for your needs. There are so many options when it comes to choosing the right design for your company and brand that it can be pretty overwhelming. However, with the right preparation and research, you can create an eye-catching and effective website that drives visitors to take action. The first step in this process is finding the perfect template for your business. If you’re looking for some ideas about where to start with this process, read on for our list of helpful tips about how to select the best website template for your business.


Uses easy frameworks like Bootstrap

The first thing you should look for when shopping for a new website template is whether or not it uses an easy framework like Bootstrap. If the design of your template is based on Bootstrap, you’ll be able to swap out the design with a different one – even if you hire a different developer. This is huge for two reasons: 1) It saves you money on long-term maintenance costs, and 2) It saves you time in the long run by making it easier to swap out designs. If the design of your website template is based on a framework like Bootstrap, you’ll be able to easily swap out the design with a different one in the future.


Do Your Research

Before you even start looking at different website templates, you need to do your research. First, you’ll want to make sure you understand the different types of website templates that are available. There are basically three types of website templates online: 1) Templates built on premade design platforms, 2) Custom designs created by designers, and 3) Website builders like Wix. What’s important to note about these options is that premade design platforms are usually very simple and are designed for people who are very new to website design. They’re usually pretty limited in terms of functionality and flexibility. On the other hand, custom designed websites are the complete opposite – they offer a ton of flexibility and functionality, but can be expensive.


Check the Templates for Security

Another thing to do before you start shopping for a new website template is to check the templates for security. You can do this by looking at the loading source code in the website template and seeing if it references any security issues. You can also check the website URL and see if it’s currently listed on any blacklists. If it is, you’ll need to find another template to use. Security is a big deal when it comes to website design and functionality, especially if your company sells products or services online. Having a safe and secure website is paramount in terms of protecting your customers’ information and data. Remember, it’s not just your customers that you need to be thinking about – it’s also the search engines. A secure site will help your SEO efforts and make it easier for people to find your business online.


Think About Functionality

Once you’ve checked the templates for security, it’s time to start thinking about functionality. You want to look for a website template that has all the features your business needs. If you’re launching a new eCommerce website, for example, you’ll want to make sure to find a website design that has eCommerce functionality built-in. You may also need to find a website template that allows you to create multiple pages or sections of your website – depending on the needs of your business. Make sure your chosen website template has the functionality you need before you start making any payments.


Ask the Right Questions

With all the research you’ve done up until this point, you should have a pretty good idea of which website templates work best for your business. Now, it’s time to narrow down your selection by asking the right questions. Here are some questions to ask yourself when shopping for a new website template: - What is the purpose of the website? - Who is the target audience? - What is the tone of the website? - What content will be featured on the website? - How often will the content be updated? - What functionality is needed? - What features are required? - What style of website is best for the business? The answers to these questions will help you narrow down your selection and find the perfect template for your needs.


Try the live demo

As you’re making your final decision about which website template to use, there’s one more thing you should do. You want to make sure that you try the live demo and make sure it meets all your needs. Even if you’ve narrowed down your selection, make sure that you try a few different templates to make sure you don’t miss out on a better option. You don’t want to find out after you’ve already purchased the website template that it doesn’t meet your needs. Try the live demo to make sure the template you’ve chosen is the best for your business.


Fast loading time

Finally, make sure you check out the loading time of the website templates you’re considering. Website loading speed is becoming increasingly important. It has been found that a one-second delay in website response can result in a 7% reduction in conversions and a loss of $8,100 per minute in revenue. The good news is that there are a few things you can do to make sure you find a template that has a fast loading time. Look for these things when you do your research: - The type of design used. - What framework it’s built on. - How many external links are used. - Whether or not it uses a CDN. - What hosting plan is used. These are all factors that affect the loading time of a website. The faster the loading time, the more likely it is that customers will stay and interact with the site.


Conclusion

Selecting the best website template for your business can seem like a daunting task. However, if you take the time to do your research, choose a design that meets your company’s needs, and ask the right questions, it can be a fairly easy process. You can also make the process even easier by considering these tips for finding the best website template for your business.

More than anything, the most significant advantage of Dapps is that they are decentralized. All software product owners have experienced web downtime, security breaches, and other failures and bugs. Dapps are here to solve many of those problems.

Here are some of the critical benefits of Dapps:
  • Removing transaction fees.
  • Users can retain control of their data.
  • Open-source.
  • Since there is no central place to hack, they reduce massive data breaches.
  • Censorship-proof.
  • Can accept cryptocurrency as payment.
  • Can generate income for users.
  • No central authority or monopoly.
  • Readily scalable.
  • CryptoKitties: buy and sell blockchain-based cats. CryptoKitties are non-fungible ERC-721 tokens on the Ethereum blockchain.
  • MyEtherWallet: a free, open-source, client-side interface for generating Ethereum wallets and more.
  • MyCrypto Wallet: swap, send, and buy crypto with your favorite wallets with this Ethereum wallet manager.
  • SelfKey: a self-sovereign identity system
  • Uniswap: automated market maker, decentralized exchange.
  • Opensea: OpenSea is a decentralized marketplace where users can buy and sell non-fungible tokens.
  • MakerDAO: a decentralized lending platform allowing users to borrow the DAI stablecoin.
Bitcoin paved the way with its cryptographically stored ledger, scarce-asset model, and peer-to-peer technology. These features provide a starting point for building a new type of software called decentralized applications, or dapps.
MetaMask is not a Dapp, it is a browser extension designed to make accessing Ethereum's Dapp ecosystem easier. It also serves as a wallet for holding ERC-20 tokens allowing users to access services built on the network via the wallet.
The MetaMask crypto wallet app allows you to send and receive Ethereum, Eth-based tokens, Binance Smart Chain tokens, and a host of other coins from different chains.
Ethereum. One of the most used Open Source blockchain platforms for DApps development Ethereum is blockchain based decentralized platform intended for creating 'smart' smart contracts; applications that run as programmed without any censorship, downtime, fraud or third-party intermediaries.
Dapps can be web pages, desktop or mobile apps that simply operate like any other application might. The application’s data is not hosted on local or cloud servers, rather a network of nodes that maintains an identical ledger – this is a blockchain.
Smart contracts are programs stored on the blockchain, and they self-execute when conditions are met. DApps are applications that don't exist on the blockchain but rather interact with it. DApps are used to communicate with smart contacts, and by doing that, with blockchain itself.
A Digital Wallet which is commonly a browser extension or Native mobile app. The Wallet company will depend on which blockchain you're interacting with. Metamask for example connects to Ethereum.
Coding a Decentralized Application. These can be on mobile (native apps), or web (web applications). The application is a mix of "on chain" code (the blockchain smart contracts), and "off chain" which the code tying it all together. Dapps are actually only around 5% "on chain" coding.
A peer-to-peer file system. One such protocol is 'IFPS' (Inter Planetary File System). A peer-to-peer method of storing and sharing hypermedia in a decentralized file system. A record of each file called a 'hash' is stored on the blockchain, and the files themselves are stored on decentralized cloud servers.
First of all, a dapp’s operation is completely transparent and recorded on the public ledger. In addition, its data and transaction cannot be erased once it is generated. The key advantages are that a dapp is more trusted by the users, and the users get the control and ownership of their data and assets. The current disadvantage is that dapps are not as user-friendly as traditional apps - it still has some limitation due to the scalability of blockchains and it also required more learning process for the users to understand wallets, tokens, transactions etc.