Krypto Trading

Features

• Displaying the actual cryptocurrency rate to USD for 6 currencies.
• Parallax animations.

Technologies Used

• React + TypeScript;
• Styled with Tailwind CSS;
• APIs:
  • CoinGecko

Credits (In order of appearance)

• Libraries: HeadlessUI, React Scroll, React Scroll Parallax, React Player, Swiper
• Photostock by Pexels and Unsplash videostock by Pexels
• Ukrainian Heart icon by Linector
• Design by xpense

Live Demo

Live Demo

This website made with Webpack React TS Boilerplate (Tailwind CSS Edition)

Features

• ⚛️ Supports React + TypeScript

• 🔥 React Refresh (HMR) (Dev mode)

• 🖌️ Supports styling with CSS-in-JS

  • Tailwind CSS
  • SASS/SCSS preprocessor
  • PostCSS preprocessor

• 🔍 Source-maps for CSS and JS files (Dev mode)

• 🗜️ Minification of HTML/CSS/JS files (Prod mode)

• 🖼 Optimization of images with Sharp (Prod mode)

  • 🔁 Images can be converted to WEBP or AVIF formats (Prod mode)

• ⭐ SVGR converts SVG into React components and inserts them as inline SVG into HTML.

• 🧰 ESlint, Stylelint and Prettier

• 🌐 Browserlist

• 🪄 Babel transpiller

• ⚙️ Support of environment variables (dotenv)

• 🔬 Webpack Bundle Analyzer (Prod mode)

  • 📃 An HTML report file will be created in the reports folder.

• Supports React + TypeScript

• React Refresh (HMR) (Dev mode)

• Supports styling with

  • Tailwind CSS
  • SASS/SCSS preprocessor
  • PostCSS preprocessor
    • Autoprefixer

• Babel transpiller

• Source-maps for CSS and JS files (Dev mode)

• Minification of HTML/CSS/JS files (Prod mode)

• Optimization of images with Squoosh (Prod mode)

  • Images can be converted to WEBP format (Prod mode)

• SVGR converts SVG into React components and inserts them as inline SVG into HTML.

• ESlint and Stylelint

• Prettier

• Support of environment variables (dotenv)

• Webpack Bundle Analyzer (Prod mode)

  • An HTML report file will be created in the reports folder.

Scripts

To install dependencies:

yarn install

Start development mode:

yarn run start

Create production build:

yarn run build

Lint code:

yarn run lint

Format code with Prettier:

yarn run format