TeachMeSkills JavaScript tasks

This project was bootstrapped with Create React App.

Homeworks:

1. Task list component (JS): DOM API, events, fetching data
2. Orders component: Redux-Saga + Ant Design
3. ...

Quick start

1. Install Node.js
2. Fork this repository
3. Open it in your IDE
4. Run npm install in terminal
5. Create a new Git branch from master
6. Enable tests for the homework tasks you're going to solve (remove x from xdescribe(...) in the appropriate spec.js file)
7. Run npm run test
8. Check the failed tests, implement the requested functionality
9. Press q when all the tests are green (passed) or yellow (skipped)
10. Execute git add ., git commit -m "{your_commit_message}", git push origin {your_branch_name} - or use IDE's GUI for the same
11. Check the Github Actions tab - your last CI job execution should be green
12. Create a pull-request to this repository

Startup modes

Mode	Description	Steps
React app + stubs server (dev. mode)	Hot reload for React app and stubs server, no DB, no Docker	1️⃣ npm i 2️⃣ npm run start
React app + stubs server (dev. mode) + Mongo	Same as above, but connected to MongoDB served in Docker	1️⃣ npm i 2️⃣ Create .env file 3️⃣ For the first time – docker compose -f docker-compose.yml up mongo --build 3️⃣-a. Start mongo container from Docker Desktop GUI 4️⃣ npm run start:with-db
React app (dev. mode) + stubs server + Mongo	Hot reload for React app, stubs server and MongoDB will be served in Docker	1️⃣ npm i 2️⃣ Create .env file 3️⃣ For the first time – docker compose -f docker-compose.yml up --build 3️⃣-a. Start tms-js-react-tasks containers from Docker Desktop GUI 4️⃣ npm run start:ui-only
React app (prod. mode)	No hot reload, stubs server and MongoDB will be served in Docker	1️⃣ npm i 2️⃣ Create .env file 3️⃣ For the first time – docker compose -f docker-compose.yml up --build 3️⃣-a. Start tms-js-react-tasks containers from Docker Desktop GUI 4️⃣ npm run serve

Using Docker

This application comes with 2 images to be served in Docker: express (for stubs server) and mongo (MongoDB).
⚠️ Before using them don't forget to create the .env file in the project root folder with the following contents:

# Airlabs (https://airlabs.co/) API key
AIRLABS_API_KEY={your_airlabs.co_api_key}

# MongoDB parameters (start Docker container to use it)
MONGO_USER={any_username}
MONGO_PASSWORD={any_password}

MONGO_TASKS_DB=tasks
MONGO_ORDERS_DB=orders

MONGO_INITDB_ROOT_USERNAME={any_username}
MONGO_INITDB_ROOT_PASSWORD={any_password}
MONGO_INITDB_DATABASE=admin

and replace the data in {...} by your own preference.

Available Scripts

npm run start

Concurrently runs npm scripts to start application in development mode. App itself will be running on http://localhost:3000, stubs server will be listening port 3001. The page will reload when you make changes.

npm run start:with-db

Same as npm run start, but stubs server will try to connect to pre-configured MongoDB database instance running in mongo Docker container.

npm run start:ui-only

Hot reload will be available only for React app, assuming that you've already launched docker with both express and mongo containers.

npm run test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

npm run serve

Triggers the npm run build command above and serves the prod-bundled applicaiton from the build folder on http://localhost:4000. Uses Express inside.

npm run prettier

Manully runs Prettier for some of the project files, see the configuration for details.

npm run lint

Same, but for ESLint

npm run build:js

Bundles src/js/public.js using rollup & copies it to the /public directory, avoiding built-in React application bundler.

npm run cypress:open

Opens interactive Cypress E2E test suite.

🚨 Warning: execute any of the npm run start* commands before it! Cypress needs a running server to be tested.

npm run cypress:run

Same as above, but in headless mode, without interactive UI. Results will be logged into the console.

npm run cypress:ci

Runs production build, serves the app and tests it using Cypress in full-automatic headless mode. This command is triggered before commit and on CI.