My Family and I

Keep your life alive in the hearts of your family.

Comment

What Inspired Me

What inspired me to work on this project was a personal experience. My mom had kept some of my childhood photos, and one day I decided to ask her where they were because I wanted to look through them. Unfortunately, she told me that the photos had been damaged. I think water got into the place where they were stored, and as a result, I lost many of my childhood memories.

Thankfully, there was one photo that I had taken years ago and still have today because it was automatically backed up to Google Photos.

That experience inspired the idea behind "My Family and I." I kept thinking that if there had been a safe place to store those memories digitally, I would still have easy access to them today.

Another inspiration came from moments when you want to ask a family member what they think about something, but for one reason or another, you never get the chance. To solve this, I added a feature called Digital Personality. It is an AI-powered chat that is connected to each family member. It learns from the information, memories, and recordings they choose to save. With their permission, other family members can interact with the AI to ask questions and gain insights into that person's thoughts, experiences, or opinions, even when they are unavailable.

What I Learned

I learned a lot while working on this project.

One of the biggest things I learned was how to integrate AI into a real application that people can actually use. I also learned how Sign in with Google (OAuth) works and how the authentication process connects the user, Google's servers, and my own backend.

I have always been curious about what happens when someone clicks on a subscription plan before they even create an account. I used to wonder how websites remember the plan you selected after they ask you to sign up first.

Through this project, I finally figured it out. I learned how the selected plan can be linked to the user's session, so after they finish signing up, they can continue with the checkout.

I also gained experience building and connecting multiple backend services so they can work together smoothly. This helped me better understand how large web applications are structured.

Overall, this project taught me a lot and gave me valuable hands-on experience. It was such a great learning experience for me.

Challenges I Faced

Some of the challenges I faced while working on this project include:

  • Managing multiple files
  • Designing a system that handles different types of data (photos, memories, chats, AI responses)
  • Finding a suitable payment system due to regional limitations
  • Understanding how subscription systems work when users interact before full registration

How I Built It

I built My Family and I with Next.js using the App Router. This allowed me to build both the frontend and backend in the same project, which made everything easier to manage.

The user interface is built with reusable React components, and I used Context Providers to manage things like the language, theme, and vault state throughout the application.

The backend is divided into different API routes based on what they do, such as authentication, content, social features, AI, and system features. Each API route connects to its own service inside the lib folder, where all the main business logic is handled. This helped me keep the code clean and well organized.

For AI features like the Biographer, Timeline Extraction, and Ai Digital Personality, I kept them in their own API routes and services so they stay separate from the rest of the application and are easier to maintain.

I used Amazon Aurora PostgreSQL on RDS to store the application's data, and I access it through a single db.js file. Media files and secure vault files are stored in AWS S3. For authentication, I integrated Google OAuth, and I used an SMTP provider to send emails.

I structured the whole project so that each layer has its own responsibility:

  • Presentation layer : handles the user interface
  • API layer : handles requests
  • Business logic layer : processes the application's logic
  • Data layer : stores and manages the data

Built With

Share this project:

Updates