⚡ Next Tailwind Crypto

• A Next/Tailwind app to display Cryptocurrency info.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Next Tailwind Crypto
  • 📄 Table of contents
  • 📚 General Info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General Info

• Next.js used for frontend is for server-rendered react apps. It has automatic code splitting, simple page-based routing, built-in CSS support and hot reloading. Every component file in the pages folder is treated as a page
• Tailwind Installation Guide used to add Tailwind CSS
• Latest Next/Image optimisation used so image downloaded as Webp format and automatically sized. This is a major advantage over non-optimised Images. Working for datalist page but not used for News API page as all sources have to be added to next.config.js

📷 Screenshots

📶 Technologies

• React v17 Javascript library.
• React icons v4
• Next v12 minimalist framework for rendering react apps on the server.
• Tailwind CSS v3 utility-first CSS framework
• PostCSS v8 tool for transforming CSS with JavaScript
• Nomics Cryptocurrency API v1
• Pixabay photos free to download
• pngTree downloadable images, png etc.
• pwa-asset-generator v6 Automated PWA asset generation and image declaration. Creates icons and JSON array for PWA manifest.json file

💾 Setup

• npm run dev runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
• npm run build builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
• npm run start to run the built app.

💻 Code Examples

• tba

📋 Status & To-Do List

• Status: Working. Deployed to Vercel as PWA with perfect lighthouse score
• To-Do: Add navbar, footer?, home page grid of cards & change crypto card content, detail page new card - add graph?

👏 Inspiration

• Install Tailwind CSS with Next.js
• Medium: How to use Next.js Image component
• Stackoverflow: Next.JS "Link" vs "router.push()" vs "a" tag
• Javascript Info: Async Await explained
• Convert your website into a PWA in 8 simple steps

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com