Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrewjbateman/next-tailwind-card
:clipboard: A PWA Next/Tailwind template app with simple Create, Read, Update & Delete card components, deployed to Netlify.
https://github.com/andrewjbateman/next-tailwind-card
css3 deployed html5 lighthouse-score netlify nextjs pwa-app react react-component ssr tailwind tailwindcss template-project
Last synced: 12 days ago
JSON representation
:clipboard: A PWA Next/Tailwind template app with simple Create, Read, Update & Delete card components, deployed to Netlify.
- Host: GitHub
- URL: https://github.com/andrewjbateman/next-tailwind-card
- Owner: AndrewJBateman
- Created: 2021-08-30T14:00:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-07T13:53:49.000Z (over 3 years ago)
- Last Synced: 2024-11-07T03:33:24.392Z (2 months ago)
- Topics: css3, deployed, html5, lighthouse-score, netlify, nextjs, pwa-app, react, react-component, ssr, tailwind, tailwindcss, template-project
- Language: JavaScript
- Homepage: https://festive-lamarr-61ac43.netlify.app
- Size: 1.22 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :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](#zap-next-tailwind-card)
* [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)
* [:books: General Info](#books-general-info)
* [:camera: Screenshots](#camera-screenshots)
* [:signal_strength: Technologies](#signal_strength-technologies)
* [:floppy_disk: Setup](#floppy_disk-setup)
* [:computer: Code Examples](#computer-code-examples)
* [:clipboard: Status & To-Do List](#clipboard-status--to-do-list)
* [:clap: Inspiration](#clap-inspiration)
* [:file_folder: License](#file_folder-license)
* [:envelope: Contact](#envelope-contact)
## :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](https://tailwindcss.com/docs/guides/nextjs)
* [`Just-in-Time Mode`](https://tailwindcss.com/docs/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](https://nextjs.org/docs/advanced-features/custom-document) `pages/_document` used to add to app's and tags
* [Next.js State Management](https://www.smashingmagazine.com/2021/08/state-management-nextjs/) 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](https://reactjs.org/) Javascript library.
* [React icons v4](https://www.npmjs.com/package/react-icons), full list [here](https://react-icons.github.io/react-icons)
* [Next v11](https://nextjs.org/) minimalist framework for rendering react apps on the server.
* [Tailwind v2](https://tailwindcss.com/) utility-first CSS framework
* [PostCSS v8](https://postcss.org/) tool for transforming CSS with JavaScript
* [pngTree](https://pngtree.com/) downloadable images, png etc.
* [pwa-asset-generator v4](https://www.npmjs.com/package/pwa-asset-generator) 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](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
```javascript
render() {
return (
);
}
```
## :clipboard: Status & To-Do List
* Status: Working CRUD app but needs work. All data lost upon refresh. [Deployed to Netlify](https://festive-lamarr-61ac43.netlify.app/)
* To-Do: Replace create & edit page styling. Add nav with about & contact links. Add card component, add about & contact cards
## :clap: Inspiration
* [Install Tailwind CSS with Next.js](https://tailwindcss.com/docs/guides/nextjs)
* [Tailwind CSS: Customizing Colors](https://tailwindcss.com/docs/customizing-colors)
* [Next.js example app](https://tailwindcss.com/docs/guides/nextjs)
* [Not Science Lab: Product Card Tutorial (Next.js, Tailwind CSS and react-icons)](https://www.youtube.com/watch?v=E11eRGweC3M)
* [Convert your website into a PWA in 8 simple steps](https://milindsoorya.site/blog/convert-your-website-into-a-pwa-in-8-simple-steps-next-js-pwa-series-part-2#step-6-edit-your-_documentjs-file)
* [How to Deploy Next.js Sites to Netlify](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/)
* [codewith hugo: Why doesn't React.useEffect run on React server-side renders (SSR)?](https://codewithhugo.com/react-useeffect-ssr/)
* [hasinhayder/tailwind-cards](https://github.com/hasinhayder/tailwind-cards/blob/master/index.html)
## :file_folder: License
* N/A
## :envelope: Contact
* Repo created by [ABateman](https://github.com/AndrewJBateman), email: [email protected]