Inspiration

All of our team members are in college and we enjoy doing computer related projects together. When we saw the prompt for the hackathon, the first thing we had in mind was to address the education gap we noticed and experienced in the United States. All of us were once scared to utilize websites such as Stack Overflow because we feat others might look down on us for asking “dumb questions”. That is why we wanted to create a website that is similar to Stack Overflow but less intimidating. We want to create a website where it can be accessed by everyone. It is a platform where everyone can ask questions and browse through questions looking for the answer they seek.

What it does

Our website keeps track of UserID and includes many web pages that are designed to help the user ask and learn questions. The home page is the first page after sign in and log in; It provides a variety of recommended posts for the user to choose. The user can either click on the post he wants to see, or the user has other options such as creating a post, viewing a personal profile, or searching for a particular post.

How we built it

We used typescript and react for the front end of the website because for it's modularity and customizability. Next.JS framework is used for routing for our application, and for our deployment we tried our Vercel. Our backend uses Firebases, it's purpose is to authenticate user Login and as a mean to store data.

Challenges we ran into

Integration Hell

We had two members working on the UI/UX and front-end design and two members working on the back-end using firebase. Yet, the two teams process were different, since the team working on the back-end needs to learn and research about firebase functionailty.

In the end, we only have limited time to connect this two part of the project. Integration hell is real. It took much longer for us to integrate the functionailty than we expected.

Big ambition, small time span.

During the initial stage of brain-storming, we came up with a lot of functions for the final product. Most ideas were interesting on paper but it is too hard or takes too long to implement.

On our figma design, we want everything to show on a question post: the username, how many people liked the post, how many people commented the post, editing the post, deleting the post. Yet, we have to cut them off to fit into the limited time we have.

Accomplishments that we're proud of

The UI/UX design we had on figma was great. We were trying to use bold monochrome color and giantic text, and they worked fairly well.

Other than the UI/UX design, we were all trying to use language/framework that was unfamiliar to us.

For the front-end, most of our team members had experience in node.js and react.js. Therefore, this time we decided to tackle Next.js using typescript with Sass. For the back-end, we decided to use Google's firebase instead of normal SQL that we were familiar with.

Initially, a lot of chaos occurred:

  • We did not know how to passing in props into components without the TypeScript IDE screaming at us.
  • We did not know how to connect Firebase with Next.js using their library.
  • We did not know why in Sass the

    tag always have a huge margin the interupts everything on our page.

Later on in the process, we were able to answer each others' techniqual questions. As one person spend hours on one question, we were able to learn from each others experience to move forward faster.

What we learned

Limiting the scope of the project from the initial stage of planning.

It is usually hard to estimate the hours we are going spend on one specific functionality, especially before we start working. This hackathon experience is extremly valuable to us since we now have a rough estimation of what we can achieve within two days. With this knowledge, we can better prepare for the projects and hackathons in the future.

What's next for InfoShare

For this project we're unable to incorporate backend effectively with the frontend. Since we were not familiar with firebase , as a result we're unable to find a place for database within our project. Our next step would be to learn the framework and the firebase structure in order to expand the capability of the application.

Built With

Share this project:

Updates