This project was created as part of the Joy of React course by Josh W. Comeau. It was built to practice and apply key React.js and Next.js concepts.
We begin with pre-built components and styles, but without functionality. The goal is to bring this project to life.
1️⃣ First, I attempt to solve each task on my own.
2️⃣ Then, I review Josh’s approach to see how he would tackle it.
3️⃣ Finally, I take notes on what can be improved.
//TODO Iterate over the data read from the file system!
Problem: "fs" module not found error when using setState
Solution: Remove setState and assign blogPost directly to a variable.
//TODO for example inside MDXRemote component render /content/javascript-modulo-operator.mdx
Ok: The MDXRemote docs and the Next.js {params} lesson were helpful.
//TODO Generate metadata for dynamic pages and the homepage, leveraging the React Cache API for optimization
Ok: The Next's Metadata API and React Cache API lessons were helpful.
Small improvments: Move homepage metadata to layout.js, append • ${BLOG_TITLE} to the title to include the blog name
//TODO Apply code snippets syntax-highlighting using Bright package
Ok: The Bright package documentation was helpful.
//TODO Fix the error when rendering <DivisionGroupsDemo /> inside .mdx file
Problem: Do not know how to use custom components inside an .mdx file
Solution: Inside dynamic [postSlug] page.js file add lazy loading for <DivisionGroupsDemo /> component and pass it to the <MDXRemote components /> prop
//TODO Apply layout animation for a smooth transition when circles divide into groups
Ok: The Layout Animations lesson was helpful.
Improvments: apply LayoutGroup animation, respect ReduceMotions preferences
//TODO Uncomment another instance of DivisionGroupDemo and animate elements to smoothly transition into the Reminder Area, ensuring new elements are positioned correctly to the right of existing ones
Ok: Marking element IDs was helpful.
Another approach: To modify range function inputs (totalInGroup, numOfItems) to generate an array with apropriate indexes
//TODO Implement color-switching logic and create a player with Play and Reset Animation buttons. Additionally, apply Framer Motion animations to the selected element rectangle
Ok: with create logic. Side Effects lesson was helpful.
Problem: Framer Motion layout="position" and layoutId={index} are not working in this situation
Solution: use useId hook an mix it with a static text layoutId=${id}-text value
Improvments: Display either the Play or Pause button based on the animationState
//TODO Inside layout.js file we have a hardcoded light theme. Our goal is to implement theme toggle feature that switches themes when clicking on the Sun/Moon icon
Ok: The Dark Mode lesson was helpful.
//TODO use the npm rss package to generate an RSS feed. Also, utilize getBlogPostList to retrieve the list of blog posts
Problem: "Cannot use import statement outside a module" error. Adding "type": "module" leads to multiple other errors
Solution: Generate the RSS feed dynamically using the app/rss.xml/route.js path instead of the prebuild script
Small improvments: Create a BLOG_DESCRIPTION constant and reuse it in both metadata and RSS feed generation
// TODO: Create a not-found.js file inside the app folder. Refer to the Next.js docs for further steps and apply custom styles
Ok: The Next.js docs was helpful.
Small improvments: Generate meta tags for the 404 page, use a try/catch inside the loadBlogPost function to handle not found error