howtocodewell / code-quiz

Code Quiz MonoRepo (API, API Client, App)

Code Quiz

Welcome to the Code Quiz Open Source project from How To Code Well.

This is an Open Source project that includes an API and an App for the daily code quizzes.

The daily code quizzes are published to Instagram and Twitter. This GitHub project is under development and will eventually allow access to the quizzes via a JSON API, Mobile app and website.

This Monorepo contains the following three projects.

1. API - A Symfony 6, PHP 8 and Maria DB backend.
2. API-Client - A NPM package for mock testing the API.
3. App - A Mobile application that displays code quizzes.
4. Website - A Website that displays code quizzes.

Project development

This project is being developed live on YouTube most Tuesdays at 6pm BST and most Sundays on Twitch.

Help needed!

If you would like to help build the project then please pick a ticket from the issues. If you are new to Open Source then pick an issue labeled good first issue.

Pull requests may be reviewed live on Twitch/YouTube.

Contributing to this project

See the CONTRIBUTING guide on how to contribute to the project.

---

System Requirements

• Docker
• Docker Compose
• Node
• NPM
• Yarn

---

Local Install

1. Clone the repository

git clone [email protected]:howToCodeWell/code-quiz.git

2. Spin up the containers

docker-compose up -d

3. Install database migrations

docker-compose exec api bin/console doctrine:migration:migrate

4. Load data fixtures

docker-compose exec api bin/console doctrine:fixtures:load

5. Add the following entry to the /etc/hosts

127.0.0.1 codequiz.local
127.0.0.1 api.codequiz.local

Generating the OpenAPI specification

From the api folder run the following to create openapi.yaml in the ./docs/generated folder. This is ignored from the code base

docker-compose exec api bash -c "bin/console api:openapi:export --yaml" > ./docs/generated/openapi.yaml

Install database and data

1. Run the migrations

docker-compose exec api bash -c 'bin/console doctrine:migrations:migrate'

2. Run the data fixtures

docker-compose exec api bash -c 'bin/console doctrine:fixtures:load' 

---

Accessing the projects

• The API can be reached at http://api.codequiz.local/v1
• The website can be reached at http://codequiz.local/

---

API request examples

Get a list of quizzes

curl -X 'GET' \
  'http://api.codequiz.local/v1/quizzes' \
  -H 'accept: application/ld+json'

Get the first quiz

curl -X 'GET' \
  'http://api.codequiz.local/v1/quiz/1' \
  -H 'accept: application/ld+json'

Get the first question

curl -X 'GET' \
  'http://api.codequiz.local/v1/question/1' \
  -H 'accept: application/ld+json' 

---

Running the API Client locally

Install

1. Install the packages

yarn install

2. Run the mock server

yarn start

3. Generate the OpenAPI TypeScript module Make sure you have already generated the openapi spec file.

See this guide for details

yarn run generate-api 

Testing

yarn run lint

yarn run test

---

Mobile App

Yet to be built

code-quiz's Issues

Create wiki pages and update readme links

Create a wiki page per sub project
Each page should have an install guide and brief description of the sub project

Add JavaScript Quiz fixtures

Create the JavaScript quiz fixtures that have been posted on Instagram/Twitter
Follow the folder/file structure of the HTML Quiz.
HTML Quiz fixtures:
Twitter JavaScript questions

Test API Client Pipeline

