Next Tailwind Card

📋 A PWA Next/Tailwind template app with simple Create, Read, Update & Delete card components, deployed to Netlify.

#nextjs #tailwindcss #tailwind #css3 #html5 #lighthouse-score #react-component #pwa-app #template-project #ssr

Demo Download

:zap: Next Tailwind Card

A PWA Next/Tailwind template app with card component and perfect Lighthouse score
Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

:zap: Next Tailwind Card

:books: 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 as part of Next.js example app
Just-in-Time Mode used for Tailwind CSS.
Progressive Web App (PWA) enabled. Latest Next v11 used includes server code and makes adding PWA much easier
Custom Document pages/_document used to add to app's and tags
Next.js State Management NotesContext: note data is passed from provider to consumer, avoids props drilling from React passing data from top to bottom
Nextjs useEffect Hook is like componentDidMount, componentDidUpdate, and componentWillUnmount combined. They don't run during Server Side Rendering (SSR). UseEffect runs after rendering

:camera: Screenshots

:signal_strength: Technologies

React v17 Javascript library.
React icons v4, full list here
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
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

:floppy_disk: 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.

:computer: Code Examples

pages/_document HTML render used to add custom HTML to existing Next document page

render() {
    return (
        <Html lang="en">
            <Head>
                <meta
                    name="description"
                    content="Build a Next.js PWA with 100% lighthouse score"
                ></meta>
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1.0"
                />
                <meta name="theme-color" content="#0D47A1" />
                <link rel="manifest" href="/manifest.json" />
                <link
                    href="/favicon-16x16.png"
                    rel="icon"
                    type="image/png"
                    sizes="16x16"
                />
                <link
                    href="/favicon-32x32.png"
                    rel="icon"
                    type="image/png"
                    sizes="32x32"
                />
                <link rel="apple-touch-icon" href="/apple-icon.png"></link>
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}

:clipboard: Status & To-Do List

Status: Working CRUD app but needs work. All data lost upon refresh. Deployed to Netlify
To-Do: Replace create & edit page styling. Add nav with about & contact links. Add card component, add about & contact cards

:clap: Inspiration

:file_folder: License

:envelope: Contact

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

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce