olga-f / JSPrep

The web application uses React, NextJS, GraphQL, backed by Django.

Practice JavaScript coding

---

Table of Contents

• Description
• Client
  • Getting started
  • What is inside
  • Design System
  • Front-end Testing
• Server
  • Setup
    • Virtual environment
    • Dependencies
    • MongoDB database
  • GraphQL Query and Mutation Examples
  • Testing

Distinctiveness and Complexity

You can use this project with your JavaScript code tutorials and challenges. The repository includes sandboxed code editor for running your JavaScript code directly in the web application.

This project is optimized for the best performance and successfully passes Google's Rich Results Test and Lighthouse.

The web application uses React, GraphQL, backed by Django.

On the front-end, this project utilizes Apollo Client - JavaScript GraphQL client. Apollo Client takes care of the request cycle from start to finish, including tracking loading and error states.

On the back-end, this project uses Graphene - a Python library for building GraphQL APIs.

The client folder contains all necessary code for running React front-end application. The server folder contains the back-end Django application.

Client

Getting started

First, you'll need to get the source of the project. Do this by cloning the whole JSPrep repository:

git clone [e-mail]:olga-f/jsprep.org.git

Before running your front-end application, you will need to run a Server.

After, please go to the front-end source folder: /client

cd client

Install and validate your project by running the following command:

npm run setup

What is inside

This project uses the Next.js framework that helps build web applications using React.js.

Check out why Next.js

This application use mostly static site generation with some client-side rendering using in both cases Apollo Client.

You can read more about data fetching in Next.js

The app includes:

• home page with a list of Units
• unit page with a list of Exercises

• exercise page

Depending on the category, the exercise page may include a javascript code editor.

JavaScript code runner used in code editor is isolated from the global JavaScript environment. None of the DOM APIs are exposed.

The code editor uses a dedicated web worker. That allows us to stop running some poorly written algorithms, for example, infinite loops. Another reason for using a web worker is performance. A web worker performs tasks in the background, preventing the UI from freezing up. Web worker browser support is good, starting from IE10.

Design System

This application use Base Web. Base Web is a design system for building websites in React. It is open-source.

The main benefits of the Base Web design system are:

• built-in accessibility
• performance

Styletron is the CSS-in-JS engine powering Base Web. That is one of the fastest solutions.

Front-end Testing

This project includes these forms of testing:

• Static Analysis: catch typos and type errors as you write the code.

ESLint statically analyzes your code to find problems. Prettier enforces a consistent code style. This project use TypeScript. By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before run code.

• Unit: verify that individual, isolated parts work as expected.
• Integration: verify that several entities work together in harmony.

This application uses JavaScript Testing Framework - Jest with React Testing Library. Tests live in the tests folder, when is possible, next to the file they are testing. Jest also collects code coverage information.

• End-to-end: a helper robot behaves like a user to click around the app and verify that it functions correctly, sometimes called "functional testing" or e2e.

These tests are written with cypress and Cypress Testing Library. End-to-end tests live in the cypress/e2e folder. Use npm run test:e2e:dev commands to open and add more tests if you want.

Note. Change your "baseUrl" in cypress.json to http://localhost:3000 for local testing.

Please, use the following command to run static, unit, and integration tests:

npm run validate

Server

Setup

After cloning the JSPrep repository:

git clone [e-mail]:olga-f/jsprep.org.git

Go to the server project folder:

cd server

Virtual environment

Then create a virtual environment in which you can install the dependencies:

python -m venv venv

Activate a virtual environment:

source venv/Scripts/activate

Dependencies

Now install the dependencies:

pip install -r requirements.txt

MongoDB database

Set up a MongoDB connection and create a database

🔹 MongoDB Atlas offers Free Shared Clusters.

1. Add .env file with your MongoDB credentials to the server folder.

SECRET_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
DEBUG=True
_MONGODB_URI=mongodb+srv://XXXXXXXX:[e-mail]/XXXXXX?retryWrites=true&w=majority
CLIENT_APP_URL=http://localhost:3000
ALLOWED_HOSTS=['*']

2. Run the following command:

python manage.py migrate

3. Start the server:

python manage.py runserver

Now head on over to http://127.0.0.1:8000/graphql and run some queries!

GraphQL Query and Mutation Examples

mutation($input: UnitInput!) {
  createUnit(unitData: $input) {
    unit {
      title
      about
      description
      imageUrl
    }
  }
}

with variables:

{
  "input": {
    "title": "JavaScript basics",
    "about": ["Variables","Data Types Overview","Strings", "Numbers", "Booleans"],
    "description": "An introduction to core JavaScript functionality",
    "imageUrl": "https://cdn.pixabay.com/photo/2019/10/03/12/12/javascript-4523100_960_720.jpg"
  }
}

Query all units from the database:

query {
  unitList {
    id
    title
    slug
    about
    description
    imageUrl
    position
  }
}

Create exercise:

mutation ($data: ExerciseInput!, $enum: ExerciseCategory) {
  createExercise (exerciseData: $data, categoryEnum: $enum) {
    exercise {
      name
      unit {
        id
      }
    }

  }
}

with variables:

{
  "data": {
    "unit": "6075689b18ef82cb8162f733", # <== write your unit id here
    "name": "Test Exercise"
  },
  "enum": "CHALLENGE"
}

Testing

For run tests, you need to:

• activate your virtual environment:

cd server

source venv/Scripts/activate

• run pytest:

pytest -v