Landing page with login information
Course entry page so that professors can enter courses they would like picture notes for.
Content feed with information about courses and relevant images
Specific content description for the content feed
Posting confirmation page for mobile interface
Landing page for mobile
Content posting form for mobile
As students who sometime miss notes in class or want to remind ourselves and classmates about the context of content on the whiteboard or notes, we decided to build a note-sharing platform. We aim to deliver an innovative product that embodies collaboration and knowledge transfer.
What it does
For professors , the web platform provides an admin panel that allows faculty members to add courses and review notes. It also provides extra write and edit permissions to moderate content.
For students, the mobile application provides a simple interface that allows straightforward posting of course materials onto the website. Furthermore, the web platform provides a student course feed that displays all of the updates for all courses that a student is taking.
How we built it
For the mobile application, we used React Native to develop the user interface and communicate with the back-end API. One of our team members iterated through many different designs to arrive at an interface that was both intuitive and effective.
For the backend API, our team used Python Flask to create endpoints to handle POST and GET requests from clients on the mobile and web interfaces. In order to persist data regarding courses, sections, professors, and notes, our team used MySQL.
Challenges we ran into
- Issues with React Native syntax errors that led to hours of debugging
- Difficulty with configuring Firebase to perform data querying in an efficient manner for our purposes
- An initial design that was opaque and needed more clarity
- The physical and mental limitations resulting from a lack of sleep
Accomplishments that we're proud of
- We built both a fully working backend API and mobile application
- We built the major use case pages for the web interface
- Each of our team members owned a significant part of the project: front-end mobile, front-end web, backend API, database design
- The product we built will potentially be of great help to students at our campus and hopefully others
What we learned
- Always discuss the system design of a project before diving into the code
- Get adequate rest because it allows for more productivity
- How to use new technologies such as ngrok, MySQL, React Native, etc.
What's next for PicNote
- Provide more extensive searching, filtering, and sorting for the content
- Redesign the backend API so that it can scale and be more modular for extensive use cases
- Add a mobile newsfeed for all information related to courses
- Natural language processing and OCR to extract key information about content