Dreamify

Your Personal AI-powered Vision Board Creator

Comment

Inspiration

Reflecting at the end of each year on past actions, objectives, and goals sets the stage for future success. However, I've realized it's tough to stay on track without a clear picture of my goals. That's why vision boards are so great – they are collections of images or objects, either physical or digital, arranged to help manifest goals or visions. Versatile in nature, vision boards can be tailored for personal dreams or professional ambitions, whether they're long-term objectives or annual goals.

However, creating a vision board can be time-consuming, especially in selecting and compiling images that precisely represent each goal. That's why we came up with Dreamify - a platform where you can type in your goals, and it turns them into a picture collage – your own digital vision board, made easy!

What it does

Dreamify is an innovative platform that effortlessly turns your goals and aspirations into a dynamic, personalized vision board. By inputting your textual goals, Dreamify utilizes advanced AI algorithms to generate a collage of images that visually represent your objectives.

  • AI-Generated Variations: First off, the AI creates four different versions of your vision board. You pick the one you like the most, and then the AI fine-tunes it, making things like your favorite images bigger.
  • Categorized Goals: We’ve got categories like Education, Finance, and Health to help organize your dreams.
  • Personal Dashboard: Dreamify doesn’t just stop at visualizing. It suggests actionable steps and tracks your monthly progress, encouraging you to keep pushing towards your goals. Maintain daily streaks by checking in at least once a day. And yes, there are push notifications to keep you on track.
  • Reference Boards: New to this? No problem! We’ve got inspiration boards to get your creative juices flowing.

How we built it

The design process began with Figma ([https://bit.ly/figma-dreamify]), where we meticulously crafted the mockups. This stage was crucial in visualizing the user experience, ensuring that the interface was not only aesthetically pleasing but also intuitive and user-friendly.

We chose React for the frontend development, leveraging its robust and flexible capabilities to create a seamless and responsive user interface. Tailwind CSS was our choice for styling, given its utility-first approach that allowed us to rapidly design and customize the layout with efficiency and precision.

For the backend, ExpressJs was utilized for simplifying the process of developing a scalable and capable web application. The database for the website is hosted on MongoDB as such non-SQL database could be more convenient to manage for the team. We also used OpenAI API for the creating and processing of images for the dashboard.

Challenges we ran into

During the development of Dreamify, we faced a variety of challenges, from hosting issues on CodeSandbox to internal project management hurdles:

Hosting and Linking on CodeSandbox: Integrating multiple pages hosted on CodeSandbox was a significant challenge. Our application's landing page, log in page, and dashboard were each hosted on separate URLs (Landing Page ([https://zv2cwq-1234.csb.app/]), Log In Page ([https://ygng8n-1234.csb.app/]) , and Dashboard ([https://lqgc7l-1234.csb.app/])). Seamlessly linking these pages and ensuring consistent navigation was a complex task due to the segmented nature of hosting on this platform.

Time Constraints and Design Implementation: We also grappled with time constraints that limited our ability to fully transform our initial mockups into finalized designs. This meant prioritizing essential features and functionalities while maintaining a high standard of user experience and interface design.

Frontend and Backend Integration: Another significant hurdle was bridging the gap between frontend and backend development. Ensuring that both parts of our application communicated effectively and worked in harmony was crucial for a smooth user experience but proved to be challenging due to the complexities involved in integrating various technologies and frameworks.

Maintaining Design and Functional Consistency: With our application components hosted on different URLs, maintaining a consistent design and functionality across these platforms was a challenge. This required additional effort to ensure that each part of the application not only functioned well on its own but also as an integral component of the whole system.

Testing and Debugging in a Segmented Environment: The nature of separate hosting significantly complicated our testing and debugging processes. We had to adopt new strategies and tools to effectively test and debug the application flow across different hosted environments.

These challenges, while daunting, provided us with valuable insights into the complexities of web application development, especially in an online hosting environment like CodeSandbox. They also highlighted the importance of effective project management and the need for a flexible approach to design and development.

Accomplishments that we're proud of

We successfully launched a fully functional landing page and personal dashboard

What we learned

Working in a diverse team, we learned the importance of collaboration and effective communication. Each team member brought unique skills and perspectives, which was crucial for tackling different aspects of the project, from frontend development to backend integration and machine learning.

We learned how to efficiently divide tasks among team members. By breaking down the project into manageable parts, we ensured that each component, whether it was frontend design, backend functionality, or AI implementation, received the attention it needed.

One of our key learnings was how to balance the complexities of frontend design with backend development and the intricacies of machine learning algorithms. This helped us create a product that was not only aesthetically pleasing but also robust and intelligent.

However, perhaps the most critical lesson was about feature prioritization. We initially envisioned numerous features for Dreamify, but we realized that focusing on too many can dilute the core value of the product. This led us to identify and concentrate on the main features that would truly benefit our users, ensuring that Dreamify remains user-friendly and effective.

What's next for Dreamify

As we continue to enhance Dreamify, our focus is not only on new features but also on refining the user experience. Here's what's in store:

  1. Improved User Interface: We're dedicated to making the frontend more responsive, ensuring that Dreamify is smooth, fast, and enjoyable to use on any device.
  2. Enhanced Button Styling: Interactivity is key, so we're adding new styling features like hover effects to buttons, making the interface more engaging and intuitive.
  3. Light and Dark Modes: Perfecting these modes to suit your style at any time of the day.
  4. Personalized Touch: Upgrading the ability to upload your own images for more personalized vision boards.
  5. Customize Your Vibe: Expanding options for customizing the main color or mood of your board.
  6. Social Sharing Enhancements: Making it easier and more fun to share your vision boards on social media.
  7. Community Engagement: Developing more interactive features to engage with the Dreamify community.
  8. Privacy Options: Adding more privacy controls for Pro users and enhancing public boards for free users.
  9. Subtle Branding: Refining the Dreamify watermark for free version users.
  10. Intuitive Chatbot Assistant: Offering more personalized advice and detailed progress summaries.
  11. Invite Friends Feature: Streamlining the process of inviting friends to join the Dreamify experience.
  12. Advanced Save Options: Enhancing organization and inspiration management, inspired by Pinterest.
  13. Personalized Image Selection: Improving the AI for more accurate image suggestions.
  14. Smarter Notifications: Fine-tuning our notification system for better responsiveness and less intrusiveness.

These updates and improvements are all about making Dreamify not just a tool, but an essential part of your daily routine in visualizing and achieving your goals. We're committed to continuous improvement, ensuring that every aspect of Dreamify enhances your journey towards realizing your dreams.

Authors:

Stephanie (Tien) N. | Tech Lead, PM, Front-end Dev

An T. | Design Lead

Long T. | Back-end Dev

Khanh D. | ML/AI Engineer

Built With

Share this project:

Updates