/figma-next-sanity

Primary LanguageJavaScript

Figma - David Choi - Web Developer, Web Experience

Inspired by figma.com/careers

David's Solution

Front End application using React.js for UI, Next.js for SSR and setup, Styled Components for CSS in JS consuming data from Sanity, deployed through Vercel

  • Copied the style and content from figma.com
  • Created my own React Components writing CSS in JS with Styled Components
  • Used Next.js for routing, image optimization, and everything else to help get my project production ready quickly
  • Sanity Studio running on localhost and deployed in the cloud.
  • Next.js deployed with the Sanity Vercel Integration.

Analytics

Lighthouse Scores

Lighthouse Score Screenshot

Web Vitals

Vercel Analytics

Dev Setup

Initial Setup

Step 1. Run Next.js locally in development mode

yarn install && yarn dev

Your webapp should be up and running on http://localhost:3000!

Step 2. Populate content

In another terminal start up the studio:

npm run studio:dev

Your studio should be up and running on http://localhost:3333!

View deployed production application

  1. Go to https://figma-next-sanity.vercel.app/