{"id":26552050,"url":"https://github.com/mux-mux/blog","last_synced_at":"2026-04-09T12:12:48.061Z","repository":{"id":281539964,"uuid":"940527925","full_name":"mux-mux/blog","owner":"mux-mux","description":"(React mid-level, Next.js Basics) Markdown based Blog [React, Next.js, Next.js MDX, Vercel, Framer Motion, React-feather icons]","archived":false,"fork":false,"pushed_at":"2025-03-17T12:17:40.000Z","size":11544,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T12:42:32.384Z","etag":null,"topics":["framer-motion","next-mdx-remote","nextjs14","react","react-feather","vercel-deployment"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mux-mux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-28T10:33:53.000Z","updated_at":"2025-03-17T12:17:44.000Z","dependencies_parsed_at":"2025-03-09T20:28:48.413Z","dependency_job_id":null,"html_url":"https://github.com/mux-mux/blog","commit_stats":null,"previous_names":["mux-mux/blog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mux-mux%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mux-mux%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mux-mux%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mux-mux%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mux-mux","download_url":"https://codeload.github.com/mux-mux/blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244926827,"owners_count":20533200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framer-motion","next-mdx-remote","nextjs14","react","react-feather","vercel-deployment"],"created_at":"2025-03-22T08:23:25.392Z","updated_at":"2025-12-30T20:45:46.132Z","avatar_url":"https://github.com/mux-mux.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# About This Project\r\n\r\nThis 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.\r\n\r\n## Getting Started\r\n\r\nWe begin with pre-built components and styles, but without functionality. The goal is to bring this project to life.\r\n\r\n## Prerequiremnts\r\n\r\n1️⃣ First, I attempt to solve each task on my own.\u003cbr /\u003e\r\n2️⃣ Then, I review Josh’s approach to see how he would tackle it.\u003cbr /\u003e\r\n3️⃣ Finally, I take notes on what can be improved.\r\n\r\n### Task 1 - update the homepage so that it shows a list of blog posts\r\n\r\n//TODO Iterate over the data read from the file system!\u003cbr /\u003e\r\n**Problem:** `\"fs\" module not found` error when using `setState`\u003cbr /\u003e\r\n**Solution:** Remove `setState` and assign `blogPost` directly to a variable.\r\n\r\n### Task 2 - display the full blog post content when clicking on a post from the homepage\r\n\r\n//TODO for example inside MDXRemote component render /content/javascript-modulo-operator.mdx \u003cbr /\u003e\r\n**Ok:** The `MDXRemote` docs and the `Next.js {params}` lesson were helpful.\r\n\r\n### Task 3 - Adding metadata (`\u003ctitle\u003e` \u0026 `\u003cmeta\u003e` description)\r\n\r\n//TODO Generate metadata for dynamic pages and the homepage, leveraging the _React Cache API_ for optimization\u003cbr /\u003e\r\n**Ok:** The `Next's Metadata API` and `React Cache API` lessons were helpful.\u003cbr /\u003e\r\n**Small improvments:** Move homepage metadata to `layout.js`, append `• ${BLOG_TITLE}` to the title to include the blog name\r\n\r\n### Task 4 - Apply code snippets syntax-highlighting inside blog posts\r\n\r\n//TODO Apply code snippets syntax-highlighting using Bright package\u003cbr /\u003e\r\n**Ok:** The `Bright package` documentation was helpful.\r\n\r\n### Task 5.1 - Rendering embedded components inside mdx file\r\n\r\n//TODO Fix the error when rendering `\u003cDivisionGroupsDemo /\u003e` inside `.mdx` file\u003cbr /\u003e\r\n**Problem:** Do not know how to use custom components inside an `.mdx` file \u003cbr /\u003e\r\n**Solution:** Inside dynamic `[postSlug] page.js` file add lazy loading for `\u003cDivisionGroupsDemo /\u003e` component and pass it to the `\u003cMDXRemote components /\u003e` prop\r\n\r\n### Task 5.2 - Animate circles with Framer Motion\r\n\r\n//TODO Apply **layout animation** for a smooth transition when circles divide into groups\u003cbr /\u003e\r\n**Ok:** The `Layout Animations` lesson was helpful.\u003cbr /\u003e\r\n**Improvments:** apply `LayoutGroup` animation, respect `ReduceMotions` preferences\r\n\r\n### Task 5.3 - Animate Reminder Area circles with Framer Motion\r\n\r\n//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\u003cbr /\u003e\r\n**Ok:** `Marking element IDs` was helpful.\u003cbr /\u003e\r\n**Another approach:** To modify `range` function inputs `(totalInGroup, numOfItems)` to generate an array with apropriate indexes\r\n\r\n### Task 6 - Implement the logic for the CircularColorsDemo component\r\n\r\n//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\u003cbr /\u003e\r\n**Ok:** with create logic. `Side Effects` lesson was helpful.\u003cbr /\u003e\r\n**Problem:** Framer Motion `layout=\"position\"` and `layoutId={index}` are not working in this situation\u003cbr /\u003e\r\n**Solution:** use `useId` hook an mix it with a static text `layoutId=${id}-text` value\u003cbr /\u003e\r\n**Improvments:** Display either the Play or Pause button based on the `animationState`\r\n\r\n### Task 7 - Implement theme toggle functionality\r\n\r\n//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\u003cbr /\u003e\r\n**Ok:** The `Dark Mode` lesson was helpful.\r\n\r\n### Task 8 - Implement RSS feed functionality\r\n\r\n//TODO use the npm `rss` package to generate an RSS feed. Also, utilize `getBlogPostList` to retrieve the list of blog posts\u003cbr /\u003e\r\n**Problem:** \"Cannot use import statement outside a module\" error. Adding `\"type\": \"module\"` leads to multiple other errors\u003cbr /\u003e\r\n**Solution:** Generate the RSS feed dynamically using the `app/rss.xml/route.js` path instead of the `prebuild` script\u003cbr /\u003e\r\n**Small improvments:** Create a `BLOG_DESCRIPTION` constant and reuse it in both metadata and RSS feed generation\r\n\r\n### Task 9 - Implement handling invalid URLs\r\n\r\n// TODO: Create a `not-found.js` file inside the app folder. Refer to the `Next.js docs` for further steps and apply custom styles\u003cbr /\u003e\r\n**Ok:** The `Next.js docs` was helpful.\u003cbr /\u003e\r\n**Small improvments:** Generate `meta tags` for the 404 page, use a try/catch inside the loadBlogPost function to handle not found error\r\n\r\n### Task 10 - Add Suspense logic\r\n\r\n// TODO: Create a `loading.js` file beside the blog post page component. Add spinner inside\u003cbr /\u003e\r\n**Ok:** The `Next.js Suspense docs` and `Motion Transitions docs` were helpful.\u003cbr /\u003e\r\n\r\n### 🎉Myself congratulations! I've completed `Josh W. Comeau's Joy of React` course and finished the final project with additional tasks!🏆 Well done!🥳\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmux-mux%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmux-mux%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmux-mux%2Fblog/lists"}