- React on NextJS
- TypeScript
- TailwindCSS with JIT mode
- Production: https://conlab.wevis.info/
The project is so outdated and can't run with latest version of npm and node. The easiest way is to use Playwright's docker image:
docker run -it --rm --ipc=host -v ./:/app -p 3000:3000 mcr.microsoft.com/playwright:v1.14.1 bash
Then you can run npm scripts inside the container:
yarn # install dependencies
yarn dev # run dev server,
yarn build # build static site to /out
Please set NEXT_PUBLIC_ENV=production
for production build.
Noted that the following environment variables are required (can be defined in .env
):
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_DATABASE_URL=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
- 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
- also pull often, please
- 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
- VSCode with following extensions:
- Tailwind Intellisence
- Prettier with format on save enabled
// 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 reusable components that can be imported and used- If the component is tied to specific page, recommend to create corresponded folder ex.
components/about/only-for-about.tsx
- If the component is tied to specific page, recommend to create corresponded folder ex.
Preferred tailwind utility classes over other styling methods
Color theme is defined with the same name as in Figma
<p className="text-blue-400">some text</p>
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>
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.
This project is licensed under Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) with WeVis Ltd. and Punch Up Ltd. as licensors.