cjxe / transfer-coins Goto Github PK

1. About
2. Installation
3. TODO

This project (called Transfer Coins) is a web application built with Next.js and tested with Storybook.

The build has been tested with Node.js 19.2.0.

Husky, Prettier and ESLint is used to automatically test the local code before committing.

npm install -g prettier

npm install -g ESLint

npm run prepare

Storybook is used to isolate and test UI components.

Run the Storybook server with:

npm run storybook
# or
yarn storybook
# or
pnpm storybook

Then, open http://localhost:6006 with your browser to see the result (or visit https://cjxe.github.io/transfer-coins/).

Run the Next.js server with:

npm run dev
# or
yarn dev
# or
pnpm dev

Then, open http://localhost:3000 with your browser to see the result.

• new component: Data display > Text area

• new component: Data display > Accordion

• create /help

• /help#FAQ

• /help#contact

• how to refactor navbar and footer?

  • 1 approach is to release the components as library
  • core elements go to /components/core meanwhile the templates/stories I create go to /components/templates
    • we don't want to import stories since stories test components in a specific state (source: Storybook docs)

• Log in

• Join now

  • Make ToS and PP a link (TextInput)

• diger sayfalari da yap

• add husky to workflow

• add "disabled" state for components

• use swiper to make "plan cards" a carousel

  • add Navigation and Pagination

• use google analytics. official example

• test useSession() works anywhere

• create test API endpoint /protected and show email

• create a middleware for checking every req if it has a token when accessing /dashboard

• skip login/signup if user is already signed in

• add new page: /legal

  • new page layout for content
    • /legal/terms-of-service
    • /legal/privacy-policy
      • link these to footer buttons

• push changes

• [ ]

• make max width 1440px

• Table
  • make table responsive like Binance's
• Chip
• Alert
• Loading s
• Avatar
• Tooltip
  • make FeatureContainers icons Tooltip
  • add href to icons in the list
• Progress (low priority) s
• KBD (low priority)
• Notification Badge (very low priority)

• Divider > Vertical/horizontal and w/ text in the middle
• Notification/Toasts
  • fix: multiple toasts override each other. Make a list instead. Potential solution: bring up ToastContextProvider to <App /> and wrap it with <ToastListContextProvider>

• Navbar
  • make one for Logged in
• Footer
• Menu
  • Add Badges
• Pagination
• Table of Contents/Anchor s
• Stepper (low priority)
• Timeline (low priority)
• Tabs (very low priority)
• Breadcrumb (very low priority)

• Button
• Special button with icon
• Checkbox
  • CheckboxList
• ToggleSwitch
• TextInput
  • add new child tag: FeedbackText
• TextArea
• File input
• Dropdown
• Modal also mobile like this
• Radio (low priority)
  • RadioList
• Range (very low priority)
• Date picker (very low priority)
• Rating i.e., 5 stars (very low priority)
• Button group (very low priority)

• standardise all sizings to md

  • research result: -base variant is only applied to text styles. no flag (default one) is in between md and lg. However, for this project set the component size to md as if it's the base size

• clean folder structure

  • will inner components have their parent name appended to the start?
  • will text compoennts have Text at the end? no
  • make all icon props start with a capital letter?

• make all Icon propTypes: elementType (make sure there are no errors)

• clean styles and use themes instead (this might help)

• refactor <FeatureContainer> (make it like <FeatureContainer.Heading> etc)
• add new prop to <Accordion>: onlyOneIsOpen
• add new sizes to <ToggleSwitch>: (sm, base, lg)
• make <Checkbox> like <ToggleSwitch> where it gets checked even if the label is clicked
• make new proprties for <Chip>: onClickIcon, onClick
• Make <Avatar>s onError prop more seamingless (as soon as the image returns an error, broken-image icon is displayed and then gone after it is rerendered)
• add new <Table> component with sorting
• add new prop to <TextInput>: onResponse when text input has a text response