Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dantelentsoe/habithero

HabitHero helps you build and maintain positive habits, track your progress, and achieve your personal goals.
https://github.com/dantelentsoe/habithero

atomic-design chartsjs nextjs14 tailwindcss typescript zustand

Last synced: 29 days ago
JSON representation

HabitHero helps you build and maintain positive habits, track your progress, and achieve your personal goals.

Awesome Lists containing this project

README

        


HabitHero landing page image


HabitHero

HabitHero helps you build and maintain positive habits, track your progress, and achieve your personal goals.



PRs welcome!

License


Follow @jpedroschmitz


Created by João Pedro with the help of many wonderful contributors.


## Features

- ⚡️ Next.js 14 (App Router)
- ⚛️ React 18
- ⛑ TypeScript
- 📏 ESLint — To find and fix problems in your code
- 💖 Prettier — Code Formatter for consistent style
- 🐶 Husky — For running scripts before committing
- 🚓 Commitlint — To make sure your commit messages follow the convention
- 🖌 Renovate — To keep your dependencies up to date
- 🚫 lint-staged — Run ESLint and Prettier against staged Git files
- ⚙️ EditorConfig - Consistent coding styles across editors and IDEs
- 🗂 Path Mapping — Import components or images using the `@` prefix

## Quick Start

The best way to start with this template is using [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).

```
# yarn
yarn create next-app -e https://github.com/DanteLentsoe/HabitHero
# npm
npx create-next-app -e https://github.com/DanteLentsoe/HabitHero
# pnpm
pnpm create next-app -e https://github.com/DanteLentsoe/HabitHero
```

### Development

To start the project locally, run:

```bash
pnpm dev
```

Open `http://localhost:3000` with your browser to see the result.

## Showcase

List of websites that started off with Next.js TypeScript Starter:

- [hygraph.com](https://hygraph.com)
- [rocketseat.com.br](https://www.rocketseat.com.br)
- [unfork.vercel.app](https://unfork.vercel.app)
- [cryptools.dev](https://cryptools.dev)
- [Dante Lentsoe](https://dantelentsoe.com)

## Documentation

### Requirements

- Node.js >= 20
- pnpm 9

### Directory Structure

- [`.github`](.github) — GitHub configuration including the CI workflow.

- [`.husky`](.husky) — Husky configuration and hooks.

- [`public`](./public) — Static assets such as robots.txt, images, and favicon.

- [`src`](./src) — Application source code, including pages, components, styles.

### Scripts

- `pnpm dev` — Starts the application in development mode at `http://localhost:3000`.
- `pnpm build` — Creates an optimized production build of your application.
- `pnpm start` — Starts the application in production mode.
- `pnpm type-check` — Validate code using TypeScript compiler.
- `pnpm lint` — Runs ESLint for all files in the `src` directory.
- `pnpm format` — Runs Prettier for all files in the `src` directory.

### Path Mapping

TypeScript are pre-configured with custom path mappings. To import components or files, use the `@` prefix.

```tsx
import { Button } from '@/components/Button';
// To import images or other files from the public folder
import avatar from '@/public/avatar.png';
```

### Switch to Yarn/npm

This starter uses pnpm by default, but this choice is yours. If you'd like to switch to Yarn/npm, delete the `pnpm-lock.yaml` file, install the dependencies with Yarn/npm, change the CI workflow, and Husky Git hooks to use Yarn/npm commands.

> **Note:** If you use Yarn, make sure to follow these steps from the [Husky documentation](https://typicode.github.io/husky/troubleshoot.html#yarn-on-windows) so that Git hooks do not fail with Yarn on Windows.

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for more information.