Just like the description says. Besides use of semantic tags and some basic Reach stuff. I didn't go above and beyond with a11y yet.

Although I think we should wait until the app is closer to being done

Aside from #8 (which is to have a reset feature). We need more products in our database. I added three things for video games already so anyone can follow that format. Feel free to add more fields if you need. Just retroactively add them to the other products too.

We also need to have a config file that exports an object of all the enum possibilities for fields so that way the sidebar filtering can be built

This feature might be nice to have but might not. We could have comments for each of the products. Maybe we only do it if it leads to the types of components or lessons that would be good for the course lessons

While developing, we're going to wreck the database. Also students might wreck it and want to reset. So it would be nice if we had a npm run db-reset or something and had a separate db file which is used to seed the real db file.

I can take this one on

I forget what @ryanflorence 's special significance for why he wanted this, but it was a big part in choosing the "browsing products" theme of this app. In any case, all the UI needs to be made. Right now we're using a strategy if having the URL query string be the "state source of truth" for things like the text search box. I think this might be the same. All you have to do is send query variables to the URL and the BrowseProducts page takes those and passes them along to json-server's API. So anything that works in the json-server docs for query strings should work for us

Mock App for Fundamentals

This issue is just meant to be a high-level ongoing conversation about the progress of developing the curriculum.

For anyone working on the fundamentals mock app code directly, here are some docs regarding how the code is setup and organized

Here's a list of things that still need to be done on the app

App Features.

Not all of these have to be done, this list is just ideas

• A "view similar products" feature for when we're on a product profile page - #3
• Ratings for the product (star ratings) - #4
• Reach UI combo box for Github username in signup - #5
• A11y everywhere. I didn't do much of this while quickly developing - #6
• Finish the checkout process - #7
• Database starting point "seed" - #8
• Stylize the primary header dropdown (reach ui) menu when clicking avatar - #9
• <Quantity /> needs to handle input of non-numbers - #10
• Pagination for browsing products - #11
• Sidebar filtering for product browsing - #12
• Initial Database - #13

Also, feel free to keep any personal notes in your clone at /notes.md. It's ignored in .gitignore

Bug

npm start will only compile the full app (ie: either YesterTech or ProjectPlanner) to localhost:3000

Environment:

Windows 10 with latest updates. Either latest Chrome or latest Edge browser. Latest node.js LTS with latest npm.

Steps to reproduce:

1. enter command npm start
2. make a choice leading to compile.

or: enter npm start core-v1 1 and enter 1 for 'exercise'
or: enter npm start core-v2 1 and enter 1 for 'exercise'

The browse products page is ready for pagination from an API standpoint already, but we just need to create the actual page links -- we know what page we're on and total results. We're going to do 10 results per page (it's hardcoded somewhere else)

This includes lots of things:

• The whole checkout page
• We need to have a billing and shipping form - this would be good for a lesson on controlled/uncontrolled state we used to do in our old curriculum
• Maybe a mock credit card form with a specific number that succeeds and one that fails the submission
• If we want to take it far, we can even clear the cart, deduct inventory from the database, and then even have UI for showing "out of stock"

First off, I'm not familiar with JavaScript so maybe this obvious but it took me a long time to figure this out. Thought I'd open an issue in case someone else sees this. Might be good to add a note to the README.

I had node installed from Homebrew. This currently installs Node 16. One of the dependencies of this project, node-sass, isn't compatible with Node 16.

After awhile, I figured out how to workaround this:

1. Uninstall Homebrew's Node: brew uninstall node
2. Install NVM. I did brew install nvm and then followed the instructions to add it to my shell.
3. Install Node 15: nvm install v15 && nvm use v15
4. After restarting your shell, you can run node -v to confirm you have Node 15 and then run npm i like normal.

Currently the signup form asks for a github username and it's just an input field. We could use the Reach Combobox to get fuzzy search results. This might not enhance the app experience too much and who knows if there's a lesson we can use this component for. But it would show off more of Reach

Low priority unless someone loves it and wants to take it on

We need to have star ratings for the products. Having a Ratings component would be great for one of the lessons because Michael and Ryan really like their old curriculum which had start ratings.

Be sure to add this one to modules/workshop for lesson re-use. And also should use the icons from react-icons (already installed)

This is a feature I definitely want to do because there's a great learning opportunity to show when a component changes it's props but doesn't unmount and then remount. Image the useEffect for the product profile page and how we always teach about cleanup for unmounted components, but this is a great feature to show "What if the product id prop changes"

The layout of the product profile page already makes tiles for a component called ProductTile. We need to design that component and then query for similar products to fill in the content

macOS Catalina 10.15.4
NodeJS 10.15.3
NPM: 6.4.1
Yarn: 1.22.4

Steps taken:
cloned repo, fetched the ts-support branch to follow along videos using typescript. However running the command

yarn start lecture

followed by any prompt always opens up the entire complete application and never the corresponding lecture or exercise.

Swapping to master branch, the alias issue does not exist.

Steps I've tried to alleviate.
Stepped through with the debugger, I've found that the app starts up in YesterTech/entry.js with all aliases setup.
Removed node_modules and reinstalled with npm
Removed node_modules and reinstalled with yarn
Removed the package-locks/yarn.lock files and reinstalled.

I get the default class page (screenshot below) when I try to load lesson 4 lecture 1 and lesson 4 lecture 2. Shouldn't this load something else?

These options:

[2] lecture-1-data-fetching
[3] lecture-2-layout-effects

Example output

Running Lesson: 04-side-effects/lecture-2-layout-effects
Go to: http://localhost:3000

Screenshot of localhost:3000

The Reach UI dropdown used when you click on the avatar in the primary header needs to be stylized

Bug

On Windows npm start from cmd or powershell will only compile the full app (ie: either YesterTech or ProjectPlanner) to localhost:3000.

Expected result:

It compiles the chosen exercise to localhost:3000

Environment:

Windows 10 with latest updates. Either latest Chrome or latest Edge browser. Latest node.js LTS with latest npm.

Note: I do not have WSL[2] installed as suggested in the Readme.md

Steps to reproduce:

1. open powershell on windows in project directory
2. enter command npm start
3. make choices in terminal that lead to webpack compile of an exercise
4. navigate to localhost:3000 in web browser

or: enter npm start core-v1 1 and enter 1 for 'exercise'
or: enter npm start core-v2 1 and enter 1 for 'exercise'

Currently we have two bash scripts that won't work for PowerShell users.

• in the package.json postinstall script we do a bash command that copies seed-db.json to db.json
• If json-server doesn't shut down for any reason, the user won't be able to npm start because the still-open json-server will be occupying port 3333. So we have an error message that suggests running our npm run kill-db, which is a bash script.

For each of these, we need a solution that works for Windows (PowerShell specifically). From what I understand after talking to some Windows users who do lots of JS work, VSCode uses PowerShell by default unless configured otherwise. Also I'm being told that PowerShell users can do all the NPM/Git stuff that bash does so for those who are good at PowerShell and prefer it, it might be difficult to ask them to use something else.

I think we can use: https://github.com/charlesguse/run-script-os
The basic idea is we'd have package.json scripts that look like this:

"kill-db": "...bash script here"
"kill-db:windows": "...powershell script here"

I just can't test it out since I don't have windows. Maybe @cassidoo can?

Currently the user can type any value as the quantity. Needs to be limited to numbers and saved as an actual number type, not numeric string

Search Input field is missing id={searchId} in react_full-app\SearchVacationsForm.tsx