Next January I'll be teaching in a full-stack master's program.

I'm super excited.

My focus will be on web development class. While it must cover a wide overview of the front-end development it's also intended to be focused on React.

Today I checked the calendar and... I had a mini freak-out moment. I need to prepare all the course materials, structure of the subject, the code examples and the final exam.

My intention is to focus on practice. To code in public, then, prepare some exercises so they can continue coding. My plan is to work on a single project throughout the entire 4-week course; so they may watch it growing from the ground-up.

Week 1 the wide overview of the front-end development and start the project as a static page. HTML and CSS. Then we'll introduce js. No framework, just plain old javascript:

const button = document.getElementById('blabla'); 
button.addEventListener('click', () => {
  /* listener */
});

Week 2: Introduce why we use frameworks. The "framework wars". And finally focus on React as i was asked by the organization. JSX, components, project organization, loops etc.

function MyComponent({ foo }) {
  return <>...</>;
}

...

<MyComponent foo='goo'/> 

Week 3: Hooks. State management. Third party API. Custom hooks. Reducers and Context.

function MyComponent({}) {
  const [foo, setFoo] = useState();
  const { navigate } = useRouter();
  const { foos } = useCustomHook();

Week 4: Ecosystem. Typescript. useSwr(). Next.js. Who is relevant out there. Vercel. Highlight relevant tech influencers.

Now, I need project ideas they can work on over those 4 weeks. I'm aware that the typical boot-camp project is a Pokédex: free API for fetching data, it demands a model, and building features like listing cards and detail view for each Pokémon... it's near-perfect project tbh.

I asked ChatGPT for additional projects. It replies:

• Recipe finder
• Weather forecast dashboard
• News aggregator
• Movie listing
• GitHub repository explorer

I don't know, what do you think.

Which project would you like to build if you would attend my class?

Cover image created by leonardo.ai; prompt: «Renaissance-era professor in a steampunk-style classroom, meticulously preparing a class lecture on a massive whiteboard adorned with intricate, mechanical details.»; 3D Animation-Syle

Thanks for reading 💛.