https://github.com/yehezkielgunawan/yehez-vitechakra-starter

✨Yehezkiel Gunawan's personalized Vite + React + Typescript + Chakra UI starter template ⚡
https://github.com/yehezkielgunawan/yehez-vitechakra-starter

chakra-ui react react-typescript react-typescript-boilerplate reactjs starter template typescript vite vite-react vite-starter vite-starter-template vitejs

Last synced: 3 months ago
JSON representation

✨Yehezkiel Gunawan's personalized Vite + React + Typescript + Chakra UI starter template ⚡

• Host: GitHub
• URL: https://github.com/yehezkielgunawan/yehez-vitechakra-starter
• Owner: yehezkielgunawan
• License: mit
• Created: 2021-10-23T10:47:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-30T02:41:32.000Z (over 2 years ago)
• Last Synced: 2024-05-01T16:34:50.710Z (about 1 year ago)
• Topics: chakra-ui, react, react-typescript, react-typescript-boilerplate, reactjs, starter, template, typescript, vite, vite-react, vite-starter, vite-starter-template, vitejs
• Language: TypeScript
• Homepage: https://yehez-vitechakra-starter.yehezgun.com
• Size: 1.57 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Yehez-ViteChakra-Starter

![Yehezkiel Gunawan's Vite + React + Typescript + Chakra UI Personalized template](https://socialify.git.ci/yehezkielgunawan/yehez-vitechakra-starter/image?description=1&descriptionEditable=Yehezkiel%20Gunawan%27s%20personalized%20Vite%20%2B%20React%20%2B%20Typescript%20%2B%20Chakra%20UI%20Starter%20template&font=Inter&logo=https%3A%2F%2Fseeklogo.com%2Fimages%2FV%2Fvite-logo-BFD4283991-seeklogo.com.png&owner=1&pattern=Floating%20Cogs&theme=Dark)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/yehezkielgunawan/yehez-vitechakra-starter) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/yehezkielgunawan/yehez-vitechakra-starter)

[![forthebadge](https://res.cloudinary.com/yehez/image/upload/v1635325228/made-by-typescript_mz1tue.svg)](https://forthebadge.com)

This is a personalized React JS (using Vite as a build tools, and Chakra UI as a UI Library) starter template. Actually, I made this for myself so I don't need to waste my time to overthinking about the config and setup and focusing on the development.

But if you also find this template is useful, you also can use it. And of course I'm open to any feedbacks. You can fork or clone this repo and make a PR here if you have a some idea.

## ⚡ What's include here?

- Toolings for linting, formatting, and conventions configured.

  `eslint`, `prettier`, `husky` & `lint-staged`

- ✨Basic responsive layout configuration (using Chakra UI media query)

## How to use it?

- You can open [yehez-vitechakra-starter.yehezgun.com](https://yehez-vitechakra-starter.yehezgun.com) and click `Use this template` button (**_Don't forget to login to your Github account_**).

- Or you can clone this repo using degit in your terminal. Don't forget to install the needed dependencies using `npm install` or `yarn`.

```

npx degit yehezkielgunawan/yehez-vitechakra-starter 

```

- Then run the local server using `yarn dev` or `npm run dev`

## References

- [Vite Docs](https://vitejs.dev/) - Learn about Vite and its features

- [Chakra UI](https://chakra-ui.com/) - UI component

- [Typescript](https://www.typescriptlang.org/) - The programming language

- [The24thDS Starter Template](https://github.com/The24thDS/vite-reactts17-chakra-jest-husky) - as my main reference for the base config settings.

- [Sozonome Vite Chakra Starter](https://vite-react-chakra-starter.sznm.dev/) - as my main layout idea reference.

## Future Improvement

- [x] Update the layout

- [x] Add ESLint basic configuration

- [x] Add prettier basic configuration

- [x] Husky base config