Collection of React and Next.js recipes and learnings. All recipes in TypeScript unless denoted otherwise.
- Basic React project - Basic react (typescript) project using CRA.
- Basic React (JavaScript) project - Basic react (javascript) project using CRA.
- Form handling - React form handling.
- Hooks - React built-in hooks: useState, useReducer, useEffect, useContext.
- Props - Passing props to React components.
- Routing - Simple routing using react-router-dom.
- Webpack - Bundle React (typescript) app in webpack for deployment.
- Basic React-Bootstrap project - Basic react project with Bootstrap.
- Data fetching - Basic next.js data fetching patterns.
- Basic Next.js - Basic next.js project.
- Basic Next.js (App dir) - Basic next.js project using app directory programming model.
- Docker - Dockerize a next.js project.
- Form editor - A more complex form that performs the editing of data.
- Material-UI project - Simple next.js project using material-ui for server-side rending (SSR).
- CustomModal dialog - Simple next.js modal dialgo.
- NextAuth project - For authentication workflow using next-auth.
- Routing - Simple routing in next.js.
- Storybook - Integrate storybook to a next.js project for component-oriented development.
- SWR - The use of useSWR hook to retrieve data.
- Table - Simple NextUI table with edit function.
- Tailwind - Collection of tailwind recipes.
- Colors - Palette of tailwind colors
*-color-*. - Theme - Example of switching between dark and light themes in next.js.
- Widths & Heights - A sample of different widths and heights using tailwind classes
w-*andh-*.
- Colors - Palette of tailwind colors
- Testing - Testing in next.js.
- Component testing: cypress - Component testing with cypress.
- E2E testing: cypress - End-to-end testing with cypress.