• Check that the API client pipeline runs when api-client/** is changed
• Ensure that the API pipeline does not run

Add link to contribution guidelines in README

The link should go to CONTRIBUTING.md

Create a environment variable to store the port

By default this is set to port 3000 however this needs to be changeable via an .env file
This cannot happen until #28 is completed

Vagrant is not working when using Virtual Box

Describe the bug

The following network error occurs when running vagrant up using Virtual box.
Tested on Instal Mac x86
This does not affect Mac M1

Steps to reproduce

1. Use Virtual box
2. Run vagrant up
3. Select any network option

Expected behavior

Vagrant virtual machine up and running using Virtual box

Screenshots and recordings

==> default: Available bridged network interfaces:
1) en0: Ethernet
2) en6: USB Ethernet(?)
3) en1: Wi-Fi
4) awdl0
5) llw0
6) en2: Thunderbolt 1
7) en5: Thunderbolt 4
8) en4: Thunderbolt 3
9) en3: Thunderbolt 2
10) bridge0
11) vmenet0: Ethernet(?)
12) bridge100
13) vmenet1: Ethernet(?)
14) bridge101
==> default: When choosing an interface, it is usually the one that is
==> default: being used to connect to the internet.
==> default:
    default: Which interface should the network bridge to? 1
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["hostonlyif", "create"]

Stderr: 0%...
Progress state: NS_ERROR_FAILURE
VBoxManage: error: Failed to create the host-only adapter
VBoxManage: error: VBoxNetAdpCtl: Error while adding new interface: failed to open /dev/vboxnetctl: No such file or directory
VBoxManage: error: Details: code NS_ERROR_FAILURE (0x80004005), component HostNetworkInterfaceWrap, interface IHostNetworkInterface
VBoxManage: error: Context: "RTEXITCODE handleCreate(HandlerArg *)" at line 95 of file VBoxManageHostonly.cpp

OS / Linux distribution

Intel Mac Monterey Version 12.4

Additional context

No response

Create readme

Create a readme explaining what this app does and how build it.

Attempt to run Docker services via GitHub Actions

In order to test the API a database and nginx web server need to be created.
Attempt to run docker-compose using gitHub actions to build the following:

• Database container
• Nginx container

Make a curl request to the localhost to return the home page for testing

Add Vagrant file

Install API Platform

Install the API Platform composer package.
Documentation: https://api-platform.com/

Create Quiz Entity

Table schema
id,
title,
slug

Install and configure ESLint

TODO

• Install ESLint
• Configure ESLint to check api-client
• Add ESLint to GitHub pipeline

Investigate cost of GitHub actions

Discover cost of using GitHub actions with Open Source project

Install Typescript into JSON Server

Replace jsonServer.rewriter data with routes.json

The following

{
    '/quiz/:slug': '/quiz?slug=:slug'
}

in

server.use(jsonServer.rewriter({
    '/quiz/:slug': '/quiz?slug=:slug'
}))

should be replaced by the routes.json file.

An attempt was made to use path.join(__dirname, 'routes.json'), as the first argument to jsonServer.rewriter but this did not work.

Test vagrant box on streaming computer

Ensure that the vagrant box can work on the streaming computer. Document any required steps

Create json files for existing questions

Each week create a new JSON file with questions and answers.
This will be an un-going ticket until there is a proper database

Install and configure PHPUnit

TODO

• Install PHPUnit https://packagist.org/packages/phpunit/phpunit
• Configure PHPUnit to run against the Symfony project
• Update the GitHub Actions pipeline to run PHPUnit after the other PHP tools

Create docker-compose

Create a docker-compose file with the following services. This should live in the api folder

api - php:8.1-fpm
nginx: nginx
db - Mariadb

TODO

• Create Dockerfile for API
• Create Dockerfile for nginx
• Pull down DB image
• Configure PHP FPM
• Configure NGINX
• [ ]

Test the GitHub API pipeline

• Check that the API pipeline runs when api/** is changed
• Ensure that the API-Client pipeline does not run

Install Symfony 6

Install Symfony 6 inside API folder

Test API GitHub Pipeline

Describe the proposed feature.

Create 2 tests for PHPStan

• Pipeline fails
• Pipeline passes

Describe alternatives you've considered

No response

Additional context

No response

Related Issues

No response

Create folder structure

/api -> Symfony 6
/app -> React native

Add contributing guide

Create local api-client npm package

TODO

• Create howtocodewell/code-quiz-api-client
• Add README
• Add LICENSE

Add tests for entities

All entities need testing. 100% code coverage is required

Add Python Fixtures

Todo

• Create the Python quiz fixtures that have been posted on Instagram/Twitter
• Add PHPUnit tests
  Follow the folder/file structure of the HTML Quiz.

HTML Quiz fixtures:
Twitter Python questions

These questions/answers need to be added to both the API (PHP) and the API-Client (TypeScript)

Create Answer Entity

Table schema
id,
question_id,
content,
is_correct,
display_order

Install Axios

Use these docs to install the HTTP client https://axios-http.com/docs/intro
At this stage, all we need is the package to be installed.

Configuration and making API calls will be made in another ticket.
Please use Yarn to add this package.

Add the remaining HTML quiz questions

There are only two questions in the HTML quiz.
Add the remaining questions/answers that have been posted on Instagram/Twitter

HTML Quiz fixtures
Twitter HTML questions

Add the ability to use .env files

Add the ability to use .env files to the api-client

TODO

• Install https://www.npmjs.com/package/dotenv
• Update the .gitignore file in the API-Client and ignore the .env file
• Create a .env.sample file in the api-client root with the following
  • API_VERSION=v1
  • API_BASE_PATH=http://localhost:3000/
• Update API-Client install guide with a section on how to copy the .env.sample to a new .env file and make the required changes.

Create install docs in the readme

Create a .github folder

TODO

• Add a PULL REQUEST template
• Add ISSUE template

Install JSON Server

TODO

• Install https://www.npmjs.com/package/json-server
• Setup basic endpoints for quiz
• Get a quiz by slug

Update contribution guidelines

Describe the proposed feature.

git commit messages should be in the following format

#46 - Description of commit

Describe alternatives you've considered

The following was considered

[#46] - Description of commit

Additional context

No response

Related Issues

No response

Create Quiz list API endpoint

Create a paginated API endpoint that lists all of the quizzes

/quiz?page=2&limit=10

return JSON

Build Quiz endpoint

Create API endpoint that lists all of the questions and their answer for a given quiz.

/quiz/:slug

Create GitHub CI Pipeline for API Client

TODO

• Copy the structure of the API pipeline
• No tests should be added at this stage

Export OpenAPI specifaction

In order to keep the website, mobile app and api client in sync with the api there needs to be an openapi specification generated.

Todo

• Ignore api/config/api_spec.yaml in api/.gitignore
• Generate the specification like so bin/console api:openapi:export --yaml > api/config/api_spec.yaml
• Update the wiki page https://github.com/howToCodeWell/code-quiz/wiki/API mentioning how to generate the spec

Create the basic structure for the API client

TODO

• Create api-client folder
• Init package

Create Question Entity

Table schema
id,
quiz_id,
content

Install PHPUnit to API

TODO

• Install PHPUnit package to API
• Create a GitHub Action that runs PHPUnit in a container

Remove 't' from HTML question 2

Describe the bug

There is a 't' in the 'content' field for HTML question 2. This shouldn't be there.
The content value should be4
Please remove

Steps to reproduce

1. View file api-client/mockData/htmlAnswers.ts
2. Remove the 't' from line 27

Expected behavior

The content value should be 4

Screenshots and recordings

No response

OS / Linux distribution

na

Additional context

No response

Add System Requirements to README

Add Vagrant as a System requirement for the API

Install and configure PHPStan

PHPStan should be running at max level.
PHPStan should check config and src paths

Create a github pipeline

Describe the proposed feature.

Pipeline must run PHPstan

Describe alternatives you've considered

No response

Additional context

No response

Related Issues

No response

Add CSS Quiz fixtures

Todo

• Create the CSS quiz fixtures that have been posted on Instagram/Twitter
• Add PHPUnit tests

Follow the folder/file structure of the HTML Quiz.
HTML Quiz fixtures:
Twitter CSS questions

Add question to quiz API

Install and configure PHPCS

TODO

• Install PHPCS https://packagist.org/packages/squizlabs/php_codesniffer
• Configure PHPCS to use the Symfony coding style
• Update GitHub Actions to run before PHPStan on a pull request

Add fixtures to install quizzes, questions and answers

1. Install doctrine fixtures
2. Create fixtures for Quizzes
3. Create fixtures for Questions
4. Create fixtures for Answers