New JS6 challenges format

[ggwadera]

How about changing the JS6 challenges so the students build a c0d3-like prototype application with lessons, challenges, submissions and what else.

This way people can get a feel of developing a real project piece by piece, and at the same time start understanding the c0d3 stack so they can more easily start to contribute after finishing the curriculum if they want to.

The challenges don't necessarily have to be done using Next.js (our framework), it can be kept simple with only express/apollo server, but we could start introducing typescript and maybe databases here too.

Ideas for challenges:

• Build the API for lessons, challenges, etc... (using GraphQL/Apollo Server)
• User creation and authentication
• Challenges submissions and reviews
• Display current user progress, showing lessons/challenges completed
• Recreate Discord widget (for external API communication)
• Start with Javascript and then convert into Typescript
• Maybe include something about using a database too, with Prisma.
• Testing (Unit/Integration)

And what else? :)

[kondanna]

i like the typescript part of it.

this would help people who completed JS6 to more smoothly transition into c0d3-app , otherwise it feels kind of like a big jump

[ggwadera]

I think designing the challenges to make each one seem like if you were sending a PR here would be great.

Each submission should be incrementing upon the previous one. This can also help the review process, since every submission should just contain the new feature requested, instead of sending everything for each challenge.

[hwong0305]

You could design something like this:

• Take a public URL, and make the subset into a GraphQL API
• Using React, create a web application to display the data from the GraphQL above
• Connect the backend and frontend from the previous two exercise
• Convert previous application to typescript.

[ggwadera]

What I don't like about the current JS6 challenges:

• The flow of the challenges seems a bit weird to me.
  • You start by coding a graphql API with the pokemons and lessons.
  • Then you go into React to remake the stars and kanban challenge with it.
  • Next one you finally use the API you did before while refactoring the previous challenge to be built with webpack.
  • Then there's that totally unrelated React Native with Expo challenge in the middle of all this for some reason.
  • Then you go back to the pokemon lessons thing, but now with Apollo Client.
  • And then ending with the SocketIo chatroom, which isn't bad, but I feel like it could be integrated better with the rest of them.
• Because of the broken flow, reviewing these challenges becomes a chore as the submissions sometimes end up with huge sizes.
• The challenge descriptions sometimes are a little vague, I think this is something that can be improved, we could write something like user stories.
• Not having a little React tutorial might not be too helpful for students, since React has a very different way of thinking about building pages by using components with levels of responsibility (also hooks and everything else), differently from front-end development only with JS and HTML. Some people, like myself, can have a difficult start because of this.
• The contrast between what is used in the curriculum vs what we use here in the app can make it difficult for someone to start contributing. For example as @kondanna said, typescript is a hurdle for someone only accustomed to javascript.

What I like:

• By not having a lesson, it forces you to go look up the documentation and learn more about each component you're adding to the project. This a nice skill to have as a developer, you need to be able figure things out on your own.
• Having to manually install and configure React + Babel + Webpack is useful knowledge, even though most people now prefer the convenience of create-react-app, knowing what's happening underneath can be helpful.

[exalt90]

"For example as @kondanna said, typescript is a hurdle for someone only accostumed to javascript."

^^^

I think you mean "accustomed."

[hwong0305]

I think companies will still use webpack. Since we're in 2021, we could refactor to using parcel or snowpack that way they don't have to configure anything.

[exalt90]

I think we should change it.

[JasirZaeem]

Making an app and the challenges being akin to PRs making parts of the app at a time is a good idea. For that though maybe there could also be a way to see the rest of the app somehow, e.g when challenge 1 is merged, and challenge 2 is submitted, we will only be able to see the changed parts when reviewing, maybe students can be asked to make a separate repo for js6 on github and push their code there which will teach them github as well.
Create react app is commonly used now but having to use webpack was a nice thing to learn, so maybe webpack/vite/parcel or something like that can still be introduced, maybe not in the challenges but in a new lesson for js6 like there is for previous lessons.
Adding typescript would be very good as it is a good experience to work with and increasing in industry usage.
We can add something about testing additionally maybe as a lesson and/or challenge

[ggwadera]

there could also be a way to see the rest of the app somehow

Agreed, this is a very valid concern. Though I'm still not sure if it would be better to have a copy of the submissions on Github, or if we should try to improve the current submission/review system to make the experience better.

We can add something about testing

Yes, testing would be great too, specially React components and DOM testing. Maybe we could start by providing requirements and some premade tests, akin to TDD, and ask the student to develop following the requirements and have all the tests pass. The next challenges the student can then write their own tests.

[JasirZaeem]

or if we should try to improve the current submission/review system to make the experience better.

Having the functionality to be able to view rest of the app through the submission and review system would be ideal, putting it on GitHub was just a suggestion for a temporary workaround until that is implemented :)

[Ulisseus]

I enjoyed pokemon challenges. If anything they could be expanded upon with 'add typescript to pokemon search'. And remaking Kanban showed the power of React state management/data flow.

Remaking/updating new discord component could be a fun challenge though.

[JasirZaeem]

Pokemon lessons was already kind of like c0d3, maybe that can all be combined and fleshed out, kanban board could be a feature of the pokemon app itself and a way to introduce students to useReducer hook

[anso3]

You can also do a hybrid approach. Keep the current system and have a web app version to beta test it.
The web app option would be something like this. Must 7 use out of 10 of this tech stack [TS,REACT,GQL,ETC] + any other restrictions.

1. Submit idea / Pick idea from pre-approved list.
2. Outline - How the app will flow-db schemas - what tech it would use - features and how they work.
3. Front end with html / css /js with filler data .
4. Implement back end
5. Connect the two
6. Features / take criticism from others.
7. Fix any issues.

Anyone with real world experience could make it look like something at a job.

[songz]

I created an issue specifically to tackle the typescript challenge: garageScript/curriculum#372