@hredubru/dev-pg v1.5.0

Dev's Playground

Welcome to the Playground! This document provides an overview of the project, its structure, and how to run it.

This project gives the Front-end Developers and UI Designners to learn experiment and have an outcome of the components the way they would look and functions.

Vision

The vision of this project is to provide a space where developers and designers can collaborate, learn, and experiment with different components. By coding once and having a reusable library of components, the aim is to streamline the development process and encourage a more efficient workflow.

Technologies Used

• React
• Tailwind CSS
• Storybook
• HTML5 EventSource

Development tools:

• Git
• Yarn/Npm (note: yarn install not working for instance level privet gitlab package)
• An IDE of your choice

Directories and files

Below is a list of the folders in the root directory of source code:

• src - the source code (both source code and junit test cases)
• stories - the documentations using story files

These are the folders generated by the build tools (not to be included in the git repository):

• node_modules - Folder third-party dependencies downloaded by build tool
• dist - Output built artifacts
• .idea - Created by Intellij IDE, if used for development
• yarn.lock/package-lock.json - Created by yarn/npm

These are the main files in the root folder:

• .gitignore - List of files and folders to be ignored by git
• ci.yml - gitlab build configuration file
• tainwind.config.json - Configuration file used by Tailwind CSS
• package.json - Holds the js libraries dependencies
• readme.md - the project documentation index file
• tsconfig.* - TypeScript compiler configuration.
• tslint.json - Tslint configuration

Overview of directory

├── src
│   
├── App.tsx
├── assets
├── plates
│   └── Component
│       ├── Component.iterface.ts
│       ├── Component.tsx  
│       └── Component.scss
├── test
│   └── Component.test.tsx
│   
├── stories
│   ├── assests
│   ├── Component
│   │   ├── Component.mdx
│   │   └── Component.stories.txs
│   └──Configure.mdx
│
├── index.scss
├── main.tsx
├── setupTests.ts
└── vite-env.d.ts

main.tsx is the main entry point of the app

Project Setup

1. Clone the repository:

git clone https://github.com/Hredoysen/devPlayground.git
cd devPlayground

2. Run StoryBook:

npm run storybook 

3. Run Test:

npm run test