Create and study flashcard decks on StudyDecks! We store your decks locally on your machine for easy access without the hassle of logging in.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
I have a passion for learning languages, especially French. In the future, I'd like to build a full-fledged language-learning app, and I've taken this opportunity during my front-end development journey to build a web-app to both showcase my skills, as well as practice building functionality that I'll use in my future projects.
Creation of a Deck, Studying it, and Resetting user data:
Tech: HTML, SCSS, JavaScript, Webpack
Design: MVC, Observer, Single Page Application
HTML:
HTML is dynamically rendered with Javascript and focuses on using semantic elements to comply with Web Content Accessibility Guidelines.
SCSS:
Responsive design without media queries. Mixins and modules were used to follow the DRY principle and reduce file sizes. I used Andy Bell's CSS Reset to reduce browser inconsistencies.
Javascript:
I used the WebStorage API to store user decks locally on their device. For form validation I implemented the Constraint Validation API to display custom error messages for each form input. Upon successful submission of the form, I convert the input values into a data object using the FormData API and send it to the model to create a Deck object. Additionally, I used a function from the date-fns library to ensure that the chosen due-date for the deck is in the future.
Resetting user data in local storage:
Webpack
I utilized the Webpack Dev Server for better efficiency when building my project. I also configured the loaders to be able to bundle all assets into a single .js file.
Design Pattern
In this Single Page Application, I used the Model-View-Controller design pattern as the foundation for the project, and implemented the Observer pattern to update other parts of the page when there is new data to display.
The View updating the screen via the Observer:
This site uses zero media queries. Instead, I used other SCSS techniques such as rem units and functions like clamp() and min() to give the site natural responsiveness.
Responsiveness without media queries:
This project I implemented techniques to write cleaner code I learned from "Clean Code" by Robert Martin. I also implemented the Observer Pattern for the first time within a Model-View-Controller framework. Finally, I utilized WebStorage, Constraint Validation, and Form Data APIs in addition to the data-fns external library to add more complexity to the application.
Hunter Yeago - hyeago@gmail.com