greatgumz/lyft-davidschoi

Lyft - David Choi - Front End Engineer

Inspired by lyft.com

David Choi'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 Contentful, deployed through Vercel

• Copied the style and content from lyft.com
• Created my own React Components writing CSS with Styled Components
• Used Next.js for routing, image optimization, and everything else to help get my project production ready quickly
• Pulled content data from GraphQL Contentful API at https://graphql.contentful.com/content/v1/spaces/{SPACE_ID}/explore?access_token={CDA_TOKEN}
• Deployment through Vercel using environment variables, preview & production deployments
• Mobile and Desktop friendly

Lighthouse Score

Dev Setup

1. Set up environment variables

From your contentful space, go to Settings > API keys. There will be an example Content delivery / preview token - you can use these API keys. (You may also create a new key.)

Next, copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then set each variable on .env.local:

• CONTENTFUL_SPACE_ID should be the Space ID field of your API Key
• CONTENTFUL_ACCESS_TOKEN should be the Content Delivery API - access token field of your API key
• CONTENTFUL_PREVIEW_ACCESS_TOKEN should be the Content Preview API - access token field of your API key
• CONTENTFUL_PREVIEW_SECRET should be any value you want. It must be URL friendly as the dashboard will send it as a query parameter to enable preview mode

Your .env.local file should look like this:

CONTENTFUL_SPACE_ID=...
CONTENTFUL_ACCESS_TOKEN=...
CONTENTFUL_PREVIEW_ACCESS_TOKEN=...
CONTENTFUL_PREVIEW_SECRET=...

2. Install dependencies and run Next.js in development mode

yarn install
yarn dev

3. Go to http://localhost:3000

View deployed production application

1. Go to https://lyft-davidschoi.vercel.app/