⚡ Next Tailwind API

• A Next/Tailwind SSR Progressive Web App with API news data displayed, deployed to Vercel
• Barebones app to demonstrate SSR deployment. Needs developing.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Next Tailwind API
  • 📄 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 CSS added to Next.js
• Isomorphic Javascript used
• 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 v11 minimalist framework for rendering react apps on the server.

• Tailwind v2 utility-first CSS framework

• PostCSS v8 tool for transforming CSS with JavaScript

• Vercel for hosting

• pngTree downloadable images, png etc.

• pwa-asset-generator v4 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 basic PWA, Deployed to Vercel
• Status pages:
• home page has no content but perfect lighthouse score,
• working news page with list of cards - clicking on a card redirects to news source website - replace with news detail page.
• data page just has an empty card & perfect Lighthouse scroe - add API data. Add CSP
• About page perfect Lighthouse score, no content
• To-Do: Add content to Home page, improve News page, change news detail page, add navbar colors & fix link, add Tailwind styling

👏 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
• News API docs
• Convert your website into a PWA in 8 simple steps
• How to Deploy Next.js Sites to Netlify

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]