Wedbud

• 

  Wireframe of website

Inspiration

One of our members was scrolling through TikTok when they found that many people were sharing "wedding hacks" with their audiences to save money on certain decorations. Those creators would share different ways to decorate their weddings through cheaper DIY projects instead of working with a local business so that couples could save some money on their special day. This then inspired us to create a website that compiles common wedding decor to compare prices between outsourcing the item to having the soon-to-be-married couple buy the materials and doing it themselves.

What it does

Wedbud is a website that takes into consideration the time until the users' wedding and the budget that the users have allocated toward decor. From there, it splits the type of decor into 5 main categories that the users can choose from to narrow down what they are looking for. Once entered into the list of objects, users can see the difference in cost between the DIY project and outsourcing the item to a local business. They can also see how much time they are estimated to allocate to the DIY project so they can check in their calendars whether they have the time to complete the project before their wedding. Two progress bars for time and budget can be seen at the top of the webpage in the navigation bar so users can have a quick view of how much time/money they have available before adding an item to their running balance. At the top right corner, couples can select the interlocking wedding band to get a more detailed overview of what items they have included in their plan to determine exactly how much time and how much money they have left.

How we built it

We created the website in react.js, using the react-router to handle page navigation. For style and design, we used the Material UI styling library as well as the ChartJS library to make a dashboard for the implementation of the user data. After deciding on our project, we established the key aspects of the project we wanted to highlight and listed out our priorities with the most important one being the time and budget calculator. Throughout the development process, we emphasized a collaborative approach, bouncing problems off of each other to deal with issues as they arise. As our individual components become functional, we merge them together, clean up the code, and submit!

Challenges we ran into

Working on web development was a new experience for our team so, in the beginning, we struggled a lot with getting our grips on the mechanics of Javascript and CSS. In particular, styling was a constant struggle-- from getting our components into just the right spot to fine-tuning the color to the specifications of our Figma design.

Accomplishments that we're proud of

An accomplishment that we are proud of was being able to create a Figma mockup with interaction as a base for the creation of our product. As we continued to code our website, we grew proud of the website as we were able to achieve most of the formatting and functionality of the website including creating a two-page column page based on data stored locally in a JSON file that displays various calculations and graphs, linking pages together on Javascript, creating a functional sidebar, and inserting images into the webpage as 3/4 of our team had never used Javascript before.

What we learned

On the surface, we learned a lot about web development including how to style and position elements on a webpage, how to use state hooks, and oneClicks to create a dynamic experience. On the backend of things, we also learned how to handle merge conflicts from different pulling and pushing to GitHub as we went from working on our separate parts to combining and linking the pages together.

What's next for Wedbud

We would hopefully like to implement a function in the future to allow users to upload a picture of the item they would like to DIY and output a possible list of materials and costs (time and money) they would need. This would then allow users to be able to properly plan out everything they would possibly need for their wedding instead of just using the preset options we give them. Furthermore, we would like to supply options for users to consider eco-friendly decor they can use for their weddings to help reduce the amount of landfill trash they produce from decorations. Additionally, we would like to add links to the DIY projects to YouTube videos and DIY websites for users to learn how to create the projects rather than just blindly guessing based on a picture or having to search themselves.

Built With

• figma
• javascript
• material-ui
• react