Overview
AlmostHangry is a React app I developed to share what I have been eating and where I have been eating. Based in Kansas City, I use this platform as a digital space to bring the joy of food exploration to a wider audience. I refuse to use Instagram (but wanted to use an app like it,) and I knew using a website builder and CMS platform like Webflow would have costly up keep costs (much like this portfolio website.) I coded my app in the code editor replit, deployed using Netlify, and used the Firebase API for my user authentication (for just myself) database and media storage.
View my GitHub Repo
Visit AlmostHangry
Purpose
The primary goal of the app was to make it easy for me to share photos and captions and for others to view them. This app is in its infancy, and I have plans to add additional features such as commenting, subscribing, video support, and more.
Core Features
Creating an app as simple as this has many more important features than one might think. Here are just a few:
- User Authentication:
- The blog features a secure login system, allowing only myself to create and manage my posts.
- Responsive Timeline:
- Visitors can browse through a responsive timeline displaying food posts. The layout adjusts seamlessly between list and grid views, providing an optimal viewing experience across different devices.
- Create and Upload Posts:
- Authenticated users can create new posts, including multiple images and captions. The image upload process supports progress tracking, keeping users informed about their uploads. Images are compressed upon upload ensuring the site loads quickly after a post has been created.
- Detailed Post View:
- Each post has a dedicated detailed view where images are stacked vertically, showcasing the visual journey of the culinary experience. Captions and user information are prominently displayed.
- Firebase Integration:
- I use Firebase for user authentication, data storage, and image handling, ensuring data reliability and scalability for the blog.
Technologies Used
- Frontend: The blog is built using React.js, a powerful JavaScript framework that enhances the user interface with high interactivity and performance.
- Backend Services: Firebase services manage user authentication, database storage, and image uploading.
- Routing: React Router manages the navigation within the blog, making transitions smooth and efficient.
- Styling: CSS3 ensures that the blog is visually appealing and responsive, catering to users on various devices.
- File Handling: React Dropzone handles image uploads, making it easy for users to drag and drop images for their posts.
Conclusion
AlmostHangry is a testament to my dedication to food blogging and my ability to blend culinary passion with modern web development. By creating an engaging platform that is both user-friendly and visually captivating, I effectively share my gastronomic journey with a broad audience while fostering a community of fellow food enthusiasts. This blog highlights my skills in both design and development and reflects my commitment to creating meaningful and enjoyable digital experiences.
