User Story 4: Dynamic Routes

[marcterre]

Value Proposition

As a user I want to have different pages for my projects so that i am able to see the details for every project.

Description

Currently the project names on the landingpage where imported from a static JSON file. Now i want to get the project names from the user input and render them on the landingpage. Also clicking a project name on the landingpage leaded to the same page. Now i want to have dynamic routes so that every project name leads to its own page.

Acceptance Criteria

• [ ] the list items on the landingpage have now the correct names and dynamic routes
• [ ] the project name, description and sketch show the correct values from the inputs
• [ ] there is no "back"-button on the project details page anymore, because of the navigation
• [ ] the "save"-button in "create-new-project" leads to the landingpage

Tasks

• [x] create a [slug] folder with a index.js inside
• [x] inside of the [slug]index.js:
  • [x] import the useRouter hook and the project component
  • [x] return the project component and assign the props (handle the global state for the data)
  • [x] create a const for the router, you can use: const router = useRouter(); const { slug } = router.query;
• [x] create a const to find the project.slug it should be equal to slug (const currentProject = globalProject.find((project) => project.slug === slug)
• [x] update the Link tag inside the project component, set the href with the [slug] (ex.: <Link href={/your-projects/${project.slug}}>)
• [x] delete the import of the JSON file, you now map over the created project names
• [x] delete the "back"-button on the project details page
• [x] let the "save"-button lead to the landingpage

Complexity

L

[niklasrammelkamp]

Hi Marc, I like how detailed your tasks are.

There are only two little things I don't really understand. What do you mean by "the list items on the landingpage are not static anymore"? I think you should explain this in your tasks section. Something like you wanna map over an array containing the created projects or however you wanna solve this.

And the second thing is "delete the static json file". I think that's related to my first point. Maybe you also write what you do instead of deleting the json file 'cause you probably need a different solution.

[marcterre]

Hey Niklas,

I changed a few parts. Hope now its clear. I also change "project title" to "project name".

[mbosselmann]

Hi Marc, great job! 👍 But I have some remarks:

• I have the same question as Niklas as I do not understand the difference to your #2
• But I checked your current implementation and I think I understand now the difference: Currently only one ProjectItem is rendered and you want to have dynamic routes for project details page and you want to map over your data or?
• I would suggest to clarify that more in your description 🤔 (for example you can link to your second user story, describe the current status quo and then write something about what you want to achieve)
• If the main purpose of your user story is to have dynamic routes then your value proposition maybe sets the wrong focus
• Annnd: after adding a new project to the list will the user stay on the form page or will he be redirected to the details page or landing page? This should be clarified

I hope my remarks are helpful. Feel free to ask me to explain them further :)

[marcterre]

I changed a bit, hope this works better