/cfp-fs-design

Code For Prototyping - FS Design Traveloka

Primary LanguageTypeScript

-----------------------------------------------------

CFP of FS Design Traveloka

🌐 Live Website 🌐

Web-based prototype to help user testing and or concept validation with the advantage of having more interaction capability, non-linear action, and data accurate form experience.

-----------------------------------------------------

🤔 Philosophy

  • Gatsby Next

    • In terms of overall benefit, Next and Gatsby is pretty similar.
    • Next has no opinion towards how we should do our data fetching. So in case we need to do some backend in the future, we are not locked to use GraphQL.
    • In terms of popularity, Next wins. Therefore, a lot of resource covers them online.
    • FS Web Engineers used Next to build merchant platform. We can ask them if we find any difficulties regarding Next.
  • Javascript Typescript

    • In order to make CFP runs good in the long run, there's no denying that Typescript is really important. Over long periods of time, a web that is build on top of javascript become unreadable and will trap us in debugging hell.
    • For speed, all we need to do is to familiarize ourselves with Typescript. I could say that after understanding it, Typescript is way faster.
  • CSS SCSS

    • Nesting class is convinient.
  • React Context Jotai

    • Typescript oriented.
    • Simpler in integration and implementation.

-----------------------------------------------------

👘 Prerequisite

Plugin

  • Please Install Prettier and ESLint to format the files as you save.

-----------------------------------------------------

🚴‍♂️ Getting Started

1. Pull This Repository

git clone https://github.com/ackyl/cfp-fs-design

2. Install Dependencies

npm install

2. Run the Project

npm run dev

3. Open localhost:3000 in Browser


-----------------------------------------------------

🛑 Before You Create PR

1. Try to Build to See Any Error

npm run build

2. Make Sure You're Not in Main or Master Branch of Your Forked Repo

git branch

-----------------------------------------------------

📜 Technical Notes & Best Practices

1. Lorem Ipsum

2. Lorem Ipsum