Welcome to my project!

This is a project I made for a job application. It's a simple cryptocurrency tracker that shows the top 100 cryptocurrencies by market cap. It's built with Remix, a React framework that I'm currently learning.

Why Remix?

I chose Remix over NextJS because it was the one area I hadn't explored yet, and I wanted to take this chance to broaden my skill set.

Check it out

Note

The live version of the app is not completely supported at the moment since the Binance API doesn't work in the US, where Vercel have their free tier servers.

You can check out the live version of the app here.

Getting Started

Install Dependencies

$ npm install

Configure Environment Variables

Copy the .env.example file to .env and fill in the values.

Download Coin Images

To make sure the images are up to date run npm run download-images from the root of the project. This will download the latest coin images from the Coinmerce and save them to the public/images folder.

Start the Development Server

$ npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Using Docker

If you have Docker installed, you can run the app in a container:

$ docker-compose build dev
$ docker-compose up dev

This will start the app in development mode, rebuilding assets on file changes.

For the production version, run:

$ docker-compose build prod
$ docker-compose up prod

This will build the app for production and start it.

Deployment

First, build your app for production:

$ npm run build

Then run the app in production mode:

$ npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

• build/
• public/build/

Technologies used

• Remix - React framework
• TailwindCSS - CSS framework
• React - JavaScript library
• React Spring - Animation library
• Lottie - Animation library
• Vercel - Hosting platform
• TypeScript - Programming language
• ESBuild - JavaScript bundler
• ESLint - Linter
• Prettier - Code formatter
• Jest - Testing framework
• Testing Library - Testing utilities
• React Testing Library - React testing utilities
• Husky - Git hooks
• Lint Staged - Run linters against staged git files
• Docker - Containerization platform