- Test deployment only the production (master) branch
- Storybook deployment only the production (master) branch
- Node ^18.19.1, 20.x
- npm ^10.2.4
-
Run
npm i
-
Create .env file and fill it according to .env.example
-
Run either one of the commands:
Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.
The page will reload if you make code changes.
You will also see any lint errors in the console.
Builds the app for production to the dist
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Runs the storybook documentation app in the development mode.
Open http://localhost:6006 to view it in the browser.
Builds the storybook documentation app for production to the storybook-static
folder.
This section outlines the folder structure used within the src
directory of this project.
The root directory of the application, containing all the source files.
Contains files for rendering pages. Pages are composed using components
, UI-kit
, providers
, hooks
, etc. Each file typically represents a route in the application.
A storage for reusable components that are specific to this application but are not part of the basic UI kit. For example, a custom modal or container that is used across different features would go here.
The UI kit for the project containing basic reusable UI components, such as buttons, inputs, and typography. These components are the building blocks used by pages
and components
.
Custom React hooks that encapsulate shared logic and stateful functionality. This may include hooks for data fetching, form handling, or any complex component logic.
Configuration files for the application. This may include settings for various environments (development, production), API endpoints, or any other global settings.
TypeScript type definitions and interfaces used across the application. This includes custom types for the application's data structures, props for components, and any other type-related declarations.
Context providers for React's Context API. This includes any global state management logic, such as authentication status, theme settings, or language preferences.
Utility functions that are used across the application. These could be helper functions for formatting dates, numbers, or strings, show alerts, or any other utility that does not fit into hooks or components.
- Keep each file focused on a single responsibility.
- Prefer functional components and hooks over class components.
- Name files and components consistently and clearly.
- Document complex logic with comments.
- Components in
src/ui/
should be agnostic of the business logic and context, while components insrc/components/
can be more specialized. - The
src/config/
folder should not contain sensitive credentials or secrets, which should instead be set through environment variables or secure secret management systems. - Regularly review the
src/utils/
folder to prevent and refactor any utilities that have become unnecessary or could be combined to reduce code duplication. - Always consider accessibility, performance, and code readability when adding or modifying code within these directories.