Carina Avram

Birthday Reminder Web Application

Displays the personalized dashboard for logged-in users, with access to birthday management features. Form interface allowing users to add new birthdays with details like name, date, and gift ideas. Profile settings interface, allowing users to update personal details such as name, email and password. Edit form for updating information for an existing birthday, including date, name and gift ideas. Settings page where users customize email reminders, selecting notification preferences. Displays a list of all added birthdays, with options for editing or updating individual entries. Shows the homepage interface accessible without login, showcasing introductory features and app overview. Visit the App Features List User Registration Users can create an account to access the app. User Login Registered users can log in to their accounts securely. Birthday Management Add, edit, or remove birthdays with ease. Profile Update Update personal profile information anytime. Notification Settings Customize notification preferences, including reminder timing and email notifications. Technologies Used Next.js Used as the primary framework for building the Birthday Reminder App, Next.js enables efficient server-side rendering, which boosts performance and SEO. It also supports the app’s dynamic routes for different user accounts and the birthdays they manage. ionicons-v5_logos React As the foundation for the app’s front end, React provides a responsive and interactive user interface. It powers components like the birthday list, profile editor, and notification settings, making the UI highly dynamic and user-friendly. mongodb MongoDB MongoDB serves as the app’s database, storing user accounts, birthday entries, and notification preferences. This NoSQL database structure allows for flexible data storage, essential for managing user-generated birthday lists. Mongoose Mongoose is used as an Object Data Modeling (ODM) library to handle interactions with MongoDB. It simplifies database queries and enforces schema models, ensuring data integrity and efficient access to user and birthday data. Node.js Node.js is the runtime environment used for server-side operations, handling API requests for tasks like adding or editing birthdays, user authentication, and sending notification emails. NextAuth Provides secure and customizable authentication for the Birthday Reminder App, allowing users to register, log in, and manage their sessions seamlessly. SendGrid SendGrid is integrated for email notifications, enabling automated birthday reminders. Based on the user’s notification settings, SendGrid triggers timely email reminders, making the app more useful and reliable. Vercel The app is hosted on Vercel, which ensures fast deployment and scalability. Vercel’s platform also supports Next.js optimally, allowing for quick loading times and global availability. UI Gallery: Inside the Birthday Reminder App Home Page (Guest View) Shows the homepage interface accessible without login, showcasing introductory features and app overview. Home Page (User Logged In) Displays the personalized dashboard for logged-in users, with access to birthday management features. Birthday List Overview Displays a list of all added birthdays, with options for editing or updating individual entries. Add Birthday Form Form interface allowing users to add new birthdays with details like name, date, and gift ideas. Update Birthday Details Edit form for updating information for an existing birthday, including date, name and gift ideas. User Profile Management Profile settings interface, allowing users to update personal details such as name, email and password. Email Notification Settings Settings page where users customize email reminders, selecting notification preferences.

Birthday Reminder Web Application Read More »

Leftover Heroes

Hover or tap on an image to view it fully. Home Page Browse available restaurant deals on surplus food, ready to make a difference. Restaurant List View participating restaurants offering discounted meals to reduce food waste. Restaurant Detail Explore meal options from a selected restaurant with detailed item descriptions. Impact Tracker Track the positive impact of your purchases, including meals saved from waste and donations made to charity causes over time. Cart Review your selected items before purchase, supporting charity and saving on meals. Confirm Payment Securely complete your purchase, knowing your choice contributes to a positive cause. See the Prototype Features List Food Deals from Surplus Purchase meals from participating restaurants at reduced prices. Charity Donations Proceeds from purchases go to a cause of the user’s choice. User-Friendly Interface Easily browse available food deals and make purchases. Impactful Metrics See how much food has been saved and donations generated in real-time. Design Thinking Phases Conceptualization “Leftover Heroes” is a mobile application designed to reduce food waste and support charitable causes. Every day, restaurants have excess food that, if not sold, often goes to waste. This app enables users to buy this food at a discounted rate at the end of the day. In addition to offering affordable meals, the revenue generated is donated to various charitable organizations, empowering users to make a positive social impact with their purchases. Problem In the United States, around 22 to 33 billion pounds of food is wasted annually, yet millions of people struggle with food insecurity. At the same time, many consumers are looking for ways to contribute to societal causes but often face financial or time constraints. Restaurants are also looking for ways to reduce waste and manage surplus more effectively. Proposed Solution “Leftover Heroes” connects users to participating restaurants with excess food, allowing them to purchase meals at a reduced price. Users can view a list of restaurants and the meals available for the day. After selecting and buying the food, the amount is donated to a cause of their choice, such as cancer research or environmental sustainability. This app reduces food waste while also providing individuals with an easy way to support charitable causes in a financially sustainable manner. Effectiveness “Leftover Heroes” serves a dual purpose by addressing both food waste and societal needs. It appeals to budget-conscious consumers seeking meal deals and also attracts those motivated by social responsibility. The app’s ease of use, combined with its tangible impact on communities, makes it an effective solution for a significant global issue. Problem Statement Every year, restaurants throw away tons of perfectly edible food, contributing to environmental waste and missed opportunities to support those in need. At the same time, individuals eager to make a difference are often unsure how to effectively contribute without straining their own resources. Leftover Heroes provides a platform where users can purchase surplus food at a discount, with proceeds going to charity. This reduces food waste and supports causes that matter. Visual Design Assets Empathy Map – Understanding Leftover Heroes Users User Persona – Profile of a Leftover Heroes Advocate User Journey – From Discovering Leftover Food Deals to Making an Impact   A visualization of user emotions, motivations, and pain points specific to reducing food waste and supporting charity, helping me design with empathy for their needs. A comprehensive profile of the typical Leftover Heroes user, detailing goals like accessing affordable meals and contributing to social causes, as well as challenges in achieving these goals. A mapped journey of the user’s experience in Leftover Heroes, capturing the steps from finding discounted meals to selecting a cause for their donation, illustrating their path to making a positive impact. Low-Fidelity & High-Fidelity Wireframes Low-Fidelity WireframesInitial Concept Sketches Low-Fidelity Wireframes Our first drafts focused on essential user flows, laying out the core functions like restaurant discovery, food selection, and donation options. These early sketches set the foundation for a simple, impact-driven app experience. High-Fidelity WireframesPolished, Interactive Design High-Fidelity Wireframes The refined design brings the concept to life with intuitive layouts, thoughtful color schemes, and enhanced visual clarity. High-fidelity wireframes provide a near-final representation, ensuring the app is engaging, accessible, and purpose-driven.

Leftover Heroes Read More »