This course uses a project-based approach to teach concepts of AdonisJS. The project in focus is a quiz app with an admin CMS.

tarball.tar.gz

APP_KEY

node_server

node_server_2

AdonisJS gives Nodejs developers a structured way to build full-stack apps and APIs with little boilerplate. In this course, you will learn how AdonisJS works by building
1. A quiz app
2. An admin CMS for the quiz app
Each chapter focuses on a core concept of AdonisJS using the app as a reference. 
The course covers
1. MVC architecture
2. Authentication
3. Authorization
4. Browser testing
At the end of this course, you'll be able to confidently build fullstack applications using AdonisJS.

Build a Trivia Quiz App with AdonisJS

## What is a View in AdonisJS
A view is what a user sees or what gets rendered to HTML. Adonis uses `edge` templating to render views. Although core business logic is kept out of views, they still use logical expressions in form of tags to manipulate and control data. We can see a good example in the `quiz-end.edge` view of our app.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game End</title>
    {{ style('css/bootstrap.min') }}
</head>
<body>
    <main class="container">
        <h1>{{decode(title)}}</h1>

        <div>
            @each(quiz in quizes)
            <div>
                <h3>{{decode(quiz.question)}}</h3>
                @each(answer in quiz.answers)
                <div class="d-flex align-items-baseline">
                    @if(answer.isCorrect)
                        <img width="15" src="/icons/check.svg" alt="checkmark">
                    @else
                        <img width="15" src="/icons/x.svg" alt="checkmark">
                    @endif
                    <p class="ms-2">{{decode(answer.text)}}</p>
                </div>
                @endeach
            </div>
            @endeach
        </div>

        <div class="my-4">
            <a href="/" class="btn btn-primary" type="submit">Play Again</a>
        </div>
    </main>
</body>
</html>

import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <span>Hello World</span>
    );
  }
}


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

We render a check (✅) image if the answer is correct, else we render an x (❌). 

# What is a View in AdonisJS
A view is what a user sees or what gets rendered to HTML. Adonis uses `edge` templating to render views. Although core business logic is kept out of views, they still use logical expressions in form of tags to manipulate and control data. We can see a good example in the `quiz-end.edge` view of our app.


Introduction to AdonisJS

Overview of Models, Views and Controllers in Adonisjs

Adding Authentication to an Adonis App

Building a Basic Admin Panel

Sending Notifications and Emails to Users in AdonisJS

Browser Testing

Conclusion

Final Assessment

Views in Adonis.

What is a View in AdonisJS