FDND-task-aggregator Svelte Themes

Fdnd Task Aggregator

A task aggregator made for FDND using Svelte and GraphQL

Repo cloned from https://github.com/fdnd/task-aggregation for my portfolio website. All rights reserved to FDND.

task-aggregation

Aggregates all tasks and task descriptions from organisation fdnd-task (work in progress)

Description 🤓

Live link

This project is a tool made for FDND-students. Its purpose is to gather all FDND-tasks and display them in a clear overview.

The overview of tasks, together with a couple of features, makes it easy to find specific tasks.

Table of Contents

Features

Svelte

This project is made in the framework Svelte. Svelte is different from other frameworks. Where other frameworks like React and Vue do their work in the browser, Svelte does its work in the build-stage of the project. Svelte can be viewed as a compiler. Instead of using a virtual DOM like most frameworks, Svelte writes code to update the dom whenever the state of the application changes.

You can search for specific tasks based on a couple of things:

  • Task name
  • Sprint name
  • Semester name
  • Any tag

Results are automatically displayed on user input.

Datalist

While typing, the user is presented with a couple of suggestions using the html <datalist> element. The options inside the datalist are dynamicly calculated based on user input.

Sorting

The tasks can be sorted based on task-order and alphabetical-order.

Sorting based on difficulty and the sorting interface are work-in-progress.

The default sorting is based on task-order.

Installation

Clone this repository:

$ git clone https://github.com/fdnd/task-aggregation.git

Navigate to the folder:

$ cd task-aggregation

Install all necessary packages and use rollup to build the project:

$ npm install
$ npm run build

You will need a .env-file to be able to fetch the task data.

Create one with the following (replace everything after the "="):

GITHUB_PERSONAL_ACCESS_TOKEN=***Your personal access token from github.com/settings/tokens***

Use

Make sure all packages are installed and fire up the script using:

$ npm install
$ npm start

Once everything the project is running, navigate to http://localhost:5000/ in your favourite web browser.

To-Do list

  • Finishing up sorting.
  • Add a filtering function.
  • Store user data in a cookie.
  • Group tasks based on client.

Sources

License

This work is licensed under GNU GPLv3.

Top categories

Loading Svelte Themes