An English learning platform with interactive tasks, user's dashboard, and vocabulary storage. Covers grammar, vocabulary, listening, and reading. Offers educational articles on various English topics.

Overview

This short gif presents the main features of the app:

Additionally, if you would like to watch the complete overview video with voice description, you can go here.

Features

This app features:

• Interactive exercises of various types, including fill-box, flash-card, drag-and-drop, dropdown, multiple-choice, fill-in-letter, match-heading, and listen-and-type.
• Four main learning modules: grammar, vocabulary, reading, and listening.
• An article section with a preview page where users can filter articles based on language proficiency levels. Each article page fetches markdown files from the database and transforms them into a visually user-friendly format.
• Authentication and authorization functionalities, allowing both users and admins to log in. Security is enhanced using JSON Web Tokens (JWT). Unauthorized users are redirected to appropriate pages
• A dashboard page where users can access statistical information about their performance on the app. Additionally, users can set personal goals to track their progress.
• A profile page where users can input personal information including their first and last name, email address, preferences, and motivation for learning English.
• A settings page where users can perform various actions such as changing their passwords, choosing the dark or light theme of the app, deleting their account, and switching between English, Polish, and Ukrainian languages
• A glossary page containing all the words and phrases added in the Reading section units. Users can edit, mark with a star, delete, revise, and filter entries in the glossary list.

Used technologies

This project is based on MERN stack which includes:

• Frontend:
  • React.js
  • Tailwind.css
  • TypeScript
  • Redux-toolkit
• Backend:
  • Node.js
  • Express.js
  • Mongoose
• Database:
  • MongoDB
• Testing:
  • Jest
• Deployment:
  • Render.com
• Patterns:
  • MVC

Project Dependencies

Client:

Server:

Run Locally

Clone the project with HTTPS

  git clone https://github.com/romaniso/easy-peasy-platform.git

Go to the client directory

  cd client

Install dependencies

  npm install

Start the server

  npm run dev

Go to the server directory (if you are in the client directory):

  cd ../server

Go to the server directory (if you are in the root directory):

  cd server

Install dependencies

  npm install

Creating a .env file with necessary values typically involves setting up sensitive information such as database credentials, API keys, and other configurations. Below is an example of what your .env file might look like with placeholders for real values:

.env:

# MongoDB configuration
MONGODB_URI=your_mongodb_uri

# AWS configuration
AWS_ACCESS_KEY_ID=your_aws_access_key_id
AWS_SECRET_ACCESS_KEY=your_aws_secret_access_key
AWS_REGION=your_aws_region
AWS_BUCKET_NAME=your_aws_bucket_name

# Other configurations
SECRET_KEY=your_secret_key

Replace your_mongodb_uri, your_aws_access_key_id, your_aws_secret_access_key, your_aws_region, your_aws_bucket_name, and your_secret_key with your actual values.

Ensure that your .env file is added to your .gitignore to prevent it from being pushed to your repository and exposed publicly.

As for creating MongoDB databases and AWS buckets, you would typically do this through their respective dashboards or command-line interfaces. Instructions for these processes vary depending on the platform and tools you're using. You may refer to the documentation provided by MongoDB and AWS for detailed instructions on how to create databases and buckets.

Start the server

  npm run dev

Todo list

• Refactor the speech reader for flashcards.
• Add UI scroll animations.
• Add a "show right answers" button for the exercise page.
• Create common types and enums for client and server apps.
• Implement lazy loading for some components.
• Add a replacement test for new users.

Releases

beta | 0.1.0

• Profile Page ✅
• Settings Page ✅
• Dashboard Page ✅
• Glossary Page ✅
• Exercise pages ✅
• Article pages ✅

Upcoming releases announcements

1.0.0

• Admin Page
• Placement Test
• Simple exercise generator features
• Inbox
• Schedule
• Unit tests
• Podcast pages

Authors

• @romaniso

Acknowledgements

• MegaK - May edition 2023 for backend knowledge;
• Dave Gray for a great Authentication course;
• Stephen Grider for a great React course.

License

Educational Community License (ECL): It allows users to view and modify the code for educational purposes, but prohibits commercial use and requires any modifications to be shared under the same terms. For more information.