Prepare your workspace
To get started with the Election workshop, you first need to prepare a working environment with some starter code for the election website you''ll be building. In this tutorial, you'll complete the following tasks:
- Clone the project repository.
- Explore the initial state of the project structure.
- Install the dependencies for the application frontend.
- Explore the functionality of the frontend as a standalone application with data stored in memory.
Before you begin
Before you start this tutorial, verify the following basic requirements:
- You have an internet connection and a web browser installed on your local computer.
- You have a code editor, such as Visual Studio Code, access to an interactive terminal shell, and are generally familiar with using command-line programs.
- You have Git installed and are generally familiar with using
git
commands. - You have Node.js and npm installed on your local computer.
- You have Pact or the Pact language server plugin installed on your local computer to support syntax highlighting and other features in the code editor.
Clone the project repository
The first step in setting up your working environment for the Election workshop is to copy the project repository you'll be working with.
To clone the Election project repository:
-
Open a terminal shell on your computer.
-
Clone the project repository by running the following command:
git clone git@github.com:kadena-community/voting-dapp.git election-dapp
git clone git@github.com:kadena-community/voting-dapp.git election-dapp
-
Change to the root of the project directory by running the following command:
cd election-dapp
cd election-dapp
-
Switch to the branch that contains the starter code for the workshop by running the following command:
git checkout 01-getting-started
git checkout 01-getting-started
Open the project in a code editor
In most cases, you'll want to work with the Election project files using an integrated development environment (IDE) such as Visual Studio Code.
If you use Visual Studio Code, you can also use the Kadena Pact language server extension to enable syntax highlighting, error reporting, and code coverage details to improve your smart contract development workflow.
To use the Visual Studio Code extension, you must have pact
and pact-lsp
installed on your local computer.
You can configure the path to each executable in the Pact extension settings.
If you use a different code editor, you might also benefit from having the pact-lsp
executable installed to provide syntax highlighting for Pact code.
To use the Pact extension in Visual Studio Code:
-
Download and install Pact.
For example, you can install Pact on macOS using Homebrew:
brew install kadena-io/pact/pact
brew install kadena-io/pact/pact
-
Download and install the Pact Language Server plugin.
-
Open the
election-dapp
folder in Visual Studio Code. -
In the Visual Studio Code editor, select View, then click Extensions.
-
Type Pact to search for the extension, select Pact from the search results, then click Install.
You can also install the Pact Snippets extension. The Pact Snippets extension provides a collection of code templates for common operations.
After you install the extensions you want to use in your code editor, close the extensions.
-
Click the Explorer view and notice that the
election-dapp
contains the following folders:-
frontend
The
frontend
folder contains the files for the election website. In this tutorial, the website consists of React components, but you could use any framework to create the frontend. The frontend of the application connects to the blockchain through the Kadena client. The Kadena client is annpm
package that can be imported into any JavaScript projec and acts as a conduit for making HTTP API requests to the blockchain. You'll get a closer look at the frontend components in Explore the frontend application. -
pact
The
pact
folder contains your smart contract.pact
files and the.repl
files that are used to test your smart contracts before you deploy them. You'll see that thepact/root
folder already contains some.pact
files. These files are Pact modules that the smart contracts you create in later tutorials depend on. These modules are for local testing with.repl
files. You don't need to deploy them because they are deployed on Kadena networks by default. -
snippets
The
snippets
folder contains JavaScript snippets that use the Kadena client library to perform actions against the blockchain that aren't directly related to the functionality of the election application. For example, files in the snippets folder support deploying and upgrading smart contracts, creating and funding accounts, and transferring coins. You'll learn more about the snippets in the later tutorials.
-
Explore the frontend application
Initially, the election website uses React components that are not connected to a blockchain backend. Inside of the React components, data is manipulated by calling service methods. The services methods get a specific implementation of repositories injected—depending on the project configuration—and, at this point, the project is configured to use an in-memory implementation of repositories and perform all data operations on JavaScript arrays and objects defined in the same file.
The in-memory implementation allows you to explore the basic data flow as a frame of reference before you start building the blockchain implementation. By exploring the application before you start building, you'll have some context to help you understand the work you're about to do.
To explore the election website frontend application:
-
Open a terminal shell on your computer.
-
Verify that you are in the
election-dapp
directory and have checked out the 01-getting-started branch by running the following commands:pwdgit branch
pwdgit branch
-
Change to the frontend directory by running the following command:
cd ./frontend
cd ./frontend
-
Install frontend dependencies by running the following command:
npm install
npm install
-
Start the application locally by running the following command:
npm run start
npm run start
-
Open a browser and navigate to the URL
http://localhost:5173
.The website displays a list of candidates and the number of votes each candidate has received. You can set an account name and cast a vote on any of the candidates. You can only cast one vote per account. You can also add candidates. There are no specific permissions required to perform any operation at this point.
Because all data is manipulated in memory, the state of the frontend is reset as soon as you refresh the page.
Next steps
At this point, you have a basic development environment and an overview of the project directory structure. You have also had you're first look at the frontend for the election website and explored its main features.
In the next tutorial, you'll start a development network—devnet
—blockchain on your local computer inside of a Docker container.
After you get the development network running, you'll be ready to start developing smart contracts to connect the election application to the blockchain backend.