Code Monkey home page Code Monkey logo

wikonnect's Introduction

All Contributors

Welcome to Wikonnect ๐Ÿ‘‹

Version Documentation License: MIT Issues Forks Stars

Wikonnect

Wikonnect is an open-source e-learning platform designed to allow anyone to learn, create educational content, and contribute to building the platform as a designer or a software developer. The initial courses offered on the platform will be around digital literacy, to get more people using the internet in more productive ways. Developed by Tunapanda Institute in Nairobi, Kenya. The original platform (called 'Swag') was used to provide technology, design, and business training in low-income communities with low bandwidth.

Come say hi ๐Ÿ‘‹ on our Wikonnect Community Discord Server!

Getting Started

The frontend is developed using Ember.js. We recommend getting started with Ember by going through the tutorials.

The backend is developed using KoaJS. The API docs are hosted at tunapanda.github.io/wikonnect

Wikonnect Tech Stack

Development setup

  • Clone the project using Git into your workspace:
  git clone https://github.com/tunapanda/wikonnect.git
  • Proceed to set up the development environment manually or using Docker.

Docker project setup


Prerequisites

  • Docker Engine
Docker engine installation
Starting a development server
  1. If your Docker engine instance is running on your terminal, navigate into the project root directory:
cd wikonnect/
  1. Copy the .env-sample configuration file to .env. (Never commit this file)

  2. Update the above .env file configurations to match your desired setup.

  3. Build and run the project container services using the docker-compose command:

      docker-compose up --build
    

NOTE The NODE_ENV should be set as development to allow live reload on code changes.

Manual project setup


Prerequisites

  • Node.js v14.16.0
  • PostgreSQL database server
Setting up Node.js

Follow instructions on how to download and install Node.js based on your operating system from the official Node.js website.

Ensure you install Node v14.16.0

Setting up PostgreSQL

