https://github.com/mux-mux/blog
(React mid-level, Next.js Basics) Markdown based Blog [React, Next.js, Next.js MDX, Vercel, Framer Motion, React-feather icons]
https://github.com/mux-mux/blog
framer-motion next-mdx-remote nextjs14 react react-feather vercel-deployment
Last synced: 18 days ago
JSON representation
(React mid-level, Next.js Basics) Markdown based Blog [React, Next.js, Next.js MDX, Vercel, Framer Motion, React-feather icons]
- Host: GitHub
- URL: https://github.com/mux-mux/blog
- Owner: mux-mux
- License: other
- Created: 2025-02-28T10:33:53.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-17T12:17:40.000Z (about 1 year ago)
- Last Synced: 2025-03-17T12:42:32.384Z (about 1 year ago)
- Topics: framer-motion, next-mdx-remote, nextjs14, react, react-feather, vercel-deployment
- Language: JavaScript
- Homepage:
- Size: 11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# About This Project
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.
## Getting Started
We begin with pre-built components and styles, but without functionality. The goal is to bring this project to life.
## Prerequiremnts
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.
### Task 1 - update the homepage so that it shows a list of blog posts
//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.
### Task 2 - display the full blog post content when clicking on a post from the homepage
//TODO for example inside MDXRemote component render /content/javascript-modulo-operator.mdx
**Ok:** The `MDXRemote` docs and the `Next.js {params}` lesson were helpful.
### Task 3 - Adding metadata (`` & `` description)
//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
### Task 4 - Apply code snippets syntax-highlighting inside blog posts
//TODO Apply code snippets syntax-highlighting using Bright package
**Ok:** The `Bright package` documentation was helpful.
### Task 5.1 - Rendering embedded components inside mdx file
//TODO Fix the error when rendering `` 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 `` component and pass it to the `` prop
### Task 5.2 - Animate circles with Framer Motion
//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
### Task 5.3 - Animate Reminder Area circles with Framer Motion
//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
### Task 6 - Implement the logic for the CircularColorsDemo component
//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`
### Task 7 - Implement theme toggle functionality
//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.
### Task 8 - Implement RSS feed functionality
//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
### Task 9 - Implement handling invalid URLs
// 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
### Task 10 - Add Suspense logic
// TODO: Create a `loading.js` file beside the blog post page component. Add spinner inside
**Ok:** The `Next.js Suspense docs` and `Motion Transitions docs` were helpful.
### 🎉Myself congratulations! I've completed `Josh W. Comeau's Joy of React` course and finished the final project with additional tasks!🏆 Well done!🥳