Awesome

Features

1. Using Nextgeneration Frontend tool (Vite / yarn berry)
2. Freedom of choice of language
   • ECMAScript (javascript)
   • ECMAScript with JsDoc typecheck
   • Typescript
3. Collaboration between library and vscode extension
4. Well-defined folder structure
5. Document Automation
6. [Light, Dark] theme changer
7. Multilingual support
8. IDE environment integration
9. No need to setting for develop environment

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Installation

1. Install Dev Containers extension
2. Download template

npx degit comnori/vite-template-awesome-soho my-app

3. git initialization

git init

Main Library

Language

<img height="32" width="32" src="https://cdn.simpleicons.org/javascript" alt="javascript" /> <img height="32" width="32" src="https://cdn.simpleicons.org/typescript" alt="typesciprt"/>

Created by

Library

<img height="32" width="32" src="https://cdn.simpleicons.org/react" alt="react"/> <img height="32" width="32" src="https://cdn.simpleicons.org/reactrouter" alt="react-router"/> <img height="32" width="32" src="https://cdn.simpleicons.org/antdesign" alt="ant design"/> <img height="32" width="32" src="https://cdn.simpleicons.org/redux" alt="redux"/> <img height="32" width="32" src="https://cdn.simpleicons.org/axios" alt="axios"/> <img height="32" width="32" src="https://cdn.simpleicons.org/sass" alt="sass"/> <img height="32" width="32" src="https://cdn.simpleicons.org/i18next" alt="i18next" />

Dev tools

<img height="32" width="32" src="https://cdn.simpleicons.org/eslint" alt="eslint"/> <img height="32" width="32" src="https://cdn.simpleicons.org/prettier" alt="prettier"/> <img height="32" width="32" src="https://cdn.simpleicons.org/dotenv" alt=".env"/> <img height="32" width="32" src="https://cdn.simpleicons.org/editorconfig/aaaaaa" alt="EditorConfig"/> <img height="32" width="32" src="https://cdn.simpleicons.org/containerd/aaaaaa" alt="devcontainer"/> <img height="32" width="32" src="https://cdn.simpleicons.org/sonarlint" alt="Sonar Lint"/> <img height="32" width="32" src="https://cdn.simpleicons.org/vitest" alt="vitest"/> <img height="32" width="32" src="https://cdn.simpleicons.org/storybook" alt="storybook"/> <img height="32" width="32" src="https://cdn.simpleicons.org/cypress/000000/ffffff" alt="Cypress"/>

Src Folder structure

Project
├── assets                                    // like svg
├── components                                // atomic design
│   ├── atoms
│   ├── molecules
│   ├── organisms
│   └── templates
├── config                                    // project configuration
│   ├── i18n                                  // i18next resource
│   │   ├── {lang}                            // ISO 639-1 Language Code [en,...,ko]
│   │   │   └── translation.json
│   ├── MenuItems.js
│   └── Router.js
├── context                                   // React Context
│   └── {context name}                        // Context domain name
│       ├── components                        // Context related components
│       └── hooks                             // Context related hooks
├── features                                  // Redux
│   └── {reducer name}
├── hooks                                     // common hooks
├── lib                                       // Library configuration
│   ├── components
│   └── {library name}Config.js
├── pages                                     // Pages
│   ├── {domain}
│   │   ├── {page}
│   ├── {page}
│   │   ├── components                        // children for page
│   │   ├── {page}.jsx
│   │   ├── {page}.module.scss                // module scss
└── utils                                     // common utils

Project configuration

Javascript Type check enable or disable

1. Enable(true) / Disable(false)

   tsconfig.json

   {
     ...
     "checkJs": true,
     ...
   }
   

2. Optionnal

   If you want to apply or not apply type check to only some parts, check the guide below.

   JS Projects Utilizing TypeScript

3. Using typescript

Router

src/config/Router.js

MenuItems

src/config/Menu.js

JsDoc generation

yarn doc

doc folder created

declaration export

yarn type

type folder created

Library configuration

Theme Config

1. Ant Design Default theme

   The initial theme acts as the system's theme setting.

2. Ant Design Customize theme

   To modify the Antd Theme, set the designToken according to the Ant Design Customize Theme guide.

   src/lib/themeConfig.js

   const themeConfig = {
     themeName: getSystemCurrentTheme,
     designToken: {
       components: {
         Layout: {
           headerHeight: 64,
         },
       },
     },
     componentSize: "middle",
   };
   

Working

• JSDoc to typedoc
• Vitest
• Storybook
• Cypress