Create a postgres user (with password), and set up a database for the project (Don't forget to grant privileges to the user on the database!). :

=# CREATE USER wikonnect_user WITH PASSWORD 'password';
=# CREATE DATABASE wikonnect;
=# GRANT ALL PRIVILEGES ON DATABASE wikonnect TO wikonnect_user;

Starting a development server

Install the project-wide dependencies on the root project directory...

cd wikonnect/
yarn
Backend (API) setup

Backend set up steps:

  1. Navigate into the server directory

    cd server/
    
  2. Install the backend dependencies

    yarn
    
  3. Copy the database configuration file server/config/db.example.js to server/config/db.js

  4. Replace the database configuration to match your development database. (Do not use the development database in a production environment)

    development: {
        host: 'localhost',
        database: 'my_database',
        user: 'my_user',
        password: 'my_password',
      }
  5. Copy the email configuration file server/config/email.example.js to server/config/email.js

  6. You can use Mailtrap for an email sandbox environment. Set up a mailtrap.io account and copy the credentials provided for Nodemailer setup into the development section of the server/config/email.js file eg:

    development: {
        provider: "smtp.mailtrap.io",
        auth: {
          user: "xxxxxxxxxxxx",
          pass: "xxxxxxxxxxxx",
        },
        defaultFrom: process.env.FROM_EMAIL_ADDRESS,
      },
  7. Assuming the Postgres server is ready and above configuration credentials are correct, run the latest migrations (defined in server/migrations):

     yarn db:init
    
  8. Optionally, one can populate the database with dummy data (defined in server/db/seeds) by running:

     yarn db:seed
    
  9. If the above steps were successful, you can finally start the backend server

    yarn start
    

NOTE: You can safely ignore any Elasticsearch connection error.

Frontend setup

Frontend set up steps:

  1. Navigate into the frontend directory
    cd frontend/
    
  2. Install the frontend dependencies
    yarn
    
  3. Start the frontend server
    yarn start
    
  4. If the above steps were successful, navigate to your favorite browser and go to http://localhost:4200/ to see the running app.

NOTE: For easy Ember addons installation and project files generation using available blueprints, we highly recommend installing Ember CLI globally:

yarn install -g ember-cli

UI/UX Designs


Learn

Teach

Admin Dashboard

Contributing

License

This project is licensed under MIT. See the license file for details

Authors ๐Ÿง™

Developers

UI/UX Designers

Contributors โœจ

Thanks goes to these wonderful people (emoji key):


Moses Okemwa

๐Ÿ’ป ๐ŸŽจ

Kiki

๐Ÿ’ป ๐ŸŽจ

mrlarso

๐Ÿ’ป

Jake Lee Kennedy

๐Ÿ’ป

Benson Muite

๐Ÿ’ป

Cliff Owino

๐Ÿ’ป

Mutugi

๐Ÿ’ป

Avic Ndugu

๐Ÿ’ป

BonfaceKilz

๐Ÿ’ป

Happy Coding โค๏ธŽ

wikonnect's People

Contributors

0xmurage avatar avicndugu avatar bkmgit avatar bonfacekilz avatar brianmarete avatar colleowino avatar dependabot-preview[bot] avatar dependabot[bot] avatar jakeii avatar jim4067 avatar mosesokemwa avatar mrlarso avatar mutugiii avatar proverbial-ninja avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wikonnect's Issues

API Authorisation & Authentication

As a frontend engineer, I would like to be able to authenticate with the API.

  • Username/Email & password Authentication Route(s) with Bcrypt that provides a JWT
  • Validation for authentication routes
  • JWT middleware to maintain session
  • A middleware to check if the request is authorized
  • Test the endpoints

Configure ElasticSearch index and queries

As a user, I would like to be able to search everything.
As a frontend engineer, I would like to be able to search everything via the API.

  • Configure ElasticSearch index
  • Use queries to create an API endpoint for search
  • Test the search API endpoint
  • Design search queries
  • Index things when they are inserted into the database
  • Update the index when things are updated

Querying API

As a frontend engineer, I would like to be able to query the API using query params.

  • Create a way to query the API via any attribute

  • Some attributes may need to be prevented from querying, depending on authorisation/permissions

  • Test the querying

  • Eager/related queries should return only id and type

Security updates

There are new security fixes that have been made on dependencies that are in use in the project.

One or more other dependencies require a version that is incompatible with these updates making this **not a high priority issue **

yarn outdated will show a list of updated dependencies and meta information on the upgrade version

Screenshot 2019-11-22 at 10 23 23

Create Ember.js App foundation

As a frontend developer, I would like a foundation to work off.

  • Ember CLI init an octane app
  • Add sass
  • Configure adapter & serializer to work with API

Create Koa.js server foundation

As a backend engineer, I would like a foundation to work on.

  • Koa.js server
  • Router
  • Logger
  • Error handler
  • Database connection

API Access Control System

As a developer, I would like a permission system so that not everyone can CRUD everything.

  • Basic end-user permissions, users can only edit their own profile/settings and update resources that they own (activity/enrollments/achievements).
  • Content creator role/group who are able to create paths/courses/modules/lessons/chapters and edit their own ones
  • administrator role/group that can "do everything" including modifying content and users.

Search Page/Component MVP

As a user, I would like to be able to search and find any topic/subtopic/course/chapter.

  • Basic Template and styling
  • Input with a dropdown showing results
  • Full results page
  • Test interaction

API endpoint for H5P upload

  • Upload and unzip h5p content

  • Store properties in the correct database

  • Chapter/Lesson/Module/Course completion status

Continuous Deployment

As a developer, I would like continuous deployment to be set up so that new versions can be deployed without requiring additional input.
Related to #32

  • Work with GitHub and CircleCI to push successful builds to a staging server for user testing.
  • Also push stable versions to production identified with GitHub tags

Frontend Authorisation & Authentication

As a user, I would like to be able to login to the app.

  • Login and registration pages
  • Login and registration form components
  • Login and registration form validation
  • Comunicate with API for Authentication and Authorization using ember-simple-auth & ember-simple-auth-token
  • A service to manage and maintain sessions
  • Test login and registration form

Depends on #6

Course Page MVP

As a user, I would like to visit a course and complete the chapters within it.

  • Basic Template and styling
  • Any interaction
  • Test interaction

Module Page MVP

As a user, I would like to visit modules and see their content.

  • Basic Template and styling
  • Any interaction
  • Test interaction

Join Table CRUD

As a frontend engineer, I would like to be able to post data to a route and save part of the data in a join table model

  • Create a way to save join table data sent from the front end (POST and PUT)
  • Test the saving of data

Homepage MVP

As a user, I would like to see an overview of topics from the homepage.

  • Show summary of topics and subtopics
  • Test interaction

Dockerize application

As a developer, I would like a dockerize application for streamlined deployments.

  • Docker containers for: frontend/static/nginx, API, database, elasticsearch, redis(?)
  • Docker compose to get it all working
  • Research Kubernetes

Documentation

Write documentation for Swag/Wikonnect based on all features to date.

Lesson Item Component MVP

As a frontend engineer, I would like a reusable component to display lessons in a list.

  • Basic Template and styling
  • Show status of topic ((in)complete or having (in)complete dependencies)
  • Optionally show chapters of topic and their completion status
  • Any interaction
  • Test interaction

Initialise CRUD Endpoints

As a frontend engineer, I would like CRUD endpoints for the Ember app to communicate with.

  • Decide on all the endpoints needed, should more or less map to the database
  • Flesh out the basic models and routes using Koa.js and objection.js
    Depends on #1

Lesson Page MVP

As a user, I would like to visit lessons and see their content.

  • Basic Template and styling
  • Any interaction
  • Test interaction

Profile Page MVP

As a user, I'd like to be able to see my profile, with details about my learning progress.

  • Profile page
  • Test Page

Database structure & design

As an engineer, I would like a database with a logical structure to store the relational data for Wikonnect.

  • Knex migrations

Chapter/H5P Component

As a frontend engineer, I would like a reusable component to display a chapter within a course.

  • Template and styling
  • Integrate H5P seemlessly into ember
  • record/emit/save xAPI statements/progress
  • Test interaction

Module Item Component MVP

As a frontend engineer, I would like a reusable component to display modules in a list.

  • Edit Template and styling
  • Any interaction
  • Test interaction

Main Navigation Component MVP

As a user, I'd like to be able to navigate to the main features of the app on mobile and desktop

Logged In Menu Items

  • Home

  • My Courses

  • Profile

  • Logout

  • Settings

  • About

Guest Menu Items

  • Home

  • Courses

  • Login

  • Sign Up

  • About

Component Library / Design System

As a front-end developer, I would like to have a standard set of UI components to have a uniform look and feel.

  • Buttons

  • Typography

  • Colors

  • Form Elements

  • Navigation

  • Feedback / Alerts

  • Dialogs/Modals

  • Empty States

  • Cards

  • Lists / SubLists

  • Tabs

  • Tables

  • Icons

  • Documentation

App styling foundation

As a frontend engineer, I would like a style foundation to work with

  • Decide on a framework like Bootstrap/Bulma etc. if needed
  • Implement general styles for elements like headings, links, buttons, forms etc from designs.
  • Add the header and logo
  • Add the footer

Object Caching System

As a developer, I would like to be able to cache objects to improve performance.

  • I like Redis, but explore other options
  • Find a library and/or create a caching API for use in the app
  • Implement caching using the API

API Access Control System [ part 2 ]

As a developer, I would like a permission system so that not everyone can CRUD everything.

  • A way to query permissions so that the frontend can inform users of their capabilities(return an array with permissions objects)
  • jwt exception for the login(users) and signup(auth) route- [ ] content manager role/group which adds managing others' content to the content creator.
  • tests for the access control system

The tests will account for 3 types of users(basic, admin, super admin)
With permissions around edit, delete, read, and update a course and a module

Create App Routes

As a frontend engineer, I would like all the routes/pages/screens mapped out according to the designs.

Landing Page

As a user, I'd like a landing page to tell me about Wikonnect

  • Create Page from Designs
  • Test if needed

Ember Models

As a frontend engineer, I would like ember models to be able to interact with the API effectively.

  • Decide on and create models mapping to the API

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.