React is great! And though it does A LOT, it's not a full framework. In other words, many common tasks are not handled out of the box by React. So it's up to us devs to make some decisions about how to use React in combination with other tools.
One great "stack" is to use Next.js (which builds on top of React) and style with Tailwind.
Your job is to create a Cookie Stand Admin app using Next.js{:target="_blank"} and style using Tailwind CSS{:target="_blank"}.
- The
specfor lab is screen shot of Cookie Stand Admin Version 1{:target="_blank"} pages/Index.jsshould...- Have
<Head>component with page title set toCookie Stand Admin - Have a
headercomponent that matches spec. - Have a
<main>component containing<form>and a placeholder component showing JSON string of last created Cookie Stand. - Have a
<footer>component that matches spec.
- Have
- Style app using TailwindCSS utility classes.
-
npx create-next-app --example with-tailwindcss cookie-stand-admin
- strip out unused files
- Won't break if they get left in, but a good practice to remove stuff you're not using.
- Pro tip: Tailwind CSS Extension Pack{:target="_blank"}
PR Link: #1
Your job is to continue work on Cookie Stand Admin app using Next.js{:target="_blank"} and style using Tailwind CSS{:target="_blank"}.
- The
specsfor lab are screen shots Cookie Stand Admin Version 2{:target="_blank"} and Cookie Stand Admin No Stands{:target="_blank"} pages/Index.jsshould return top level component<CookieStandAdmin><CookieStandAdmin>details...- Have a
<Head>component. - Have a custom
<Header>component that matches spec. - Have a
<main>component. - Within
<main>have custom<CreateForm>and<ReportTable>components. - Have a custom
<Footer>component that matches spec. - Import time slot data from supplied
data.jsfile.
- Have a
<Head>should set page titleCookie Stand Admin<Header>component should have Next<Link>tooverviewpage.<CreateForm>component details...- Receive an
onCreatefunction to be called when form is submitted. onCreateshould be passed argument object representing new cookie stand.- Object should have
locationproperty. - Object should have
hourly_salesproperty with hard coded[48, 42, 30, 24, 42, 24, 36, 42, 42, 48, 36, 42, 24, 36]
- Object should have
- Receive an
<ReportTable>details...- should receive
hourson props that is an array cookie stand hours of operation. - should receive
reportson props that is an array all cookie stand objects. - If
reportsis empty then render<h2>No Cookie Stands Available</h2> - If
reportsis not empty then render atablewiththead,tbodyandtfootcomponents. - Component should render to match spec.
- Component is responsible for tallying totals for each cookie stand as well as all cookie stands per hourly slot.
- should receive
<Footer>component details...- Should receive
reportsarray on props. - Should display
X Locations World WidewhereXis number of cookie stands.
- Should receive
<Header>,<Footer>,<CreateForm>and<ReportTable>should each be in own file inside top levelcomponentsfolder.- Those components should be imported into
Index.js Overviewpage details...- should live in
pages/overview.js - should render
<Link href="/"><a>Return to Main page</a></Link> - Style all components using TailwindCSS utility classes to match spec.
- Continue work in
cookie-stand-adminrepository - IMPORTANT Complete version 1 tasks before moving to version 2 features.
- Pro tip: Tailwind CSS Extension Pack{:target="_blank"}
PR Link: #2
Deployment Link: https://cookie-stand-admin-o40dk8qoa-snacks.vercel.app/
This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.
It uses the new Just-in-Time Mode for Tailwind CSS.
Preview the example live on StackBlitz:
Deploy the example using Vercel:
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-appDeploy it to the cloud with Vercel (Documentation).