This project is part of the "Essential CSS Concepts" module from the Frontend Career Path course on Scrimba.
JiffyPic simulates a social media platform where users can view posts with photos, comments, and likes. Semantic HTML, interactive CSS effects, and JavaScript were used to dynamically render the posts.
✅ Create the first post.
✅ Use semantic HTML.
✅ Add hover effects to the icons.
✅ Use JavaScript to render out all three posts.
✅ Increase the likes when double clicking the post.
✅ Fixed-position menu bar.
✅ Ability to view comments.
✅ Image upload button.
✅ Secret dark mode (double click profile pic).
✅ Progressive Web App (PWA).
🔳 Importing constants from JS files: I used import to manage icons and data from separate files, keeping the code modular and maintainable.
🔳 CSS filter declaration: After exploring various methods to change icon colors (e.g. when someone 'likes' a photo) I chose the filter property with calculated values to achieve this effect.
🔳 Using overlays: I wanted to emphasize the comment modal (as well as removing interactivity from the main app while it was open). To achieve this, I created a semi-transparent overlay between the modal and the main app page.
🎯 Ability to make new posts: Would involve Google Firebase integration, a new post UI
🎯 Ability to add comments: Let users add and like comments
🎯 Authentication: Allow users to log in
🗃️ Frontend Career Path by Scrimba