Codeforces
CF Step
Youtube Linkedin Discord Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Toggle Dark/Light/Auto mode Back to homepage
  1. Home
  2. /
  3. Projects
  4. /
  5. LeetCode Board
  6. /
  7. Resources : LC Board
  8. /
  9. Form and Routes : LC Board

Form and Routes : LC Board

In the first week, we focused on Tailwind CSS. We will skip the mobilve navbar for now, and revisit it later towards the end of the project. If you’re not able to wrap your head around Tailwind CSS, no worries, the second week doesn’t involve a lot of CSS. In the second week, we will focus on the documentation of NextJS, some concepts of React (Hooks and Props), Zod,

Create a page /problems. This page should contain a form (created using shadcn/ui components) that takes the problem ID as input. Upon submitting the form, it should redirect to a new page /problems/123. Here 123 is the actual problem ID that the user entered into the form. This page should contain Hello 123 in a card, where 123 is the problem ID.

  • Create a form component in the file components/custom/lc-form.tsx
  • Use Zod to define the schema for the form input. Zod handles the user validation for you. Try entering something which is not an integer in the input area and see what happens.
  • Read about what is a Single Page Application (SPA). Figure out how to navigate from one page to another without refreshing the entire page. This is where the documentation of router from next/navigation and Link from next/link would come in handy.
  • If this is really an SPA, and we don’t do a refresh of the entire site, how do we update the title of the webpage? Read about the useEffect React hook.
  • How do we get the url that we are currently on, to detect the problem ID? Read about useParams from next/navigation.

Except for the React hooks to update the page title, please do not google about other parts of the exercise. To do them, read the official documentation instead.

  • For Forms : Read the shadcn/ui page and google for keywords that you don’t know.
  • For routes and navigation : Read the Next JS documentation. On the left hand side, you will a section called Routing. In this section, these are the pages that you need to read:
  1. Defining routes
  2. Pages
  3. Layouts and Templates
  4. Linking and Navigating
  5. Redirecting
  6. Dynamic Routes

They are very beginner friendly, and contains good visualization. Make sure to go through them.