Skip to content

Commit da3e2bb

Browse files
authored
next-react-query-tailwind readme content (#17)
* An initial starter kit readme structure / example * Updates to kit readme
1 parent b087740 commit da3e2bb

File tree

1 file changed

+53
-19
lines changed

1 file changed

+53
-19
lines changed
Lines changed: 53 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
1-
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).
1+
# next-react-query-tailwind starter kit
22

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

5-
First, run the development server:
5+
## Overview
6+
7+
### Tech Stack
8+
9+
- [Next.js v12.x](https://nextjs.org)
10+
- [React v17.x](https://reactjs.org)
11+
- [React Query v3.x](https://react-query.tanstack.com/)
12+
- [Tailwind CSS v3.x](https://tailwindcss.com/)
13+
14+
### Included Tooling
15+
16+
- [Jest](https://jestjs.io/) - Test runner
17+
- [Typescript](https://www.typescriptlang.org/) - Type checking
18+
- [Storybook](https://storybook.js.org/) - Component library
19+
- [Mock Service Worker](https://mswjs.io/) - Mock REST / GraphQL API
20+
- [ESLint](https://eslint.org/) - Code linting
21+
- [Prettier](https://prettier.io/) - Code formatting
22+
23+
### Example Code
24+
25+
- Next.js 'hello world' API endpoint `pages/api/hello.ts` with corresponding mock located in `msw/handlers/helloMock.ts`.
26+
- Greeting component `components/Greeting.tsx` that uses React Query to fetch data from the example hello endpoint.
27+
- An example Counter component `components/Counter.tsx`
28+
- Both example components are have co-located tests and stories.
29+
30+
## Installation
31+
32+
### CLI (Recommended)
633

734
```bash
8-
npm run dev
9-
# or
10-
yarn dev
35+
npx create-starter-dev
1136
```
1237

13-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14-
15-
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
38+
- Follow the prompts to select the `next-react-query-tailwind` starter kit and name your new project.
39+
- `cd` into your project directory and run `npm install`.
40+
- Run `npm run dev` to start the development server.
41+
- Open your browser to `http://localhost:3000` to see the included example code running.
1642

17-
[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`.
43+
### Manual
1844

19-
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.
45+
This requires a download of the entire starter.dev repository and extraction of the `next-react-query-tailwind` kit from the starters directory.
2046

21-
## Learn More
47+
```bash
48+
git clone https://github.com/thisdot/starter.dev.git
49+
```
2250

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

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

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

30-
## Deploy on Vercel
64+
## Demo Implementation
3165

32-
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.
66+
[Repository](https://github.com/thisdot/starter.dev-showcases/tree/main/next-react-query-tailwind)
3367

34-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
68+
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!

0 commit comments

Comments
 (0)