F2E 2022 Challenges

A 3-week frontend development challenge - working together with UI designer and trying new frontend technologies

  • F2E 2022 Landing page

    F2E 2022 Landing page

    Redesign of official F2E landing page with animations

    Created at least 10+ shared animated React components powered by Framer Motion, tried a way to clean up all Framer Motion's shared variants, transitions & dynamic variables

  • PDF Sign

    PDF Sign

    A web-browser only application to support digital signature on mobile & desktop devices

    As reviewing the UI, realises the scope had been over and some features will required more than just frontend technology to integrate. For example, creating a personal account will require authentication scheme and an external datasource such as Firebase; saving signature history will probably require using browser database like IndexedDB; sharing files for multi-signature will require an online stroage for sharing either signatures or original/signed documents which will most likely lead to security & encryption issues; This application could easily develop into an MVP but cannot see which feature to focus as initial launch.

  • Scrum Introduction

    Scrum Introduction

    A step-by-step tutorial to conduct ideas of Scrum - an agile methodology of software development

    Tested development with React Server Component and Next.js v13 app folder structure (without any server-side data fetching mechanism). It felt like working within feature folder structure where each route/layout has context-specific client-side and server-side React components, which was another applicable approach when working on large scale applications.

Related Tech stacks

Shared across applications

Turborepo
A monorepo tools to streamline better development experience & pipeline orchestration tools. It was a great fun to compare the working process between lerna@4.0.0, nx, lerna@^5, also how we can create packages just for shared configuration files.Reference
Changesets
A versioning workflow with integrated GitHub action. This was a new experience comparing to using conventional commit with auto-generated changelog.Reference
Tailwind CSS
A low-level but battery-included way to write css and set up design system. Coming from a background of working with Styled Components and theme context injection, this pure CSS class syntax does bring a lot of benefits of bundle sizing and support of React Server Components.Reference
tsup & esbuild
Preconfigured JavaScript bundler written in Golang. The performance is outstanding and will need more time to play around and benchmark.Reference