Productivi-Day | Devpost

Website Logo

Inspiration

At times, individuals may not recognize their bad habits, leading to an impact on their daily productivity. We want to correct common bad habits shared by everyone, but are challenging to overcome in order to boost productivity among individuals.

What it does

This website accepts the user's daily routine, suggest remedies to their bad habits, and creates a recommended/more productive version of their schedule.

How we built it

Our website involves a Javascript-based backend and with Tailwind CSS frontend hosted by Vercel. We delegated our team for two working on each end and created both ends mostly separately. We finally connected the ends and created Productivi-Day!

Challenges we ran into

Back-end: implementing the OpenAI API with specific prompts, ensuring a similar response structure was maintained despite potential changes in user input, & avoided rate-limiting. For this, we primarily used Node.js and deployed on Vercel.

Front-end: We ensured a seamless user experience using Figma to design an intuitive UI, and using React & Tailwind CSS to properly implement it. We stored large amounts of data using useStates, and created a dynamic webpage despite having no prior experience with any of these tools.

Overall: Connecting the frontend to backend on languages none of us were familiar with was a bit of a struggle, but ultimately we were able to pull it off.

Accomplishments that we're proud of

We are extremely proud of the growth we've had in such short time. Aside from the project, our personal developments in web dev have been rewarding. Going from practically zero web development experience to creating a finalized product, we are very happy that we were able to create a functioning product.

What we learned

-The basics of web development -React, Javascript, Tailwind CSS -API implementation (OpenAI API) -Git repositories, git branching, git merging -Website deployment

What's next for Productivi-day

Creating more features and a cleaner calendar interface.

Built With

Submitted to

IrvineHacks 2024

Created by

I worked on the mockup of how the website would look. I also worked on the front end side, using tailwind css to create the interface.

Brandon Sun
I worked mostly on the front-end and connecting it to the back-end. The front-end design was created with HTML, TailwindCSS, and React and then connected to the back-end with JavaScript. Overall, it was a really fun and enjoyable experience to work with others and learn new languages/frameworks!

Benjamin Clement Sheeh
I worked on the back-end. It was my first time using any of the tools that were used such as node.js, openai api, react, and a lot more. It was tough as it was all new, but overall a good learning experience.

Arthur Dmitriyenko
I primarily worked on the back-end and integrating it with the front-end. This required me to use/understand React, Node.js, Vercel, and Tailwind CSS. It was my first time working with these tools, as well as with Git, so I'm particularly proud at the product our team was able to create.

enricoappiani Appiani