- Cardify is a dynamic and customizable article preview card generator. With Cardify, you can create preview cards for articles by selecting themes, avatars, and filling out content through a multistep form.
- Built using React.js and SCSS, this project allows you to generate personalized cards with calculated read time, category, and more
- The Sass files organization is based on the 7-1 pattern
- Multistep Form: Input the article's category, title, author's name, and content in a step-by-step flow.
- Themes & Avatars: Choose from 7 color themes and 4 unique avatar patterns to customize your card.
- Dynamic Card Preview: Cards display:
- Selected theme and avatar
- Chosen category
- Article title
- Author's name
- Automatically calculated read time
- Current date
- A preview of the article content, shortened to the first 25 words.
- Responsive Design: Built with container queries for a smooth, responsive experience across devices.
- Customization: Further improvements coming soon, including theme and avatar previews, as well as customizable images.
- Navigate through the multistep form to input your article's information (category, title, author, and content).
- Choose a theme and avatar to personalize your article card.
- Generate card, which includes the calculated read time and a snippet of the article content - it will appear below the form.
- Pure CSS Custom Styled Radio Buttons - great article by Stephanie Eckles explaining how to add custom styling to a radio button
- CSS Background Pattern Generator - one in a buldle of super useful tools that gets you gradients for different fun patterns
- The Ultimate Guide to React Click Outside Modal to Close - awesome guide that helped me build the modal
- How to Perform Form Validation in React - very detailed article that helped me with form validation
- Inspired by Kevin Powell's newsletter on making your frontend projects stand out.
- I used this great tool created by Fatih Telis to generate patterns for avatars.
- Built with React.js and SCSS.