https://github.com/muneebhashone/next-chakra-starter

Next-Chakra-Starter is a starter template (boilerplate) for building modern web applications with Next.js (TypeScript), Chakra UI, axios, react-query, react-icons, react-hook-form, and zustand
https://github.com/muneebhashone/next-chakra-starter

boilerplate chakra-ui nextjs nextjs-template starter-template zustand

Last synced: 3 months ago
JSON representation

Next-Chakra-Starter is a starter template (boilerplate) for building modern web applications with Next.js (TypeScript), Chakra UI, axios, react-query, react-icons, react-hook-form, and zustand

• Host: GitHub
• URL: https://github.com/muneebhashone/next-chakra-starter
• Owner: muneebhashone
• Created: 2023-04-04T07:36:14.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-04T11:32:18.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T20:26:59.726Z (4 months ago)
• Topics: boilerplate, chakra-ui, nextjs, nextjs-template, starter-template, zustand
• Language: TypeScript
• Homepage:
• Size: 2.38 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# next-chakra-starter

Next-Chakra-Starter is a starter template (boilerplate) for building modern web applications with Next.js (TypeScript), Chakra UI, axios, react-query, react-icons, react-hook-form, and zustand. It provides a solid foundation for quickly prototyping and developing production-ready applications with a consistent UI design, robust state management, and efficient data fetching.

# Stack

✔ Next.js.

✔ Typescript.

✔ Chakra UI.

✔ Framer Motion.

✔ Zustand.

✔ react-hook-form.

✔ react-query.

✔ react-icons.

# Utils

✔ src/utils/axios.fetcher.ts - includes helpful utils for Data fetching:

- axiosGraphQL - for fetching the data from a GraphQL API.

- axios - for fetching the data from a RESTful API.

✔ src/utils/cloudinary.helpers.ts - includes helpful utils for Cloudinary:

- makeUploadRequest - for uploading file to cloudinary.

- makeDeleteRequest - for deleting file from cloudinary.

✔ src/utils/next.utils.ts - includes helpful utils:

- checkIsServer - for checking whether you are on a server or client.

- convertToBase64 - for converting a file to base64.

- reloadSession - for firing the visibilitychange event without changing the tab.

next-chakra-starter is intended for developers who want to start building web applications with Next.js, Chakra UI, axios, react-icons, react-hook-form, and zustand. To use the starter template, follow these steps:

1. Clone the repository: git clone https://github.com/muneebhashone/next-chakra-starter.git

2. Navigate to the project directory: cd next-chakra-starter

3. Install dependencies: npm install

4. Run the development server: npm run dev

Once the development server is running, you can start modifying the index (src/pages/index.tsx), and styles to fit your project's requirements. You can also customize the theme and styling system by editing the src/theme/index.ts file.

# Contributions

next-chakra-starter is an open-source project that welcomes contributions from developers of all levels and backgrounds. If you find a bug, want to suggest a feature, or want to improve the documentation, please create an issue or pull request in the project's repository.