Skip to content
This repository has been archived by the owner on Jul 12, 2023. It is now read-only.

Commit

Permalink
📚 update readme with emojis
Browse files Browse the repository at this point in the history
update readme with emojis

📚 Documentation
  • Loading branch information
TimMikeladze committed Dec 29, 2022
1 parent 56e18ad commit daaaa4b
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 34 deletions.
2 changes: 1 addition & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2023 Tim Mikeladze
Copyright (c) 2022 Tim Mikeladze

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
64 changes: 31 additions & 33 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
# next-apollo-joy-starter
# 🇳 🚀 😊 Next.js + Apollo GraphQL + Joy UI

Spend more time __building__ instead of _configuring_ your next project.

## Introduction
## 🚪 Intro

This is a slightly opinionated starter kit for developing [Next.js](https://nextjs.org/) apps. It uses the [Joy UI](https://mui.com/joy-ui/getting-started/overview/) library from [MUI](https://mui.com/) along with the [Apollo](https://www.apollographql.com/) stack. All [GraphQL](https://graphql.org/) are operations are fully typed with [GraphQL Codegen](https://the-guild.dev/graphql/codegen) and [Zeus](https://github.com/graphql-editor/graphql-zeus). The starter kit also includes a fully functional [authentication system](https://next-auth.js.org/), [localization](https://www.i18next.com/), dark / light mode, and plenty of other goodies for a great developer experience right out of the box.

> 👋 Hello there! Follow me [@linesofcodedev](https://twitter.com/linesofcodedev) or visit [linesofcode.dev](https://linesofcode.dev) for more cool projects like this.
> 👋 Hello there! Follow me [@linesofcodedev](https://twitter.com/linesofcodedev) or visit [linesofcode.dev](https://linesofcode.dev) for more cool projects like this one.
## Getting started
## 🏃‍ Get started

To get started clone the repo `npx degit` is a great way to do this as it will remove the `.git` folder plus extra files like the `LICENSE.md` or `FUNDING.yml`. Once cloned install all dependency with `yarn` and you are ready to go. Happy coding!

Expand All @@ -20,9 +20,11 @@ yarn && yarn dev

> ❗ Important note: This project uses [yarn](https://yarnpkg.com/) for managing dependencies. If you want to use another package manager, remove the `yarn.lock` and control-f for usages of `yarn` in the project and replace them with your package manager of choice.
## What's included?
## What's included?

#### Starter code
Remaining simple at its core, this project is packed with useful tools that enhance your experience while working with Next.js. Here is a list of the main features:

#### 💪 Starter code

- 🔒 [Next Auth](https://next-auth.js.org/) - A complete open source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless.
- 🚀 [Apollo client and server](https://www.apollographql.com/) - Apollo is a great way to build your GraphQL stack. It comes with a great developer experience and a lot of features out of the box for querying, caching, and more.
Expand All @@ -31,41 +33,42 @@ yarn && yarn dev
- 🌙 Dark / Light mode toggle - Toggle between light and dark mode with a single click.
- 🍞 [React Hot Toast]() - The best toast in town. Smoking hot React notifications.
- 🌐 [i18next](https://www.i18next.com/) - The easiest way to translate your NextJs apps.

- 🪵 [Axiom logging](https://axiom.co/) - Send structured logs directly from your code and query, stream, & analyze. [Learn more](https://axiom.co/docs/integrations/nextjs).

#### Develop and test
#### 🛠 Develop and test

- 📖 [Storybook](https://storybook.js.org/) - Build UI components and pages in isolation. It streamlines UI development, testing, and documentation.
- 🧪 [Jest](https://jestjs.io/) - A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX.
- 🐙 [Run tests via Github Actions](https://docs.github.com/en/actions) - CI/CD workflows for your package. Run tests on every commit plus integrate with Github Releases to automate publishing package to NPM and Storybook to Github Pages.
- 📦 [Bundle analyzer](Webpack Bundle Analyzer) - Visualize the size of Next.js output files with an interactive zoomable treemap.

##### Lint and format
##### 🧑‍🎨 Lint and format

- ☑️ [ESLint](https://eslint.org/) - A linter for JavaScript. Includes a simple configuration for React projects based on the recommended ESLint and AirBnB configs.
- 🎨 [Prettier](https://prettier.io/) - An opinionated code formatter.
- 🚫 [lint-staged](https://github.com/okonet/lint-staged) — Run linters on git staged files
- 🐶 [Husky](https://github.com/typicode/husky) — Running scripts before committing.

##### Commit and publish
##### 📤 Commit and publish

- 📄 [Commit-it](https://github.com/TimMikeladze/commit-it/) — A CLI tool to help you write stylish commit messages.
- 📝 [Commit-it](https://github.com/TimMikeladze/commit-it/) — A CLI tool to help you write stylish commit messages.
- 🔼 [Release-it](https://github.com/release-it/release-it/) - release-it is a command line tool to automatically generate a new GitHub Release and populates it with the changes (commits) made since the last release.
- 📚 [Deploy storybook via Github Actions](https://docs.github.com/en/actions) - CI/CD workflows for your package. Run tests on every commit plus integrate with Github Releases to automate publishing package to NPM and Storybook to Github Pages.
- 🏗️ [Renovate](https://github.com/renovatebot/renovate) - Universal dependency update tool that fits into your workflows. Configured to periodically check your dependencies for updates and send automated pull requests.

## Usage
## 🎓 Usage

### Developing
### 👷‍ Developing

Start the Next.js development server and watch GraphQL files for code generation.

```console
yarn dev
```

Run tests with `jest` when changes are detected.
### 🔬 Testing

Run tests when changes are detected.

```console
yarn test:watch
Expand All @@ -77,47 +80,35 @@ Or simply run all the tests
yarn test
```

### Building
### 🚧 Building

Build the Next.js app for production.

```console
yarn build
```

### Testing

To run all tests once without watching for changes.

```console
yarn test
```

To watch for changes and run tests.

```
yarn test:watch
```

### Committing
### 📒 Committing

When you are ready to commit simply run the following command to get a well formatted commit message. All staged files will automatically be linted and fixed as well.

```console
yarn commit
```

### Releasing & tagging
### Releasing & tagging

Create a semantic version tag and publish to Github Releases. When a new release is detected a Github Action will automatically publish your storybook to Github pages.

As part of this process a git tag will also be created on the current branch.

Learn more about how to use the `release-it` command [here](https://github.com/release-it/release-it).

```console
yarn release
```

### Deploying & building
### 📦 Deploying & building

This project can be deployed anywhere where Next.js is supported. I suggest using [Vercel](https://vercel.com) with the GitHub integration to quickly deploy an app to production.

Expand All @@ -127,10 +118,17 @@ If you want to build your app for production on your local machine, within a con
yarn build
```

### Analyzing bundle size
### 🔎 Analyzing bundle size

To analyze the page bundles of your Next.js app, run the following command:

```console
yarn build:analyze
```

## 🎊 Built a project with this starter kit?

That's awesome! Please feel free to open a PR and add your project to the list below.



1 comment on commit daaaa4b

@vercel
Copy link

@vercel vercel bot commented on daaaa4b Dec 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.