Pickabox

Our Project Banner
Figma Prototype
Prototype 3rd Iteration
MVP (final iteration)

Inspiration

Our inspiration came from the theory that Wikipedia overloads its users with infinitely many paragraphs and content. We wanted to find a solution where users can feel comfortable but curious looking at informational topics.

What it does

The application scrapes data from Wikipedia through its API and generates content in a user-friendly format with additional options to read more and dive deep.

How we built it

We implemented Create-react-app to create a client web server, Figma for UI design, Wikipedia API to scrape the data from the platform, Wikipedia, and Google Cloud to call those APIs. Regarding cross-origin resource sharing (CORS), we also implemented a cors-anywhere proxy server where it handles CORS for the webserver. To include, we documented our code so that our codebase is intuitively readable and understood by judges who come across our repository.

Challenges we ran into

We are intermediate to proficient developers, but ReactJS is fairly new to us, and using that for our web server is new. There were also many technical challenges. Notably, starting off with the unconventional react boilerplate instead of using Create-React-App. The attempt to use the wrong boilerplate took away about 6 hours out of our Hackathon experience. We also ran into CORS and realized after an hour of debugging that we needed to implement a proxy server to handle that for us, as mentioned previously. We also had challenges in the front end where there are stylistic issues but swiftly resolved by our front end team contacting mentors at SacHacks for help. Nonetheless, our team resolved our challenges rather swiftly because we asked for help and showed humility when doing so.

Accomplishments that we're proud of

We developed, implemented, designed, playtested, and deployed a 4-language stack including JS, Python, HTML, CSS, Google Cloud Platform, Netlify, Figma, Postman, and Git. Prior to the hackathon, we were researching topics about Wikipedia and organization, showing our passion for our product that we care for education, readability, and friendliness to our potential young and old audience.

What we learned

Our team has experienced a moderate learning curve this past weekend, notably, creating a web server with ReactJS. Solving bugs to significantly questioning user design to asking questions when we need help-all things shaped our experience and learning during this hackathon. To include, we are even an interdisciplinary team where Kris is an Economics major who had limited experience with Figma, but still resulting in a significant, well-questioned, and well-rounded design.

What's next for Pickabox

What is potentially next for Pickabox is the explicit implementation of search functionality, foreign language support, and even initiating a mobile application development. In addition, the development team of Pickabox intends that the platform remains online and deployed to the public, regardless of the project is going into another active development iteration with or without the same team.

Conclusion

What is most important is that we had fun as a team creating our product because we spent 36 hours curating our ideas and platform and hanging out with one another over lengthy Discord calls.

Official Team Members, to re-iterate: Harry Zhu, Abraham Wong, and Kristof Gazso

Built With

Submitted to

SacHacks III
- Winner Best Design (With code)

Created by

I implemented the front end on layout, styling, animations and integrations from wiki API with React . This is my first time using React and bootstrap, learned a lot from different mentors.

Abraham Wong
I greatly supported the development of the front end using web technologies like React. I helped introduced API fetch calls to layout data from Wikipedia, and supported main design of the home page.

Harry Zhu
I did the design of the UI and UX and iterated it based on feedback from friends and professionals. I implemented Google Cloud Functions and set up the business logic for querying, filtering, reformatting from the Wikipedia API. I also set up CI/CD and hosting.

Kristof Gazso