This is a solution to the Personal blog challenge on Frontend Mentor.
Users should be able to:
- Navigate to all pages by clicking links or using their keyboard
- Read all articles
- Select their color theme
- Submit their email to subscribe to the newsletter
- Receive an error message when the newsletter form is submitted if:
- The Email Address field is empty
- The Email Address is not formatted correctly
- Receive a success message if submitted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: solution URL
- Live Site URL: live site URL
- JavaScript (JS)
- React
- React Router DOM
- useContext - Manages global state in React
- Tailwind CSS
- Formik
- Yup
- React Markdown - Renders Markdown content in React
- rehype-highlight - Adds syntax highlighting to Markdown code blocks
- rehype-raw - Allows raw HTML inside Markdown
- rehype-sanitize - Ensures safe HTML by sanitizing Markdown content
- remark-gfm - Enables GitHub Flavored Markdown (tables, strikethrough, etc.)
- Vite
- Vercel
In this project, I learned:
- useContext for managing global state without prop drilling.
- React Markdown and its "black magic" ✨ with plugins like
rehype-highlight,rehype-raw, andremark-gfmto render and enhance Markdown content in React.
I am currently learning Sass to improve my CSS workflow and enhance styling efficiency in future projects.
- useContext Explained Simply - This video helped me understand and simplify the concept of
useContextin React. Highly recommended for anyone learning state management!
- Frontend Mentor - @Shaimaa01
- Twitter - @shaimaa385863