Front-End Base

Install & Start

⚠️ Using Yarn Package Manager is recommended over npm.

Start your app in development environment

yarn dev

Start your app in production environment

yarn start

Next.js(v13.) - Minimalistic framework for server-rendered React applications.
Typescript - Superset of JavaScript which primarily provides optional static typing, classes and interfaces.
Zustand - A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy API based on hooks, isn't boilerplatey or opinionated.
React Query - React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
Chakra UI - Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

components: Common component to re-use and split the UI into independent, reusable pieces, and think about each piece in isolation
ui-kit: A UI kit (User Interface kit) is a pre-designed and pre-built collection of interface components, elements, and styles that help designers and developers to create consistent, user-friendly interfaces quickly and easily. (Folder name like AIButton,...)
constants: Contains contants variable example: const NAME = 'Jackson'; (Should use upper snake case)
hooks: Custom react hooks
layouts: Component that you create to provide common elements across all of your pages.
pages: Pages are associated with a route based on their file name.
store: a store is a central place where data is stored and managed for an application. It serves as a single source of truth for the application's state, and all component (We use Zustand)
types: Common typings for typescript
services: Service provides multiple functions to retrieve data from or post data to an external service using the HTTP protocol.
utils: Utility function to re-use logic