WordPedia

This is a learning app to improve the vocabulary.

_{Created by Amit Pal}

Demo

Social login: It has Facebook login for the user registration
Online word search: Word definition can be searched and bookmarked once after user register him/herself
Bookmarking words for future use: Bookmarked word can be removed. Though an accidental delete operation can be reverted within 3 seconds
Learn and memorize word by playing Quiz: Enabling quiz mode, the user will be prompted with a notification containing word from the bookmarked word list at every 3rd hour from 8AM through 6PM on every day
Rich user input: It can take rich user input. E.g. image (By uploading image, providing image URL or taking photo from mobile camera), voice (Speech to text)
PWA: It's a PWA (Progressive web-app which can allow user to create a icon in the mobile device for offline use)
Mobile Data friendly: Service-worker has been used for efficient use of mobile data.
Social sharing: Words can be copied, shared in the social medias
API documentation: Swagger is available for API documentation
Multi lingual support: It will support multiple languages (TODO)
Translation: It will support multiple language translation (TODO)

It is a MERN (MongoDB-Express-React-NodeJS) stack development.

The primary tech-stack is as follows.

The secondary tech-stack is as follows:

Redux - Redux thunk (Function based middleware https://www.npmjs.com/package/redux-thunk), Redux persist (Persistent redux store. https://www.npmjs.com/package/redux-persist) and Redux pack (Sensible promise handling. https://www.npmjs.com/package/redux-pack)
Babel - ES6, ESNext, React/Recommended config
Webpack - Webpack 4, UI Hot Reloading, Code Splitting, Optimized Prod Build and more
NodeMon - NodeJS hot reloading (https://www.npmjs.com/package/nodemon)
ESlint - Code linting tool
SCSS - CSS pre-processor (https://www.dailysmarty.com/posts/what-is-scss)
Axios - API calls (https://www.npmjs.com/package/axios)
Node-Schedule - Scheduler implementation for sending timely notification (https://www.npmjs.com/package/node-schedule)
Mongoose - MongoDB Object modelling tool (https://www.npmjs.com/package/mongoose)
Datamuse Word API - Fetching Word definition (http://www.datamuse.com/api/)
Heroku - Creating Cloud platform to deploy the app (PAAS - Platform as a service : https://www.heroku.com)
Google analytics - Tracking the user actions (https://analytics.google.com/analytics/web/)
Web push - Implementing push notification (https://www.npmjs.com/package/web-push)
Tesseract - Fetching texts from Image (https://github.com/naptha/tesseract.js#tesseractjs)
SpeechSynthesis - Working with voice input (https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis)
Swagger - Adding API documentation (https://www.npmjs.com/package/swagger-ui-express)

Feel free to contact me. Developer: Amit Pal

Clone this repo using git clone https://github.com/amit040386/WordPedia.git
Move to the appropriate directory: cd WordPedia.
Run npm install to install dependencies.
Run ./node_modules/.bin/web-push generate-vapid-keys) and keep public (WEB_PUSH_PUBLIC_VAPID_KEY) and private key (WEB_PUSH_PRIVATE_VAPID_KEY) in the below .env file
Create a .env file to the root folder and add these mapping to it. E.g.
- DB_USERNAME=xyz
- DB_PASSWORD=abc
- DB_NAME=blabla
- CLUSTER_NAME=pqr.mongodb.net
- WEB_PUSH_PUBLIC_VAPID_KEY=abcdefg
- WEB_PUSH_PRIVATE_VAPID_KEY=wert
Run sudo npm install workbox-cli -g if it is not present
Run npm start to see the example app at http://localhost:7009 in DEV mode.
Run npm start:production to see the example app at http://localhost:7009 in PROD mode.

A KanBan board has been maintained throughout this development. I'm still working on few open bugs which can be found here: https://github.com/amit040386/WordPedia/projects/1

Multi lingual support as it currently supports only English.
Instant translation Feature
Searching word definition for multiple languages as it currently supports only English
Contextual word suggestion