RS Lang

A Roling Scope School task-project

🚀 Deploy (Demo)
📗 Technical specification

Our team

👨‍💻 Dmitry Khomichenko (@BlackBerryID)
👨‍💻 Artur Saratovkin (@saratovkin)
👨‍💻 Yan Poleshko (@shadowinhaze)

About

School project. A simple Web application is an analogue of popular services for learning English (vocabulary) through game mechanics. The application can be used by both anonymous (unauthorized users) and registered users. Additional functionality is available for registered users, in the form of statistics and a personal dictionary.

In this school project, our team worked exclusively on the UI part and writing API methods. The backend was provided by RSS, ready-made and not modified.

Stack Technology

🧱 Back-End

Full documentation and repo

All information (words, users, their statistic) is stored in a MongoDB nonrelational database, the backend was written using Node.js and Express.js library. The BE is perfectly documented with Swagger. The backend is deployed on the free Heroku service.

🌴 Front-End

• Project is written with Typescript and React.js library.

Typescript - adds statical typification, helps with team-developing and reduce bugs amount in future.

React.js - "makes it painless to create interactive UIs". Fast and Component-Based.

• Redux @4.1.2 and Redux-Toolkit as nowadays the go-to way to use Redux are used for state management. WEB Storage API (localStorage) is used for store authorized user data (name, token).

• All API-methods were made with vanilla JS (.ts) without external libraries.

• Routing in the project provides React-Router-Dom @6.2.1.

• For the construction statistic graphs recharts @2.1.9 was used.

• The lack of a UI/UX-designer was compensated by using the Material UI library with ready for use components.

• SASS preprocessor (.scss syntax/ css-modules) was used for component stylisation and extension MUI components inline styles.

• .eslint and .prettier were used for maintenance code-quality and unified code-writing.

---

💡 You can run your own front-end version:

• Clone repo with FE and BE.
• Read BE documentation and wiki-page for deploying DB version.
• Open App folder, don't forget change address for your BE at /src/api/api.ts
• npm i
• npm run start

---

🛣️ Future plans

If we were to continue developing application, we would like to implement the following things:

• Unit testing (Jest)
• More game types
• Add UI animations
• Auto reAuth (+refresh token), add google auth.
• Fix, fix and fix bugs :)