CoNeX

Our mockup UX design
Our mockup UX design
Our mockup UX design
Our mockup UI design

Inspiration

One of our members, Ava, was preparing for an important pitch (Hult Prize Finals) and she wanted to prepare for some potential questions that the judges might ask after the pitch during Q&A.

So she asked ChatGPT: "Hey AI, based on this pitch script and the judging criteria, can you generate some potential Q&As?"

So the AI returned a lot of what could be turned into a flashcard, for example:

Q. What is your target market size? 
A. - Market A 
    - Market B 
    - Market C, etc.

Now she had a bunch of flashcards ready, but she knew that her mind would still go blank when she gets asked these questions on stage because of the terrible stage freight and social anxiety she has.

So she thought, 'hmmm, I wish there was an app that listens to the judges and pull up the most relevant flashcard at the top, so I can just quickly glance and answer them"...

And we did some more research and found out this app can be incredibly useful for many different use cases. It could be useful for pitching, business meeting, learning, memorizing, reminding, research, exploring new ideas, brainstorming, so much more. Could tailor it for people with social anxiety to help them come up with appropriate things to say in certain social context. People with hearing and speech difficulty as well.

What it does

CoNex is an AI-powered interface designed to transform any text or speech into easily digestible, connectable visuals, through live flashcard generation, voice-to-text, and real-time AI analysis. Whether in a business meeting, a university lecture, or daily social interaction, CoNeX ensures that vital information is readily accessible.

How we built it

We used React and Next.js for frontend, AWS and MySQL for backend, and OpenAI ChatGPT 3.5 Turbo model for the AI analysis.

Checkpoint 1: Friday @ 9PM We’ve recruited 2 new members and settled the team roles. We’ve briefly brainstormed our ideas and voted on which idea to work on. We’ve also discussed what each one of us wants to get out of this experience: something cool to add to our portfolio!

Friday @ 11PM:

We’ve narrowed down ideas and we have come up with a clear use case. We then came up with a brief UX flow diagram.

Saturday @ 9AM: We met at the hackathon site, and began setting up the front end and the server.

We're cutting out lots of features and narrowing it down to 1 simple core feature for our working demo.

The core feature we decided to implement is the AI flashcard generator. It comes with 3 additional features: 1.AI-driven sorting of the flashcards based on the current conversation, 2.voice recognition, 3.a drawer enabling searching/organizing these flashcards.

Checkpoint 2: Saturday @ 3PM We're designing UI/UX based on our core feature and implementing the demo for our pitch. We're also working on our script. Our backend team is setting up the server and DB for our app on our backend repo. (Frontend is on a separate repo) We asked the Unihack organisers for review on our pitch script and devpost and received feedback.

Saturday @ 6:30PM: We got OpenAI API working on our local server!

Some prompt engineering:

8PM:

We managed to run a required API (OpenA) on our backend server. We have a partially completed front end. One is working on routing, one is wiWe now need to connect the two together and test run. We also have a draft for our pitch and dev post.

Checkpoint 3: 9PM:

We now have our backend working on the cloud server (AWS). Team has now dispersed and is now all working independently.

10:30pm: Prompting using a url is now available!:

http://ec2-52-62-214-60.ap-southeast-2.compute.amazonaws.com/openai?prompt="Your question here"

4am: Front end is now ready for testing!

10:30am: Team starts gathering again at the hackathon site. We’re now testing, connecting our frontend with backend, and adding security measures.

12:30PM: All team is here. We ran into several issues:

Our cloud server randomly shutdown:

http://ec2-52-62-214-60.ap-southeast-2.compute.amazonaws.com refused to connect.

CORS policy violation:

As we began trying to connect our front end with the back end, we realised that without a proper GET

localhost/:1 Access to fetch at ‘'http://ec2-52-62-214-60.ap-southeast-2.compute.amazonaws.com/openai?prompt=asdasd' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Our google account for AWS hosting got disabled by Google because we violated some Google policy.

http://ec2-52-62-214-60.ap-southeast-2.compute.amazonaws.com/openai?prompt=%22Your%20question%20here%22

We also reazlied we should probably disable the AWS hosting in case we drain out the wallet of our poor member who used his own credit card… we’re using the $60 AWS coupon we receieved

1PM: Thankfully we were able to run it back up again, but we still don’t know why it shut down - we’re checking our logs but we can’t find the issue.

1:30PM: We fixed the CORS policy violation issue by first downloading npm package for cors on our backed server and enabling all CORS features - we know that this is not safe and we need to implement the safety measures ASAP.

2:00PM Authentication worked, so now our connection is secure. We realised we were unable to deliver the frontend functionality that we planned in time (Dragging and Dropping the flashcards) so we decided to keep it simple.

We are all feeling pretty pressed at this point because we only have about 3 hours left and our app is still not connected.

We began preparing for the presentation even though the app isn’t quite ready to showcase.

3:00PM 2 hours left, everyone’s on fire. We’re rushing so that the presentation just includes a bunch of memes

... (To be cont'd)

Challenges we ran into

We ran into quite a few unexpected twists and turns.

Starting strong, we quickly formed a team, picked a cool project idea for an AI-powered flashcard generator, and got cracking on making it a reality. The vibe was all about learning and adding something awesome to our portfolios.

As we dove into development, reality hit us with its best shot. We encountered a server shutdown that left us scratching our heads and scrambling to get things back online. Then, the dreaded CORS policy error popped up, throwing a wrench in our plans to seamlessly connect our front and back ends. To top it off, we had a minor panic moment when our AWS hosting got disabled, making us rethink our hosting game plan to save our teammate’s wallet.

We eventually fixed the CORS problem with a quick npm package solution and got our server running again, still a bit mystified about the shutdown cause. With the clock ticking, we had to scale back some of our frontend ambitions, focusing on getting the essentials right.

In the homestretch, with just a few hours left, the pressure was intense. We decided to keep our presentation light and filled with memes, hoping to leave a memorable impression.

Accomplishments that we're proud of

Amidst the challenges and caffeine-fueled coding sessions (some of us running on only 3-hours sleep after a midnight shift 💀), we hit some pretty awesome milestones that we're super proud of. One of our major wins was getting the OpenAI API up and running on our local server because that’s where all the cool features we dreamed of started to seem possible. Taking our project to the cloud was another moment of pride (despite some hiccups).

But perhaps what we're most proud of is how we handled the unexpected. When faced with technical roadblocks like the CORS policy issue or our AWS hiccup, we didn't just throw in the towel. We banded together, troubleshooted, and found solutions, proving that we could tackle both the coding and the crisis management side of tech development.

What we learned

Scaling back our project to focus on the core feature with just 3 hours remaining was a tough call, but it taught us the value of simplicity and the importance of having a working demo. It was a lesson in prioritization and focus that we'll take with us beyond this hackathon.

All in all, we're walking away with not just a project we're proud of, but a ton of new skills, including what CORS policies are, the importance of communication and early planning of the simplest core feature (and adhering to the Google/AWS/OpenAI policies), that less is more, and a tons more lessons learned. The best lesson is, that if we all come together as a team to create something cool under any circumstances, it doesn’t matter whether we make it in time.

What's next for CoNeX

We’re going to continue working on CoNeX; the initial vision of our app with all the ambitious features that we cut down for the sake of delivering in 48 hours in this hackathon. (The CoNeX that we’re presenting here is just a small feature of what we envisioned at the beginning) Everyone on our team is dedicated to the idea, we know that it can potentially be the next Notion or Obsidian, the matter is how, and we will figure it out together just as we did in this hackathon