Code Monkey home page Code Monkey logo

wordsage's Introduction

WordSage ๐Ÿ“š๐Ÿ“ฑ

WordSage is a personalized English vocabulary learning app built with React Native and NestJS, designed to help users enhance their vocabulary in an engaging and effective way. The application covers over 1500 words, including their meanings, synonyms, antonyms, and example sentences. It also offers interactive quizzes to reinforce learning and track progress over time.

๐Ÿš€ Features

  • โœจ Personalized Learning: WordSage customizes the learning experience based on each user's skill level and progress, ensuring efficient learning.
  • ๐Ÿ“˜ Vast Vocabulary: Access a comprehensive database of words, including their meanings, synonyms, antonyms, and example sentences with voice pronunciations.
  • ๐Ÿง  Interactive Quizzes: Engage in quizzes that are interactive, reinforcing your learning and allowing you to track your progress over time.
  • ๐Ÿ‘ค User Profiles: Create user profiles to monitor your learning journey.
  • ๐Ÿ–ฅ๏ธ Admin Panel: The intuitive admin panel, built with React, enables easy management of app content and user data.
  • ๐Ÿ“ฑ Cross-Platform: The app is built with React Native, allowing it to run on both Android and iOS devices.

๐Ÿ› ๏ธ Tech Stack

  • โš›๏ธ Frontend: React Native, Redux Toolkit
  • ๐Ÿงฑ Backend: NestJS
  • ๐Ÿ’พ Database: MongoDB
  • ๐ŸŽจ Admin Panel: React, Vite, and Tailwind CSS

โš™๏ธ Installation

๐Ÿ“‹ Prerequisites

  • ๐Ÿ“ฆ Node.js (Developed with v16)
  • ๐Ÿ—„๏ธ MongoDB or MongoDB Atlas
  • ๐Ÿ“ฑ Expo Go app (for Android)

Note: Newer versions of Node.js may not be compatible with the dependencies used in the frontend. If you encounter any issues, consider using NVM to manage multiple versions of Node.js on your machine.

๐Ÿ“ Steps

  1. Clone the repository:

    git clone https://github.com/nz-m/WordSage.git
    
  2. Install dependencies:

Navigate to the project directory and run the following command in each of the directories: frontend, backend, and admin-panel

npm install
  1. Create .env files: Create .env files in the backend and admin-panel directories following the format in the .env.example file.

  2. Setup backend URL in frontend: In the frontend directory, locate the baseUrl.js file in the constants folder and change the value of the API_BASE_URL variable to the URL of the backend server.

  3. Start the backend server:

npm start

Access http://127.0.0.1:4000/docs to view the API documentation. 6. Start the admin panel

npm start
  1. Access the admin panel at http://127.0.0.1:5173/ and add learning contents:

    Note: You will find instructions on how to add content in the admin panel itself. The learning contents are stored in the backend directory in the resources folder with appropriate file names.

  2. Start the app (frontend):

npm start

Scan the QR code using the Expo Go app to run the app on your mobile device.

๐Ÿ“ท Screenshots

Login Home
Profile Vocabulary
Quiz Result
Proficiency Assessment Assessment Prompt
Lessons

Admin Panel

Manage Questions

๐Ÿค Contributing

Contributions are welcome. See CONTRIBUTING.md for more details.

๐Ÿ“ฌ Feedback

If you have any feedback, please reach out to me at [email protected]

๐Ÿ“„ License

This project is licensed under the MIT License.

wordsage's People

Contributors

dariuscosden avatar hasibulhasannirob avatar nz-m avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

wordsage's Issues

[Bug]: Limited Touchable Area in TextInput on Login and Registration

Contact Details

No response

Bug Description

The right part of the TextInput area in both the login and registration screens is being blocked, and only some part on the left is touchable. See the screenshot for a visual representation: The touchable region is marked green, and the blocked region is marked red.
login

Environment

Expo

Reproduction Steps

No response

Browsers

Expo Go

Relevant Log Output

No response

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.