/owl-realworld-app

OWL RealWorld App Implementation. This application make use of Odoo Web Library as a standalone JavaScript project.

Primary LanguageHTMLMIT LicenseMIT

RealWorld Example App

Deploy on Netlify

OWL (Odoo Web Library) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Demo    RealWorld

This codebase was created to demonstrate a fully fledged fullstack application built with OWL (Odoo Web Library) including CRUD operations, authentication, routing, pagination, and more.

This is best use as learning material, some part of the code can still be refactored but over-complexity is not the intent here. This implementation is meant to cover all of OWL features in a complete application example.

The whole process of creating this implementation is available as a tutorial series:

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

How it works

This project is using OWL 1.4.7 with Rollup.js as a bundler and Jest for the tests.

The structure of the project is as follow:

├── src
│   ├── App.js
│   ├── components
│   │   ├── ArticleMeta.js
│   │   ├── ArticlePreview.js
│   │   ├── ArticlesList.js
│   │   ├── CommentsSection.js
│   │   ├── Footer.js
│   │   ├── Navbar.js
│   │   ├── NavbarLink.js
│   │   ├── Pagination.js
│   │   └── TagsCloud.js
│   ├── hooks
│   │   ├── useApi.js
│   │   ├── useArticleActions.js
│   │   ├── useArticleLoader.js
│   │   └── useProfileActions.js
│   ├── main.js
│   ├── pages
│   │   ├── ArticlePage.js
│   │   ├── Editor.js
│   │   ├── Home.js
│   │   ├── LogIn.js
│   │   ├── Profile.js
│   │   ├── Register.js
│   │   ├── Settings.js
│   │   └── index.js
│   └── utilities
│       └── formatdate.js
└── tests
    ├── components
    │   └── App.test.js
    └── helpers.js

What is covered here:

  • OWL Store to get user state, authentication actions, getters, synchronisation with LocalStorage
  • Usage of Axios for API Calls placed inside a custom useApihook
  • Routing
    • Dynamic routing with parameters: Article page, Editor, Profile page
    • Routing guards for authenticated routes
  • willStart, willUpdateProps examples for Components that fetch data from API before rendering and after changes.
  • triggering custom events from child Components listening to events in parent component.
  • hooks onWillStart, onWillUpdateProps for dynamic component loading data at render.
  • custom hooks to share logic of API actions with examples of:
    • useEnv to access router
    • useGetters to access store actions
    • useComponent to trigger event

Getting started

Install dependencies:

npm install

Dev with livereload:

npm run dev

Production build

npm run build

Run tests

npm run test

Contributors

Made with contributors-img.

Coding Dodo