Inspire.ai

public design board for voting and inspiration
generation outputs
form for design generation
api call spinner

Inspiration

When faced with making a choice without boundaries or constraints, people become indecisive. We felt like a common problem faced by web designers is a lack of ideas when it comes to designing innovative websites. We built the web app in the hopes of inspiring and speeding up the process in designing websites for people that just need a nudge in the right direction.

What it does

A social community platform to help aspiring designers curate the most aesthetic web design outputs generated by AI. Inspire.ai is a web app that helps generate creative web designs of e-commerce websites, blogs, etc. It allows users to choose their favorite AI generated outputs and share them on the platform. Other functionalities include: a dashboard based on the most popular web designs chosen by the community, and a like/dislike button for users’ input.

How we built it

In the backend, we created our own server using express.js in order to make api calls to the openAI endpoint and access it from our frontend. We also used MongoDB as our database in order to save designs and information about them, to be queried later on the dashboard. To access this database in the frontend, we created more routes for our CRUD functionality. More in depth in the database, we created a mongoose schema for the designs, both to simplify the calls and to store the documents in descriptive collections in the database. In the frontend, we used React as our javascript framework. We picked this framework because we all had decent experience using it and it made the reactivity of the website just the way we wanted. We used the fetch api in order to send queries to our server and receive the outputs back in the front end. In terms of design, we went with a very minimalistic idea, with calm colors and the use of appropriate whitespace in order to bring the viewers attention to the correct parts of the screen for the best user experience possible. We added a few micro interactions as well, like the implementation of scaling on hover to really draw the user's eye. On each post in the website's dashboard, users have the options to like or dislike a post and the like counts will be updated in real time on the web page and in the database, thanks to the patch route on our server and the use of react state and the component life cycle.

Challenges we ran into

One of our biggest challenges was finding an innovative product to help solve a commonly faced problem, during the hackathon time frame. Without any constraints to the product, our limitations were endless which often led our team to fluctuate between multiple ideas. We were also forced to make crucial feature tradeoffs for Inspire.ai. This was not a trivial decision since we had to take into consideration the implementation time, the scalability, and functionality for each feature.

Accomplishments that we're proud of

We were proud of our final product given the short time frame. Although our implementation is still to be continued, we have many plans to develop our unfinished features and create a full fledged web application that we think can really make its mark.

What we learned

Making API calls from openAI
Implementing multi-page frontend
Quickly think and develop innovative ideas within a short time constraint
Effectively communicating with each other and adapting to a high pressure environment

What's next for Inspire.ai

The next step for Inspire.ai is to provide more selectable options on the user form and fine-tune the DALL-E model such that it generates more accurate and aesthetic images of web designs. We can further improve our model by providing it with the images that users select (outputs are circled back to inputs), in the form of a feedback loop. As we scale, we would want to further expand the scope of our designs; we want to add more categories, such as logos, to the user form.