Designed, built, and deployed a community travel blog web application where authenticated users may create, favorite, and filter blog posts, and thereby curate a personal bucket list of activities gathered from word-of-mouth recommendations.
Deployed Link: http://ec2-50-18-30-182.us-west-1.compute.amazonaws.com:3000
Code: https://github.com/carolinepeake/travel-blog.git
Optimized performance by normalizing state using custom Redux selector functions to prevent entire blog feed from re-rendering whenever a post changes.
Wrote React custom hook to upload user selected image files to Cloudinary, eagerly transform the images during upload to proactively maintain fast page performance, and return either an image preview or descriptive error message, enabling the user to resolve any issues before form submission.
Used a MVC application structure to separate concerns, and limit each API to a single entry, facilitating easy refactoring and future scaling.
Wrote useMapBoxAPI custom React hook to render a dynamic autocomplete list of world locations, and thereby reduce code complexity by limiting users’ blog post locations and searched locations to the same list of possible locations.
Used Redux to streamline API calls and manage application state shared among multiple components. I chose to use Redux to practice using the technology, however, a more lightweight application state management tool like Jotai would have likely been sufficient.
Hashed passwords to avoid saving potentially sensitive information.
Configured Webpack to load official Facebook logo from locally saved png file, reducing application load time.
Created a masonry layout using CSS Grid and a JS algorithm to dynamically set each post's height by calculating the number of grid-rows each post should span based on its content’s height.
