Example Keyword Manager

This repository contains a web application that can help with organizing words. Its based on React and uses GraphQL (via Apollo) to connect the UI frontend with the data backend.

Features

being able to create and delete categories
being able to add and remove keywords associated with a category
pre-fill new categories with similar meaning words (powered by Datamuse)
having a readonly mode without editing controls

Getting Started

I.) Using Node.js:

Ensure that that Node.js and yarn are locally available (e.g. using nvm use) to use the following:

yarn start

II.) Using Docker:

Execute the shell script or run the follow commands in the terminal:

# build image
docker build --no-cache -t example-keyword-manager:latest .

# run container
docker run --rm -it -p 10000:10000 example-keyword-manager:latest

Overview

At the beginning common tools were configured (EditorConfig, ESlint, prettier) to provide a consistent developer experience. Moreover TypeScript and Babel are leveraged to assist with modern features.

While separating frontend and backend services can often be helpful, in this case a single code base is used to run both. To simplify the handling Next.js is used by defining the resources in src/pages. For now there is only the index page and the graphql endpoint.

Styling at the frontend is done through Tailwind CSS. Even though the definitions are encouraging a mobile first design, this project was more optimized for larger screens. Additionally it takes advantage of pointer devices to hide unused controls until they're focused by the user. The network communication with the API is done via an Apollo client. On the other side the backend follows a code-first approach to define GraphQL type definitions and resolvers for the schemas using GraphQL Nexus. So far all data are kept in memory rather than a dedicated database.

To ensure the implementations work as expected unit & integration tests were defined using jest and react testing library. By focusing on the way that the software is used correct rendering output, action behavior and side effects can be covered.

Structure

|
|- @types
|- bin
|- docs
|- scripts
|- src
|-- backend
|--- models
|--- services
|-- frontend
|--- assets
|--- components
|--- design
|--- graphql
|--- widgets
|-- pages
|-- types.ts
|- test
|-- mocks

Possible Improvements