A Roling Scope School task-project
๐ Deploy (Demo)
๐ Technical specification
๐จโ๐ป Dmitry Khomichenko (@BlackBerryID)
๐จโ๐ป Artur Saratovkin (@saratovkin)
๐จโ๐ป Yan Poleshko (@shadowinhaze)
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.
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.
- Project is written with
Typescript
andReact.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 andRedux-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
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 :)