Go and try the live version of NFTracker.
This project was bootstrapped with the Blues Stack by Remix.
Besides the original Remix stack, this project is using:
- RainbowKit and Wagmi for wallet connection handle.
- RadixUI for complex components.
- dnd-kit for Drag & Drop functionallity
- SIWE for manage user sessions based on wallet connection.
- React Icons for easy-use icons
- SWR for API pagination hooks
- Reservoir for NFT APIs
Remix is one of the most popular full-stack web frameworks nowadays. I never had a chance of trying it before, so I used this challenge as an oportunity to discover it. But this desition has it outcomes, every example and documentation of the Web3 tools used in this project was focused on NextJs, so some research was needed to make these tools to work.
Before this project, I had no idea at all (and I still don't lol) about Web3 and the tools used on these kind of projects, so after some research I found RainbowKit and Wagmi as some standars, and after some pitfalls I found the final results decent enough for this small demo.
In regards to the drag-&-drop functionallity, I find dnd-kit as the way to go nowadays, I used it before in some demos as well as in the last project I worked, with amazing results. So no doubt on what to use for this feature.
SWR and Radix were already part the Web3 tools dependencies used in this project, so I took advantage of those which are amazing tools and were a good fit for what I needed for this small project.
For this I did some research on web3 sites to understand a bit more about the patters used.
-
Clone this repo and install its dependencies
npm install
-
Start the Postgres Database in Docker:
npm run docker
Note: The npm script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.
-
Initial setup:
npm run setup
-
Run the first build:
npm run build
-
Start dev server:
npm run dev
This starts the app in development mode, rebuilding assets on file changes.
If you'd prefer not to use Docker, you can also use Fly's Wireguard VPN to connect to a development database (or even your production database). You can find the instructions to set up Wireguard here, and the instructions for creating a development database here.
This is a very simple platform that intends to help users group tokens into one Custom Collection that can be followed and monitored. The main functionality is logging it with your Etherum wallet, selecting any NFT collection you want, and pick the relevant tokens you would like to keep track of, creating custom collections. Collections can be updated and deleted at any time.
- creating users and updating ./app/models/user.server.ts
- user sessions, and verifying them ./app/session.server.ts
- creating, deleting and updating collections ./app/models/collection.server.ts
This project uses GitHub Actions for continuous integration and deployment. Anything that gets into the main branch will be deployed to production after running tests/build/etc.
This is a very simple app where most of the code belongs to libs already tested. Having said this, I do consider adding some e2e tests for the collections flows. My plan is to add some in the upcoming days (I ran out of time for personal reasons).
- WIP e2e tests
This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.
This project uses ESLint for linting. That is configured in .eslintrc.js.
We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin (like the VSCode Prettier plugin) to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.