Code Monkey home page Code Monkey logo

demo-day-project's Introduction

LianxiLab: A Fullstack, web app to practice and keep Chinese Characters

In college I majored in Chinese Language. I found the language fun and enjoyable to learn. However, when learning Chinese, there are hundreds of characters you may not be able to keep track of and learn in your lifetime. This application allows users to keep a “library” or dictionary of Chinese characters, their definition, and pronunciation that the user can record- for the characters they have already learned. Users will also get to study and learn new characters that will be given to them randomly upon daily login, allowing them to track their progress each day. Lianxi 练习(lee-an shee) means “to practice” in Chinese (mandarin).

Check out the Live Site Here: https://lianxilib-fullstack.herokuapp.com/

firs

sec

thir

How It's Made:

Tech used: HTML, CSS, JavaScript, Node.js, Express, MongoDB, EJS, Passport, Chinese Character Web API, MediaStream Recording API

Designing this project was fun - I am always excited when it comes to CSS and UI, so I created a simple, design that was readable, easy to navigate, all with a clean look. The CSS design was created by myself. I used client-side Javascript to create the Media Stream API function for users to record the character pronounciation - which was found on MDN.I also used client-side Javascriptfor my "practice" page where I connected a Chinese Character Web API to gather all existing Chinese Characters, Definitions and Pinyin - along with a function to randomize the way they are displayed in HTML. On the server side, I used EJS as my templating language to manipulate the DOM and post the Chinese Character information in our MongoDB database, for the profile and Study sections as well.

Future Optimizations:

I would love to ease the user experience when inputing a new Character into their library. Ideally, the user will be able to record their pronounciation, review the sound - and the audio file should autofill into the file input so users do not have to download and then submit the audio file in the input. Additionally, I would want to incorporate a Chinese writing to character recognition function that other Chinese websites I have used include (see Line Dictionary) for users to write a character with their mouse and it will recognize the character, and spit out the definition or autofill in the input.

Lessons Learned:

Building this project reminded me just how far I have come as a Software Engineer. This has solidified my knowldge of the backend and how everything is connected, along with continuous improvement of my design and ability to present my work to an audience. This project is a living example of my past and present experience aligning and working together, cohesively.

demo-day-project's People

Contributors

emilycastillox avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.