Summary
AlmostHangry is a React app I developed to share what I have been eating and where I have been eating.
View my GitHub Repo
Visit AlmostHangry
Process
Develop App Framework → Iterate HTML & CSS in Code Editor → Connect Firebase API → Publish with Netlify
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 learning more about different coding languages and developer workflows. I am passionate about being a designer/developer that can bridge the gap between design and development.
