React Module Project: React Hotel as a team

[SallyMcGrath]

As per our conversations around this with PD since last year, I have converted the CYF React Hotel to a project to be done in teams.

1. Here's the repo https://github.com/CodeYourFuture/React-Module-Project
2. Here's the planning board https://github.com/orgs/CodeYourFuture/projects/152 template
3. All the exercises are created in order as issues https://github.com/CodeYourFuture/React-Module-Project/issues
4. The site is deployed here with automatic previews on PR https://react-module-project.netlify.app/

Staging problems from final projects

This project is designed to stage smaller, lower-stakes encounters with some of the big challenges trainees encounter in Final Projects (Launch Projects). For old hands not fully up on the new curriculum, these trainees have already done a project learning Agile, several feature branch workflow workshops, several component workshops with docs exercises, have been writing tests since JS1 and deploying to Netlify since ITD.

• Scoping tickets to small features
• Sharing work in a team
• Planning and kanban
• Merge conflicts
• Testing
• Research and reading documentation to solve problems

Scaffolding, resources

To scaffold this and try to make sure it doesn't take over from learning React, I've built out a bunch of resources:

• I created a starter project with Vite, Vitest, Testing Library React, Jest DOM, SASS
• I set up all the issues on a premade project board as a template they can copy
• I wrote some short docs giving them a system for each problem: planning the project, building it, testing it, and deployment
• I wrote a tiny starter style and removed Bootstrap - could also offer Tailwind
• I configured aliasing to manage paths and assets because it's usually a huge blocker that distracts trainees from building the thing
• I set up sample component folders with testing and styles because organising their project is another huge blocker that actually has some easy answers and isn't super useful to struggle with. I used the same system they have seen in the components workshops
• I slightly edited some of the exercises to focus them more on React

Note on what is not here

• I did not put e2e in yet - that can come with Node : Vitest + Cypress as discussed in Slack
• Even though they will be working in teams of three or four, so writing 1/4 of the features, I have not added any more features, because I think the collaboration and unit testing will take up the time

How this could be improved:

• [ ] the tickets could be rewritten as stories with acceptance criteria, could @CodeYourFuture/pd-syllabus-team do this?
• [ ] the timings given could be updated based on React teachers' experience - as I've never led a React module only TAd them.
• [x] the docs I provided could be very usefully improved:

https://github.com/CodeYourFuture/React-Module-Project/docs

PLAN How to set up the team, how to organise taking tickets -- in JS3 they complete a PD project dry run of this and I'd like us to follow their lead or if pos get them to own this part and we can lend them 4 hours of our time. @CodeYourFuture/pd-syllabus-team

BUILD Help and tips on running the project, troubleshooting, git feature branch workflows, merge conflicts help and links - just reiterating what we've already done and linking out, not loads of new content. Please add/remove anything you think @illicitonion

TEST Help with writing tests, links to videos and docs, examples - I've put some miniature examples in following Kent Dodd's advice https://kentcdodds.com/blog/common-mistakes-with-react-testing-library . I don't know if @FridIsar or @carl0FF have time to improve this?

SHIP SUPER BRIEF advice on deployment - Netlify? Stretch to explore other options? What do you think @sztupy ?

I currently have these pulling into individual pages on the product views, but maybe they should be a prep style view. That part I will handle separately. I do need these docs to stay named as they are and I propose all the projects have a little docs folder like this. I know @textbook would appreciate us training our people to pay more attention to provided documentation.

Development on this module project can just go ahead in this repo as a nonblocking improvement. Just don't break the readme links please! @40thieves your opinions, advice, and straight up changes here are treasured. @tomdaly not sure if you are around but would also love your 👀 on this

[kfklein15]

Looking good! Thanks, Sally! I have raised two spin-off stories on the PD board for this.

[tomdaly]

looks great @SallyMcGrath ! docs are clear and concise without being too prescriptive - a good transition to final projects.

one minor suggestion: should the HOW_TO_REVIEW doc be put into the build or ship directories? root level docs are often easy to miss when there's also a docs/ directory

[kfklein15]

@SallyMcGrath , I am looking into re-writing the stories. Questions:

1. Do you want every story to have a User Story OR Background?
2. Acceptance criteria: do you want them written in Gherkin (which means they would substitute the test you have on them). Example Ticket 1
   • Current: Test: The search button should still render on the page.
   • New: Acceptance criteria: GIVEN I am on the Hotel Page WHEN I search a name THEN the page refreshes.
3. Do you want a document with my proposed changes or should I make the changes directly on each ticket? How would you like to approve them.

[SallyMcGrath]

@SallyMcGrath , I am looking into re-writing the stories. Questions:

1. Do you want every story to have a User Story OR Background?

Yes please, but as light and simple as pos. And maybe some of the stretch ones you can leave and have them refine themselves?

2. Acceptance criteria: do you want them written in Gherkin (which means they would substitute the test you have on them). Example Ticket 1

🙏 Yes please if you can - and maybe we can explicitly connect one or two early tickets to tests. I put example tests into the starter project, frex https://github.com/CodeYourFuture/React-Module-Project/blob/main/src/components/Search/Search.test.jsx

We can add a video in https://github.com/CodeYourFuture/React-Module-Project/tree/main/docs/test of converting a GWT to a unit test.

• Current: Test: The search button should still render on the page.
• New: Acceptance criteria: GIVEN I am on the Hotel Page WHEN I search a name THEN the page refreshes.

3. Do you want a document with my proposed changes or should I make the changes directly on each ticket? How would you like to approve them.

Let's say work up 6 or 7 revised tickets in a doc so we can revise and review, and then when we're happy we're all aligned, you go ahead?

Here's all the current tickets in one handy list: https://api.github.com/repos/CodeYourFuture/React-Module-Project/issues?page=1&per_page=100

[kfklein15]

Thanks, Sally, super helpful. Doc with User Story example for us to discuss

[kfklein15]

Suggestion for the Plan session for this, written by @esma-g . Let us know if you have any feedback on it and if you want us to load it against the prep session? Thanks!

[kfklein15]

Are we happy with the Plan session suggestion I mentioned above? If yes, will you load it or do you need us to do it, please?

[SallyMcGrath]

Are we happy with the Plan session suggestion I mentioned above? If yes, will you load it or do you need us to do it, please?

Yep

I looked into this. I revised it with Esma on 16 Jan. I am happy with the changes made in response. I have just ported those changes https://github.com/CodeYourFuture/React-Module-Project/pull/29 and made some minor formatting changes for accessibility.

That's merged as it's already been reviewed and revised. It will show up here

https://curriculum.codeyourfuture.io/react/product/prep/#planning-and-organising-your-team

[SallyMcGrath]

Will move on to User Stories tomoz.

[SallyMcGrath]

@CodeYourFuture/pd-syllabus-team

I exported all the tickets to a google sheet with the CLI

Then I took your work and asked AI to create draft stories for all the tickets using it as a template

Here's the result, which you can edit or change. The formatting is markdown so it can be pasted directly into tickets on github.

https://docs.google.com/spreadsheets/d/1IvadMdu42cEEnhlrsXTGAiy-sHL-Op7Vt1VydcqAY1I/edit?usp=sharing

The original ticket text is next to it for comparison.

I propose the original tickets be retained in the docs as help files for when people get stuck.

[Dedekind561]

@Dedekind561 Review but no merge till React is over