From 5d135cfad06e81cba8b00bf58789108a2b6228e9 Mon Sep 17 00:00:00 2001 From: Sanjeeb Lama <51410633+SanjeebLama@users.noreply.github.com> Date: Fri, 19 May 2023 14:15:40 +0545 Subject: [PATCH 1/3] Update Readme --- README.md | 104 +++++++++++++++++++++++++----------------------------- 1 file changed, 48 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index 0f1da3e..f9f244e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,12 @@ [![Jira](https://badgen.net/badge/icon/jira?icon=jira&label)](https://github.com/SanjeebLama/Frontend-Skeleton) [![](https://img.shields.io/badge/Documentation-darkblue?style=flat&logo=notion&logoWidth=20&logoHeight=20)](https://github.com/SanjeebLama/Frontend-Skeleton) - # 🚀 Turbo Frontend Skeleton Turbo Frontend Skeleton is a template designed to help streamline the process of creating new frontend projects. It comes equipped with all the latest stable dependencies that we use, allowing developers to get up and running quickly. - ## Overview +
A brief introduction to the project
This turborepo uses **Yarn** as a package manager. It includes the following packages/apps: @@ -21,42 +20,39 @@ Turbo Frontend Skeleton is a template designed to help streamline the process of - `tsconfig`: `tsconfig.json`s used throughout the monorepo Each package/app is 100% [TypeScript](https://www.typescriptlang.org/). - -**Tech Stack:** -| Technology | Description | -| :----------------------------------------- | :----------------------------------------------------------------------------------------------------------- | -| [Next.js](https://nextjs.org/) | A React-based framework for building modern web applications | -| [Tailwind CSS](https://tailwindcss.com) | A utility-first CSS framework for rapidly building custom designs | -| [Chakra UI](https://chakra-ui.com) | A simple and modular component library for React applications | -| [Storybook](https://storybook.js.org) | An open-source tool for building UI components and pages in isolation | -| [React Query](https://tanstack.com) | A library for managing and caching server state in React applications | -| [React Hook Form](https://react-hook-form.com) | A performant, flexible and extensible forms library for React with easy-to-use validation features | -| [zod](https://github.com/vriad/zod) | A TypeScript-first schema validation tool that is intuitive, type-safe and practical | -| [next-i18next](https://github.com/isaachinman/next-i18next) | A plugin for Next.js that provides a simple, powerful way to add internationalization to your app | -| [Sentry](https://sentry.io/) | A cloud-based platform for error monitoring, logging and aggregation in software applications and services | +**Tech Stack:** +| Technology | Description | +| :---------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- | +| [Next.js](https://nextjs.org/) | A React-based framework for building modern web applications | +| [Tailwind CSS](https://tailwindcss.com) | A utility-first CSS framework for rapidly building custom designs | +| [Chakra UI](https://chakra-ui.com) | A simple and modular component library for React applications | +| [Storybook](https://storybook.js.org) | An open-source tool for building UI components and pages in isolation | +| [React Query](https://tanstack.com) | A library for managing and caching server state in React applications | +| [React Hook Form](https://react-hook-form.com) | A performant, flexible and extensible forms library for React with easy-to-use validation features | +| [zod](https://github.com/vriad/zod) | A TypeScript-first schema validation tool that is intuitive, type-safe and practical | +| [next-i18next](https://github.com/isaachinman/next-i18next) | A plugin for Next.js that provides a simple, powerful way to add internationalization to your app | +| [Sentry](https://sentry.io/) | A cloud-based platform for error monitoring, logging and aggregation in software applications and services | **Utilities** This turborepo has some additional tools already setup for you: - - | Technology | Description | -| :--------------| :-------------------------------------------------- | -| TypeScript | A strict syntactical superset of JavaScript | -| ESLint | A pluggable linting utility for JavaScript and JSX | -| Prettier | An opinionated code formatter | - - +| Technology | Description | +| :--------- | :------------------------------------------------- | +| TypeScript | A strict syntactical superset of JavaScript | +| ESLint | A pluggable linting utility for JavaScript and JSX | +| Prettier | An opinionated code formatter | + #### Project Tree - - ``` + +``` frontend-skeleton -├─ .vscode +├─ .vscode │ └─ settings.json ├─ apps -│ ├─ docs +│ ├─ docs │ │ ├─ .eslintrc.js │ │ ├─ README.md │ │ ├─ next-env.d.ts @@ -70,7 +66,7 @@ frontend-skeleton │ │ │ └─ globals.css │ │ ├─ tailwind.config.js │ │ └─ tsconfig.json -│ └─ web +│ └─ web │ ├─ .eslintrc.js │ ├─ .lighthouseci │ ├─ README.md @@ -218,38 +214,37 @@ frontend-skeleton └─ yarn.lock ``` - + **Atomic Design System for Component Development** - - Atomic Design System is a methodology for creating design systems by breaking down the UI into fundamental building blocks called atoms, molecules, and organisms. - - Atoms are the smallest and most basic building blocks, molecules are groups of atoms that work together to form more complex and functional components, and organisms are groups of molecules and atoms that work together to form a more complete section or module of the interface. - - By using Atomic Design System, designers and developers can create scalable, reusable, and consistent components that can be easily maintained and updated. - - This approach promotes a more efficient and collaborative design process by providing a common language and framework for designers and developers to work with, while delivering high-quality and user-friendly experiences. - -** Naming Convention** - - Use a consistent and descriptive naming convention across all projects and components within the mono repo. - - Avoid using ambiguous or generic names that could create confusion or conflicts with other projects or components within the mono repo. - - Package names should be descriptive and easy to remember. For example, a package that contains code for a web server might be named my-web-server. - - Directory names should be similar to package names, but they should be more specific. For example, the directory that contains the code for the web server's main logic might be named src/web-server. - - File names should be descriptive and include the name of the file's contents. For example, a file that contains the code for the web server's main logic might be named main.js. - - Consider using a versioning scheme in the naming convention to indicate the version of the project or component (e.g., "app-v1.0", "lib-v2.3", "ui-v1.2.3", etc.). +- Atomic Design System is a methodology for creating design systems by breaking down the UI into fundamental building blocks called atoms, molecules, and organisms. +- Atoms are the smallest and most basic building blocks, molecules are groups of atoms that work together to form more complex and functional components, and organisms are groups of molecules and atoms that work together to form a more complete section or module of the interface. +- By using Atomic Design System, designers and developers can create scalable, reusable, and consistent components that can be easily maintained and updated. +- This approach promotes a more efficient and collaborative design process by providing a common language and framework for designers and developers to work with, while delivering high-quality and user-friendly experiences. +** Naming Convention** + +- Use a consistent and descriptive naming convention across all projects and components within the mono repo. +- Avoid using ambiguous or generic names that could create confusion or conflicts with other projects or components within the mono repo. +- Package names should be descriptive and easy to remember. For example, a package that contains code for a web server might be named my-web-server. +- Directory names should be similar to package names, but they should be more specific. For example, the directory that contains the code for the web server's main logic might be named src/web-server. +- File names should be descriptive and include the name of the file's contents. For example, a file that contains the code for the web server's main logic might be named main.js. +- Consider using a versioning scheme in the naming convention to indicate the version of the project or component (e.g., "app-v1.0", "lib-v2.3", "ui-v1.2.3", etc.). -

⬆️

- ## Installation:
Instructions for installing the project -
Open a command prompt or terminal window on your local computer. Navigate to the directory where you want to clone the repository. +
Open a command prompt or terminal window on your local computer. Navigate to the directory where you want to clone the repository. + 1. Use the **`git clone`** command to clone the repository. The syntax is as follows: ```jsx -git clone git@github.com:wesionaryTEAM/turbo-frontend-skeleton.git +git clone https://github.com/SanjeebLama/frontend-skeleton.git ``` 2. Go inside `turbo-frontend-skeleton` folder @@ -266,21 +261,20 @@ git checkout develop 4. Make sure to select the appropriate version of Node.js by using `nvm use` If you haven't installed nvm yet, you can follow the installation instructions at the [**official nvm repository on GitHub**](https://github.com/nvm-sh/nvm#installing-and-updating). This step is important to ensure that the project uses the correct version of Node.js and to avoid any potential compatibility issues. - -5. After that you’ll first need to install all the dependencies +5. After that you’ll first need to install all the dependencies ```jsx yarn install ``` Good Job! 🤗 You successfully installed the skeleton, now we just need to run project. - +

⬆️

- ## Running the project: +
Show instructions
- To Run **both apps** from root @@ -288,7 +282,7 @@ Good Job! 🤗 You successfully installed the skeleton, now we just need to run ```jsx yarn run dev ``` - +
- To run **Web** workspace from root ```jsx @@ -300,11 +294,10 @@ Good Job! 🤗 You successfully installed the skeleton, now we just need to run ```jsx yarn workspace docs run dev ``` - +

⬆️

- ## Build:
Instructions for building the project @@ -329,12 +322,13 @@ To run docs workspace cd turbo-frontend-skeleton yarn workspace docs run dev ``` +

⬆️

- ## Contribution Guidelines: +
Guidelines for contributing to the project
@@ -346,7 +340,6 @@ yarn workspace docs run dev

⬆️

- ## Useful Links:
Useful resources related to the project @@ -355,10 +348,9 @@ yarn workspace docs run dev - [Documentation](https://www.notion.so/Frontend-Skeleton-Documentation-adac91e528a0498fb3e9316c86f3183b) - [Checklist](https://www.notion.so/Frontend-Skeleton-Dependencies-Checklist-82baa48de70f4e25aab67f501fb70358) -- [Jira Board](https://wesionary-team.atlassian.net/jira/software/projects/FR/boards/58) **Learn more about the power of Turborepo:** - + - [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks) - [Caching](https://turbo.build/repo/docs/core-concepts/caching) - [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) From d1f0cf983f9e4f1e27d85c53e929857b3d0ad1d4 Mon Sep 17 00:00:00 2001 From: Sanjeeb Lama <51410633+SanjeebLama@users.noreply.github.com> Date: Fri, 19 May 2023 14:33:41 +0545 Subject: [PATCH 2/3] Add scripts to enable running web and docs from root --- package.json | 6 ++++-- turbo.json | 11 ++++++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 3c1d1c0..0f473e5 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ "build": "turbo run build", "dev": "turbo run dev", "lint": "turbo run lint", - "format": "prettier --write \"**/*.{ts,tsx,md}\"" + "format": "prettier --write \"**/*.{ts,tsx,md}\"", + "web": "turbo run dev --scope=web", + "docs": "turbo run dev --scope=docs" }, "devDependencies": { "eslint-config-custom": "*", @@ -22,4 +24,4 @@ }, "dependencies": {}, "packageManager": "yarn@1.22.19" -} +} \ No newline at end of file diff --git a/turbo.json b/turbo.json index ef4a0a2..69851ff 100644 --- a/turbo.json +++ b/turbo.json @@ -13,10 +13,19 @@ "!.next/cache/**" ] }, + "dev": { + "cache": false + }, "lint": { "outputs": [] }, - "dev": { + "web": { + "cache": false + }, + "docs": { + "cache": false + }, + "storybook": { "cache": false } } From 081102a38dc6b86cdb4bd4acc3940834693dcf18 Mon Sep 17 00:00:00 2001 From: Sanjeeb Lama <51410633+SanjeebLama@users.noreply.github.com> Date: Fri, 19 May 2023 14:36:36 +0545 Subject: [PATCH 3/3] Update Readme --- README.md | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index f9f244e..9321104 100644 --- a/README.md +++ b/README.md @@ -247,10 +247,10 @@ frontend-skeleton git clone https://github.com/SanjeebLama/frontend-skeleton.git ``` -2. Go inside `turbo-frontend-skeleton` folder +2. Go inside `frontend-skeleton` folder ```jsx -cd turbo-frontend-skeleton +cd frontend-skeleton ``` 3. Checkout to `develop` branch @@ -286,13 +286,13 @@ Good Job! 🤗 You successfully installed the skeleton, now we just need to run
- To run **Web** workspace from root ```jsx - yarn workspace web run dev + yarn run web ```
- To run **Docs** workspace from root ```jsx - yarn workspace docs run dev + yarn run docs ```

⬆️

@@ -305,24 +305,10 @@ Good Job! 🤗 You successfully installed the skeleton, now we just need to run
To build all apps and packages, run the following command: ``` -cd turbo-frontend-skeleton +cd frontend-skeleton yarn run build ``` -To run apps workspace - -``` -cd turbo-frontend-skeleton -yarn workspace web run dev -``` - -To run docs workspace - -``` -cd turbo-frontend-skeleton -yarn workspace docs run dev -``` -

⬆️