kai-franke/capstone-project

Dynamic Routing

Closed this issue · 6 comments

kai-franke commented

Value Proposition

As a user, I want my tutorials to have unique, easy to read URLs so I can easily reach them.

Description

Image

Acceptance Criteria

  • URL in form of /tutorials/<tutorial-name> shows page with corresponding tutorial name
  • the slug /tutorials shows the library page1 containing a list with all tutorials

Tasks

  • add key slug to demo data
  • create file tutorialService.js inside new folder services
  • move demo data from db.js into tutorialService.js and delete db.js
  • create functions getAllTutorials() and getTutorialBySlug(slug)
  • create tutorials folder inside pages
  • copy content from library.js into new file index.js of tutorials folder and delete library.js
  • make use of getAllTutorials() inside tutorials/index.js to replace the data from former db.js
  • create [slug].js inside tutorials folder
  • create a Tutorial page component
  • make use of getStaticPaths() and getStaticProps(context) in order to create a single page for every tutorial inside the demo date array

Footnotes

  1. please refer to this user story: https://github.com/kai-franke/capstone-project/issues/2 ↩

mbosselmann commented

Hi Kai,
I like your user story! 👍 The value proposition is easy to understand from a user perspective.
It would be cool to see a wireframe that shows the library page with the list of all tutorials for a better visualization of your user story.

kai-franke commented

Thank you so much for your feedback, Mareike!
The library page was done this previous story: #2
So as this is only a change of the URL from /library to /templates, do you think I should include the wireframe again?

kai-franke commented

I have added a "wireframe" of the new page which is shown when a URL in form of /tutorials/<tutorial-name> is entered.

mbosselmann commented

Ah, now I understand. You can link in your description to your previous user story to show the library page and you do not need to add the wireframe. For the wireframe: a back button could be nice so that the user can return to the tutorials list?

kai-franke commented

You can link in your description to your previous user story to show the library page
Very good idea! Thank you. :)

For the wireframe: a back button could be nice
Definitely! But navigation elements will be part of the upcoming user stories. I would prefer not to include this functionality right now.

mbosselmann commented

I can understand this, but from a user's perspective it is hard when you can't go back to the list itself and I don't think that a regular think that it is a good user flow to go back by changing the url in the address bar. It could be criticized in the QA that's why I wanted to mention it. But feel free to code now. 👍

  • 👍1