Skip to content

drewmarshburn/frontend-challenge

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Developer Challenge

Build a DApp on Kaleido.

Fork this repo, choose a use case you think would be interesting to build as a decentralized application (DApp), then get creative and have fun.

What is a DApp?

What does done look like?

We would like your project to demonstrate your concept end-to-end, but it doesn't need to be a complete application.

It must:

  • Have a Web based user experience, built in React
  • Have a backend-for-the-frontend (BFF), written in Node.js
  • Have on-chain Smart Contract logic, written in Solidity
  • Use a Kaleido blockchain
  • Contain a README that gives a quick overview of the use case, and tells us how to run it

How much time you spend on each tier is down to you - depending on your interests and the skills you want to show.

We've given you a basic, but functional, starting point for each layer of the stack.

Some ideas

These are just ideas to give inspiration

Choose something/anything you think is interesting, and gives you license to focus on the bit of the stack you care about.

It's your choice whether you focus more on how things work under the covers, or how things feel in the UI/UX.

  • A blockchain backed ratings system for Movies
  • A racing simulation (you can even see one here in our Racecourse sample)
  • A funky avatar generator, where each avatar is backed by a unique token
  • A conference ticketing system with camera & QR code integration
  • A digital collectable swag bag, earned by posting to social media

Want more dev stack?

Here are some dev technologies (not in the starter repo) that we love at Kaleido:

  • Redux for front-end state
  • GraphQL (Apollo) for front-end/back-end comms
  • WebSockets (Socket.io) for live updating and notifications
  • MongoDB NoSQL database for configuration and local state
  • Component libraries (insert your favorite here) - at Kaleido we love re-use

Want to throw away most of the original create-react-app + express based repo? No problem. Go for it.

Setting up your Kaleido blockchain

Run through our Quick Start.

When you're done, you will have your very own blockchain, with a smart contract installed that is super simple and lets you get and set a number.

You'll also have a REST API you can use to interact with that on-chain Smart Contract code.

This starter project installs a similar contract, which you can edit backend/contracts/simplestorage.sol

Getting this repo up and running

This repo is a thin layer on top of create-react-app.

Configure the config file

Copy backend/config.example.json to backend/config.json and edit it to the values from the Kaleido Connect panel.

Start it up

# Start the backend in one terminal
cd backend
npm i
npm start

# Start a dev server for your react app in another
# Note the package.json sets `"proxy": "http://localhost:4000"` to pass through API calls to the backend
cd frontend
npm i
npm start

Blockchain accelerators

Some full-stack blockchain services available out-of-the-box with Kaleido that you might find helpful in getting your use case built quickly:

  • Block explorer
    • See the transactions that you submit from your application mined into blocks in your blockchain
  • REST API Gateway
    • Full details of the REST APIs you created in the quick start, and used in the sample deployment in this repo
  • IPFS
    • Decentralized file storage, with a way to "pin" your files to your on-chain logic using hashes. Easy way to store things to big to put on the blockchain itself.
  • Token Factory
    • Create tokens according to the ERC20/ERC721 standard via a factory UI/API, without needing to learn the code.
  • Ethereum Dev Tooling
    • Great tools to help you develop your smart contract logic

Want to know our style?

If you want to be inspired by the Kaleido brand...

Styles

Product Colors

Text Styles

About

Interview Challenge for Front end applicants

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 92.6%
  • HTML 4.3%
  • CSS 3.1%