This is a Vocabulary Builder app that is built with React, Tailwind CSS, and HTML. It is designed to enhance user vocabulary in a seamless and engaging way. This app is built as a personal project to practice React and Tailwind CSS. It is currently a front-end only app using local storage to store the data but will be updated to a full-stack app that use MongoDB in the future.
The inspiration behind this project came from my own experiences as someone whose first language is not English and also my husband, who is currently learning English. We both experienced the difficulty in expanding our English vocabulary due to the lack of engaging and customizable tools available. Hence, I felt compelled to create an vocabulary app that offers a built-in dictionary but also grants user the ability to customize their learning journey.
Existing vocabulary-building tools often follow a rigid, one-size-fits-all approach, offering a predefined list of words that may not suit learners of various proficiency levels. Additionally, these tools typically lack dynamic features for customization, particularly the ability for users to associate images with words. This feature is especially valuable for individuals with dyslexia, for whom visual aids play a crucial role in learning.
Furthermore, conventional tools struggle to deliver engaging learning experiences like flashcards or quizzes tailored to vocabulary acquisition. While there are plenty of flashcard apps available, they often lack a dedicated built-in dictionary for seamless learning.
Screen.Recording.2023-09-09.at.11.08.42.AM.mov
Since this app is using the freemium plan of WordsAPI, the number of requests per day is limited. If you are interested in this app, please email me at tiffanychan1999614@gmail.com to get the live demo link.
- HTML 5
- React JS
- Figma
- Tailwind CSS
- React Router
- Redux
- REST API
- create-react-app
Clone the project
git clone https://github.com/TiffanyChan614/Vocabulary-Builder.gitGo to the project directory
cd Vocabulary-Builder/vocabularybuilderInstall dependencies
npm installStart the server
npm run startThis project depends on the following packages:
classnames(version ^2.3.2): A JavaScript utility for conditionally joining classNames together.he(version ^1.2.0): A robust HTML entity encoder/decoder.react(version ^18.2.0): A JavaScript library for building user interfaces.react-dom(version ^18.2.0): A package for working with the DOM in React applications.
This project also has the following development dependencies:
@types/react(version ^18.0.37): TypeScript definitions for the React library.@types/react-dom(version ^18.0.11): TypeScript definitions for the react-dom package.@vitejs/plugin-react(version ^4.0.0): A Vite plugin for React development.eslint(version ^8.38.0): A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.eslint-plugin-react(version ^7.32.2): An ESLint plugin for React-specific linting rules.eslint-plugin-react-hooks(version ^4.6.0): An ESLint plugin for enforcing rules of Hooks in React applications.eslint-plugin-react-refresh(version ^0.3.4): An ESLint plugin for react-refresh.vite(version ^4.4.2): A frontend tooling platform that provides faster and leaner development for modern web projects.
-
Built-in Dictionary: Users can search for words directly within the application, providing quick access to definitions and information.
-
Dynamic Word Form: Customize word information and add it to a personal journal for future review. This feature enables users to tailor the content to their learning preferences.
-
Image API Integration: Utilizes a built-in image API to retrieve related images for visual association with words. Users can also upload their own images to associate with specific words.
-
Voice Pronunciation: Provides voice pronunciation for words, allowing users to learn the correct pronunciation.
-
Word of the Day: Displays a new word each day, allowing users to learn new words every day.
-
Part of Speech Filters: Filter words based on their part of speech, allowing users to focus on specific categories for targeted learning.
-
Show Details: Users can choose to show or hide word details, providing a clean and simple interface for learning.
-
Sort Journal Words: Users have the ability to sort their journal words, providing an organized and efficient way to review and manage their vocabulary.
-
Persistent Filter, Show Details and Sort Settings: Filter, show details, and sort settings persist across pages, ensuring that user preferences are maintained throughout their learning journey.
-
Review Modes:
- Flashcards: Engage in a flashcard-based review mode for efficient and effective learning.
- Quiz Mode: Test your knowledge with a dynamic quiz mode that includes various question types.
-
Smart Review Algorithm: Utilizes an algorithm that intelligently selects words for review. It prioritizes words with the lowest scores (indicating greater difficulty) and those with the earliest review dates.
-
Diverse Question Types: Offers a variety of question types to keep the review process engaging and effective, including multiple choice that asks about the definition, synonym, antonym of a word, and fill-in-the-blank questions that show either the definition or one of the images associated with the word and user has to type in the word.
-
Fully Responsive: The app is fully responsive and can be used on mobile devices.
- User Authentication: Users can create an account and log in to access their data from any device.
- MongoDB Integration: Store user data in a database to allow for data persistence across devices.
- User Profile: Users can view their profile and see their progress.
- Performance Tracking: Users can view their performance and progress over time.