Next.js | TypeScript | Styled Components | Solidity | Hardhat
This is a small fun project to get myself immersed in Smart Contracts and Web3 programming. The blockchain side is developed in Solidity, whereas for the frontend I chose Next.js. I definitely plan on polishing it, and expanding with new functionality I learn on the way!
Instructions below will get you a copy of the project up and running on your local machine for development and testing purposes.
You will need a working computer, IDE like VSCode, and internet connection:)
Clone repository on your computer:
git clone https://github.com/erratinsilentio/web3-todo.git
After it is cloned, go to your projects repository. You will see two folders, backend and client. In each of these you will need to install dependencies:
npm install
To run the application localy, open your client repository and type:
npm run dev
Backend is deployed on Goerli Testnet, and should be already connected to the frontend.
Testing is pretty basic, but I definitely plan on expanding it with Waffle testing framework. You can see few tests written in ./backend/tests.ts To run the tests, type this in your terminal:
npx hardhat test
If tests do not run properly, make sure you have all the dependencies installed on the backend.
-
At the start of an application, you should see a connect button.
-
If you are connected to Goerli Testnet, you will be able to connect your MetaMask wallet by clicking the button. There will be an error if you are on another network.
-
After logging in with your wallet, you are able to add new notes. It will take about 15-20 second for the data to be updated.
-
You also have the ability to switch notes important status, or simply delete them.
- Next.js - Web Framework
- Solidity - Smart Contracts
- Hardhat - Ethereum Development Environment
- Styled Components - Styling Framework
- @erratinsilentio - aka myself
Project inspired by @Clever_Programmer Youtube tutorial
- Obviusly to Clever_Programmer, for making a great tutorial, and other people giving out fantastic Web3 content for free!
- For anyone checking out my project!
- And thanks to my girlfriend, for being patient with me sitting in front of the screen for probably too long sometimes:)
