Opinionated UI starter with
- ๐ฆ TypeScript
- โ๏ธ React
- โฒ NextJS (with Static Export)
- ๐ Storybook
- โ๏ธ React Router
- โก๏ธ Chakra UI
- โ๏ธ React Query
- ๐ Formiz
- ๐ฅ React Error Boundary
- โญ๏ธ React Icons
- ๐ React i18next
- ๐ฝ React Select
- ๐ข React Currency Input Field
- โ Axios
- ๐ Day.js
- ๐ MirageJS
๐ Technology Choices
โน๏ธ API calls are mapped on a JHipster backend application.
yarn install
yarn build
Go to the Firebase Console and create a
project.
Get all the credentials and put them in the .env
file. An example is available
in the .env.example
file.
yarn dev
Create or edit your .vscode/settings.json
file with the following code
{
"i18n-ally.localesPaths": "src/locales"
}
yarn storybook
Development with MirageJS (mock)
This is the default behavior.
Do not set the NEXT_PUBLIC_API_BASE_URL
variable in the .env
file at the root of the project.
Development with a JHipster backend
Create a .env
file at the root of the project with the following content:
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api
Setup the NEXT_PUBLIC_DEV_ENV_NAME
env variable with the name of the environment.
NEXT_PUBLIC_DEV_ENV_NAME=staging
NEXT_PUBLIC_DEV_ENV_COLOR_SCHEME=teal
API documentation is accessible by admins in the app with Swagger-UI.
yarn docs:build
This will build the json documentation from the main file /src/mocks/openapi/openapi.yaml
.
yarn storybook:build # Optional: Will expose the Storybook at `/storybook`
yarn build
yarn start
yarn storybook:build # Optional: Will expose the Storybook at `/storybook/index.html`
yarn static:build
Then expose the /out
folder.
๐ก You will need to setup your server to rewrite all /app/*
urls to serve the app.html
file.
React is a JavaScript library created in 2013 to build reactive user interfaces. At the time of writing, React is probably the front end library the most used to create new projects and has a huge community which is beneficial for the maintainability of the project in terms of developers and online resources.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
Next.js is bundled with its own router, but at the time of writing those lines, it does not allow nested routes using a shared layout.
JavaScript is a not typed language. TypeScript is here to help add static type definition. TypeScript helps a lot when it comes to types, interfaces and define contract between functions which helps a lot for a reliable documentation. No worry, the TypeScript adoption is incremental and writing in TypeScript is not mandatory to use Start UI, but it is a good practice to do so to avoid bugs in the future.
React Query is a powerful tool
to do efficient data synchronization for React. No need of Redux
or another global state manager anymore. Usable with fetch
,
axios
, or graphql-request
,
React Query will do the work and is agnostic of the method you will use.
Storybook is an Open Source tool to help you develop framework agnostic components in isolation and document them.
Chakra UI is a simple, modular, composable and accessible component library that is highly customizable.
To create React forms, there is a lot of libraries out there. Formiz will help you create React forms with ease! Composable, headless & with built-in multi steps.