Inspiration
As language learners, some challenges faced along the way were often focused around vocabulary and the different attributes/meanings a word had. Existing dictionary applications fell short of our unique needs, especially catered to different languages. For example, French words have gendered properties and different conjugations based on gender of number. Although all dictionaries have this, they were presented in ways that didn't prioritize the information we needed right away. As a result, we decided to create a customizable dictionary: NoteWordy!
What it does
NoteWordy acts like a pocket dictionary of sorts. It allows you to group noteworthy words of a certain language based on arbitrary categories (for example, "Bio" or "Fun French Words"), in folders called "Dictionaries". Here, you're welcome to add in your personal definitions (in whichever way that helps you remember best!), categorize the words (for example, noun, verb, or adjective), as well as mark important properties associated with the word (feminine or masculine? what about conjugations or how it's pluralized?). This is also an excellent place to record translations if the language of your dictionary is that of a language you're learning!
How I built it
It would make most sense for NoteWordy to be an app, something you can download to your phone and bring with you! As a result, we chose React Native as our framework to allow easy access for users from all OS'. Our backend is built using Express/Node.js with MongoDB as our database of choice. Keeping our database on the cloud just made more sense! Our design process was done via Figma as it is a free, easy to use service that allowed sharing amongst our team members.
Challenges I ran into
Some of the biggest challenges we faced definition had to do with the design and overall userflow of NoteWordy. We wanted to make it unique from other dictionary apps with its customizable dictionaries and definitions, but also use an intuitive, efficient, and accessible UI for maximum user satisfaction. Especially starting from just sketches, it was hard to visualize the end product. As a result, our journey went from low-fidelity prototypes until finally reaching an acceptable higher-fidelity prototype that we present here. In terms of technical challenges, creating what was designed in code was definitely a hurdle. As new users of React Native, there was a learning curve and adjustment period necessary to pick up the new framework. Adding the backend services were also difficult and full integration with the MongoDB cloud database will be perfected in future iterations.
Accomplishments that I'm proud of
Something our team is especially proud of is picking up a new framework: React Native. Since this was our first attempt at a mobile app, it took a while to pick up the hang of things and, while still beginners, we feel more confidence with setting up basic layouts and basic components as well as working towards a better understanding of interactive elements. Another significant accomplishment came from the design aspect. As a first-time designer in a hackathon setting, it was particularly challenging to deal with the time crunch. We're very proud of how much we were able to complete having so little time and starting from scratch including a complete wireframe of our first design iteration!
What I learned
Again, as newbies to React Native, learning how the mobile development cycle works as well as connecting it to a backend/database to store real user data was one of the biggest learning experiences. Some specific details include learning to work with flexboxes and our first front-end experience trying to translate design into reality.
What's next for NoteWordy
There are next steps in all categories: app functionality/features, backend work, improved front-end/designs, and technical testing including edge cases. We plan to continue with integrating the backend as, at this stage, it is not in a functional state. Features in the future include user accounts to allow to users to access their dictionaries from different devices. Another area is setting up an effective business model to allow our idea to truly thrive on the market!
Log in or sign up for Devpost to join the conversation.