Skip to content

Latest commit

 

History

History
111 lines (78 loc) · 2.99 KB

README.md

File metadata and controls

111 lines (78 loc) · 2.99 KB
Raw

Dream Constitution

Tech Stack

Deployment Environments

Getting Start

  1. Clone the repo
  2. Install dependencies
npm install
# or
yarn
  1. run the development server
npm run dev
# or
yarn dev

Development Guideline

Way of working

  • Tasks are free to picked from Github Issues. Assigne when picked and close when finished.
  • Trunk based development: work on single main branch
  • Continuous integration (CI): small commit and push often (no overnight)
    • also pull often, please pull --rebase before push
  • Continuous Deployment (CD): every push will be built to staging
  • Pre push linter/formatter: When commit code, linter/formatter will be run to make code style consistance

Recommend tools

React Component

// hello.tsx
import { FunctionComponent } from 'react';

type HelloProps = {
  name: string;
};

const Hello: FunctionComponent<HelloProps> = ({ name }) => (
  <div>Hi, there! {name}</div>
);

export default Hello;
  • File name should be all lower case with dash .tsx ex: some-component.tsx
  • React components are located in 2 directory
    • /pages contain each web page ex. pages/about.tsx will create a page at url /about more about routing
    • /components contain reuseable components that can be imported and used
      • If the component is tied to specific page, recomment to create coresponded folder ex. components/about/only-for-about.tsx

Styling

Prefered tailwind utility classes over other styling methods

Color

Color theme is defined with the same name as in Figma

<p className="text-blue-400">some text</p>

Typography

Typography is defined and can be used as a class text-<name-in-Figma>

<p className="text-huge">huge</p>
<p className="text-large-1">large-1</p>
<p className="text-large-2">large-2</p>
<p className="text-headline-1">headline-1</p>
<p className="text-headline-2">headline-2</p>
<p>body-1 (default)</p>
<p className="text-body-2">body-2</p>
<p className="text-small-1">small-1</p>
<p className="text-small-2">small-2</p>

Images

For local images place it in assets/images/ and use require

<img src={require('../assets/images/next.png')} alt="Next" />

Images will get optimized on build. No need to do it manually.