Skip to content

next-react-query-tailwind readme content#17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danecando merged 2 commits into from
Mar 14, 2022
Merged

next-react-query-tailwind readme content #17

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96a3a1b
An initial starter kit readme structure / example
danecando Jan 18, 2022
ecda4f6
Updates to kit readme
danecando Mar 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 53 additions & 19 deletions starters/next-react-query-tailwind/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# next-react-query-tailwind starter kit

## Getting Started
This starter kit features **Next.js**, **React Query**, and **Tailwind CSS**.

First, run the development server:
## Overview

### Tech Stack

- [Next.js v12.x](https://nextjs.org)
- [React v17.x](https://reactjs.org)
- [React Query v3.x](https://react-query.tanstack.com/)
- [Tailwind CSS v3.x](https://tailwindcss.com/)

### Included Tooling

- [Jest](https://jestjs.io/) - Test runner
- [Typescript](https://www.typescriptlang.org/) - Type checking
- [Storybook](https://storybook.js.org/) - Component library
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
- [ESLint](https://eslint.org/) - Code linting
- [Prettier](https://prettier.io/) - Code formatting

### Example Code

- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
- An example Counter component `components/Counter.tsx`
- Both example components are have co-located tests and stories.

## Installation

### CLI (Recommended)

```bash
npm run dev
# or
yarn dev
npx create-starter-dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
Comment thread
danecando marked this conversation as resolved.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
### Manual

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.

## Learn More
```bash
git clone https://github.com/thisdot/starter.dev.git
```
Comment thread
danecando marked this conversation as resolved.

To learn more about Next.js, take a look at the following resources:
- Copy and rename the `starters/next-react-query-tailwind` directory to the name of your new project.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Commands

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
- `npm run dev` - Starts the development server.
- `npm run test` - Runs the unit tests.
- `npm run storybook` - Starts the Storybook UI.
- `npm run lint` - Runs ESLint on the project.
- `npm run prettier` - Formats code for the entire project

## Deploy on Vercel
## Demo Implementation

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
The demo for this starter kit is a partial implementation of some GitHub functionality. It uses the NextAuth library to authenticate users with their GitHub accounts and uses the GitHub GraphQL API with codegen and React Query to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!
Comment thread
danecando marked this conversation as resolved.
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
next-react-query-tailwind readme content by danecando · Pull Request #17 · thisdot/starter.dev · GitHub
Skip to content
next-react-query-tailwind readme content#17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

danecando
merged 2 commits into

from

Mar 14, 2022
 Merged


next-react-query-tailwind readme content
#17
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
96a3a1b

An initial starter kit readme structure / example


danecando Jan 18, 2022
ecda4f6

Updates to kit readme


danecando Mar 14, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


72 changes: 53 additions & 19 deletions
starters/next-react-query-tailwind/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# next-react-query-tailwind starter kit

## Getting Started
This starter kit features **Next.js**, **React Query**, and **Tailwind CSS**.

First, run the development server:
## Overview

### Tech Stack

- [Next.js v12.x](https://nextjs.org)
- [React v17.x](https://reactjs.org)
- [React Query v3.x](https://react-query.tanstack.com/)
- [Tailwind CSS v3.x](https://tailwindcss.com/)

### Included Tooling

- [Jest](https://jestjs.io/) - Test runner
- [Typescript](https://www.typescriptlang.org/) - Type checking
- [Storybook](https://storybook.js.org/) - Component library
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
- [ESLint](https://eslint.org/) - Code linting
- [Prettier](https://prettier.io/) - Code formatting

### Example Code

- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
- An example Counter component `components/Counter.tsx`
- Both example components are have co-located tests and stories.

## Installation

### CLI (Recommended)

```bash
npm run dev
# or
yarn dev
npx create-starter-dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
Comment thread
danecando marked this conversation as resolved.

- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
### Manual

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.

## Learn More
```bash
git clone https://github.com/thisdot/starter.dev.git
```
Comment thread
danecando marked this conversation as resolved.


To learn more about Next.js, take a look at the following resources:
- Copy and rename the `starters/next-react-query-tailwind` directory to the name of your new project.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Commands

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
- `npm run dev` - Starts the development server.
- `npm run test` - Runs the unit tests.
- `npm run storybook` - Starts the Storybook UI.
- `npm run lint` - Runs ESLint on the project.
- `npm run prettier` - Formats code for the entire project

## Deploy on Vercel
## Demo Implementation

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
The demo for this starter kit is a partial implementation of some GitHub functionality. It uses the NextAuth library to authenticate users with their GitHub accounts and uses the GitHub GraphQL API with codegen and React Query to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!
Comment thread
danecando marked this conversation as resolved.


, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
next-react-query-tailwind readme content by danecando · Pull Request #17 · thisdot/starter.dev · GitHub
Skip to content
next-react-query-tailwind readme content#17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

danecando
merged 2 commits into

from

Mar 14, 2022
 Merged


next-react-query-tailwind readme content
#17
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
96a3a1b

An initial starter kit readme structure / example


danecando Jan 18, 2022
ecda4f6

Updates to kit readme


danecando Mar 14, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


72 changes: 53 additions & 19 deletions
starters/next-react-query-tailwind/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# next-react-query-tailwind starter kit

## Getting Started
This starter kit features **Next.js**, **React Query**, and **Tailwind CSS**.

First, run the development server:
## Overview

### Tech Stack

- [Next.js v12.x](https://nextjs.org)
- [React v17.x](https://reactjs.org)
- [React Query v3.x](https://react-query.tanstack.com/)
- [Tailwind CSS v3.x](https://tailwindcss.com/)

### Included Tooling

- [Jest](https://jestjs.io/) - Test runner
- [Typescript](https://www.typescriptlang.org/) - Type checking
- [Storybook](https://storybook.js.org/) - Component library
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
- [ESLint](https://eslint.org/) - Code linting
- [Prettier](https://prettier.io/) - Code formatting

### Example Code

- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
- An example Counter component `components/Counter.tsx`
- Both example components are have co-located tests and stories.

## Installation

### CLI (Recommended)

```bash
npm run dev
# or
yarn dev
npx create-starter-dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
Comment thread
danecando marked this conversation as resolved.

- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
### Manual

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.

## Learn More
```bash
git clone https://github.com/thisdot/starter.dev.git
```
Comment thread
danecando marked this conversation as resolved.


To learn more about Next.js, take a look at the following resources:
- Copy and rename the `starters/next-react-query-tailwind` directory to the name of your new project.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Commands

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
- `npm run dev` - Starts the development server.
- `npm run test` - Runs the unit tests.
- `npm run storybook` - Starts the Storybook UI.
- `npm run lint` - Runs ESLint on the project.
- `npm run prettier` - Formats code for the entire project

## Deploy on Vercel
## Demo Implementation

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
The demo for this starter kit is a partial implementation of some GitHub functionality. It uses the NextAuth library to authenticate users with their GitHub accounts and uses the GitHub GraphQL API with codegen and React Query to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!
Comment thread
danecando marked this conversation as resolved.


, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
next-react-query-tailwind readme content by danecando · Pull Request #17 · thisdot/starter.dev · GitHub
Skip to content
next-react-query-tailwind readme content#17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

danecando
merged 2 commits into

from

Mar 14, 2022
 Merged


next-react-query-tailwind readme content
#17
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
96a3a1b

An initial starter kit readme structure / example


danecando Jan 18, 2022
ecda4f6

Updates to kit readme


danecando Mar 14, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


72 changes: 53 additions & 19 deletions
starters/next-react-query-tailwind/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# next-react-query-tailwind starter kit

## Getting Started
This starter kit features **Next.js**, **React Query**, and **Tailwind CSS**.

First, run the development server:
## Overview

### Tech Stack

- [Next.js v12.x](https://nextjs.org)
- [React v17.x](https://reactjs.org)
- [React Query v3.x](https://react-query.tanstack.com/)
- [Tailwind CSS v3.x](https://tailwindcss.com/)

### Included Tooling

- [Jest](https://jestjs.io/) - Test runner
- [Typescript](https://www.typescriptlang.org/) - Type checking
- [Storybook](https://storybook.js.org/) - Component library
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
- [ESLint](https://eslint.org/) - Code linting
- [Prettier](https://prettier.io/) - Code formatting

### Example Code

- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
- An example Counter component `components/Counter.tsx`
- Both example components are have co-located tests and stories.

## Installation

### CLI (Recommended)

```bash
npm run dev
# or
yarn dev
npx create-starter-dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
Comment thread
danecando marked this conversation as resolved.

- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
### Manual

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.

## Learn More
```bash
git clone https://github.com/thisdot/starter.dev.git
```
Comment thread
danecando marked this conversation as resolved.


To learn more about Next.js, take a look at the following resources:
- Copy and rename the `starters/next-react-query-tailwind` directory to the name of your new project.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Commands

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
- `npm run dev` - Starts the development server.
- `npm run test` - Runs the unit tests.
- `npm run storybook` - Starts the Storybook UI.
- `npm run lint` - Runs ESLint on the project.
- `npm run prettier` - Formats code for the entire project

## Deploy on Vercel
## Demo Implementation

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
The demo for this starter kit is a partial implementation of some GitHub functionality. It uses the NextAuth library to authenticate users with their GitHub accounts and uses the GitHub GraphQL API with codegen and React Query to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!
Comment thread
danecando marked this conversation as resolved.


, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
next-react-query-tailwind readme content by danecando · Pull Request #17 · thisdot/starter.dev · GitHub
Skip to content
next-react-query-tailwind readme content#17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

danecando
merged 2 commits into

from

Mar 14, 2022
 Merged


next-react-query-tailwind readme content
#17
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
96a3a1b

An initial starter kit readme structure / example


danecando Jan 18, 2022
ecda4f6

Updates to kit readme


danecando Mar 14, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


72 changes: 53 additions & 19 deletions
starters/next-react-query-tailwind/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# next-react-query-tailwind starter kit

## Getting Started
This starter kit features **Next.js**, **React Query**, and **Tailwind CSS**.

First, run the development server:
## Overview

### Tech Stack

- [Next.js v12.x](https://nextjs.org)
- [React v17.x](https://reactjs.org)
- [React Query v3.x](https://react-query.tanstack.com/)
- [Tailwind CSS v3.x](https://tailwindcss.com/)

### Included Tooling

- [Jest](https://jestjs.io/) - Test runner
- [Typescript](https://www.typescriptlang.org/) - Type checking
- [Storybook](https://storybook.js.org/) - Component library
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
- [ESLint](https://eslint.org/) - Code linting
- [Prettier](https://prettier.io/) - Code formatting

### Example Code

- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
- An example Counter component `components/Counter.tsx`
- Both example components are have co-located tests and stories.

## Installation

### CLI (Recommended)

```bash
npm run dev
# or
yarn dev
npx create-starter-dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
Comment thread
danecando marked this conversation as resolved.

- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
### Manual

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.

## Learn More
```bash
git clone https://github.com/thisdot/starter.dev.git
```
Comment thread
danecando marked this conversation as resolved.


To learn more about Next.js, take a look at the following resources:
- Copy and rename the `starters/next-react-query-tailwind` directory to the name of your new project.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Commands

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
- `npm run dev` - Starts the development server.
- `npm run test` - Runs the unit tests.
- `npm run storybook` - Starts the Storybook UI.
- `npm run lint` - Runs ESLint on the project.
- `npm run prettier` - Formats code for the entire project

## Deploy on Vercel
## Demo Implementation

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
The demo for this starter kit is a partial implementation of some GitHub functionality. It uses the NextAuth library to authenticate users with their GitHub accounts and uses the GitHub GraphQL API with codegen and React Query to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!
Comment thread
danecando marked this conversation as resolved.


, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
next-react-query-tailwind readme content by danecando · Pull Request #17 · thisdot/starter.dev · GitHub
Skip to content
next-react-query-tailwind readme content#17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

danecando
merged 2 commits into

from

Mar 14, 2022
 Merged


next-react-query-tailwind readme content
#17
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
96a3a1b

An initial starter kit readme structure / example


danecando Jan 18, 2022
ecda4f6

Updates to kit readme


danecando Mar 14, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


72 changes: 53 additions & 19 deletions
starters/next-react-query-tailwind/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# next-react-query-tailwind starter kit

## Getting Started
This starter kit features **Next.js**, **React Query**, and **Tailwind CSS**.

First, run the development server:
## Overview

### Tech Stack

- [Next.js v12.x](https://nextjs.org)
- [React v17.x](https://reactjs.org)
- [React Query v3.x](https://react-query.tanstack.com/)
- [Tailwind CSS v3.x](https://tailwindcss.com/)

### Included Tooling

- [Jest](https://jestjs.io/) - Test runner
- [Typescript](https://www.typescriptlang.org/) - Type checking
- [Storybook](https://storybook.js.org/) - Component library
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
- [ESLint](https://eslint.org/) - Code linting
- [Prettier](https://prettier.io/) - Code formatting

### Example Code

- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
- An example Counter component `components/Counter.tsx`
- Both example components are have co-located tests and stories.

## Installation

### CLI (Recommended)

```bash
npm run dev
# or
yarn dev
npx create-starter-dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
Comment thread
danecando marked this conversation as resolved.

- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
### Manual

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.

## Learn More
```bash
git clone https://github.com/thisdot/starter.dev.git
```
Comment thread
danecando marked this conversation as resolved.


To learn more about Next.js, take a look at the following resources:
- Copy and rename the `starters/next-react-query-tailwind` directory to the name of your new project.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Commands

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
- `npm run dev` - Starts the development server.
- `npm run test` - Runs the unit tests.
- `npm run storybook` - Starts the Storybook UI.
- `npm run lint` - Runs ESLint on the project.
- `npm run prettier` - Formats code for the entire project

## Deploy on Vercel
## Demo Implementation

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
The demo for this starter kit is a partial implementation of some GitHub functionality. It uses the NextAuth library to authenticate users with their GitHub accounts and uses the GitHub GraphQL API with codegen and React Query to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!
Comment thread
danecando marked this conversation as resolved.


, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
next-react-query-tailwind readme content by danecando · Pull Request #17 · thisdot/starter.dev · GitHub
Skip to content
next-react-query-tailwind readme content#17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

danecando
merged 2 commits into

from

Mar 14, 2022
 Merged


next-react-query-tailwind readme content
#17
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
96a3a1b

An initial starter kit readme structure / example


danecando Jan 18, 2022
ecda4f6

Updates to kit readme


danecando Mar 14, 2022

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


72 changes: 53 additions & 19 deletions
starters/next-react-query-tailwind/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# next-react-query-tailwind starter kit

## Getting Started
This starter kit features **Next.js**, **React Query**, and **Tailwind CSS**.

First, run the development server:
## Overview

### Tech Stack

- [Next.js v12.x](https://nextjs.org)
- [React v17.x](https://reactjs.org)
- [React Query v3.x](https://react-query.tanstack.com/)
- [Tailwind CSS v3.x](https://tailwindcss.com/)

### Included Tooling

- [Jest](https://jestjs.io/) - Test runner
- [Typescript](https://www.typescriptlang.org/) - Type checking
- [Storybook](https://storybook.js.org/) - Component library
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
- [ESLint](https://eslint.org/) - Code linting
- [Prettier](https://prettier.io/) - Code formatting

### Example Code

- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
- An example Counter component `components/Counter.tsx`
- Both example components are have co-located tests and stories.

## Installation

### CLI (Recommended)

```bash
npm run dev
# or
yarn dev
npx create-starter-dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
Comment thread
danecando marked this conversation as resolved.

- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
### Manual

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.

## Learn More
```bash
git clone https://github.com/thisdot/starter.dev.git
```
Comment thread
danecando marked this conversation as resolved.


To learn more about Next.js, take a look at the following resources:
- Copy and rename the `starters/next-react-query-tailwind` directory to the name of your new project.
- `cd` into your project directory and run `npm install`.
- Run `npm run dev` to start the development server.
- Open your browser to `http://localhost:3000` to see the included example code running.

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
## Commands

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
- `npm run dev` - Starts the development server.
- `npm run test` - Runs the unit tests.
- `npm run storybook` - Starts the Storybook UI.
- `npm run lint` - Runs ESLint on the project.
- `npm run prettier` - Formats code for the entire project

## Deploy on Vercel
## Demo Implementation

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
The demo for this starter kit is a partial implementation of some GitHub functionality. It uses the NextAuth library to authenticate users with their GitHub accounts and uses the GitHub GraphQL API with codegen and React Query to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!
Comment thread
danecando marked this conversation as resolved.