Frontend Assessment
- yarn
- nextjs
- typescript
- tailwindcss
- sass
yarn create next-app --example with-typescript with-typescript-app
https://github.com/vercel/next.js/tree/canary/examples/with-typescript
yarn create next-app --example with-tailwindcss with-tailwindcss-app
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
- Install Tailwind CSS with Next.js
- Using Tailwind CSS in a Next.js project
- Next.js - TS Custom App
- Next.js - Adding a Global Stylesheet
- Next.js - Absolute Imports and Module path aliases
Let's first think about what we're going to need
Each page will have an associated Form model. We'll pick 2 form field types:
- Input
- Checkbox
- Title, String, Single line text, Required, and used as a Title
- Slug, String, Slug, Required - Specify {title} as the template
- Form, Reference to Form
- Page, Reference, Accepts multiple Page values
- Fields, Reference, Accepts multiple FormInput, FormTextarea, FormSelect and FormCheckbox values
- Name, String
- Type, Enum, FormInputType
- Label, String
- Placeholder, String
- Required, Boolean
- Form, Reference to Form
- Name, String
- Label, String, Required
- Required, Boolean
- Form, Reference to Form
- TEXT
- DATE
-
Name
- Name: name
- Type: TEXT
- Label: Name
- Placeholder: Nome
- Required: true
-
Email
- Name: email
- Type: EMAIL
- Label: Email
- Placeholder: Email
- Required: true
- Date
- Name: day_of_week
- Type: DATE (ddd DD/MM/YYYY)
- Label: Date
- Required: true
- Hours of
- Name: hour
- Label: HH
- Required: true
We have three pages, with two separate forms and, a recap page.
- Contact Form
- Booking Form
- Recap
This comes in two significant parts. First we create the routes (or "paths") and then query for the data for each page with those path params.
In this file, we will create the structure of our basic form, and map through each of our fields to return the appropreciate field.