Skip to content

Transform raw data into captivating visual stories with this app, effortlessly craft stunning data charts that unveil insights and trends

License

Notifications You must be signed in to change notification settings

JakubKorytko/data-graphs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Data Graphs

Version License

React TypeScript Bootstrap React Testing-Library Jest PHPUnit HTML5 CSS3 NodeJS Vite Yarn ESLint PHP Laravel MariaDB React Context

Table of Contents

Introduction

In an age of information overload, making sense of raw data has become a critical skill. Welcome to Data Graphs, your all-in-one solution for transforming mundane data sets into compelling visual stories.

In today's dynamic landscape, where data drives decision making across industries, the ability to effectively communicate insights is paramount. With Data Graphs, you can effortlessly create stunning data charts that not only reveal hidden patterns and trends, but also captivate your audience with visually compelling narratives.

Prerequisites

Note: Versions stated below are the ones used during development. Other versions may work as well, but they have not been tested.

Installation

  1. Clone the repository:

    git clone https://github.com/JakubKorytko/data-graphs
  2. Enter the project directory:

    cd data-graphs

Note: Install & run the client and the server apps (next steps) in separate terminals starting from the project directory. Running the apps will freeze the terminal until you stop them.

Client installation

  1. Enter the client directory:

    cd client
  2. Install dependencies:

    yarn install
  3. Run the app in development mode:

    yarn dev

Server installation

Note: The server app requires a database to work. Make sure you have one set up before proceeding and that it's running. You also need the database credentials for the environment variables.

  1. Enter the server directory:

    cd server
  2. Run the setup script:

    composer setup
  3. Set the proper values in the .env file according to your environment. The most important ones are the database-related variables. (The rest can be left as they are in most cases.)

  4. Run the server in development mode:

    composer serve

Note: Both the client and the server apps need to be running for the project to work.

Endpoints

The client app is a single-page application and is available at the root URL (/). It uses the server app for authentication and data storage. There is no need to use the server app directly, but if you want to (or want to use the API for something else), here are the available endpoints:

  • GET / - not used at the moment, displays "API is running" message
  • GET /status - get the server status (returns OK if the server is running, status code: 200)
  • GET /channels/read - get all channels in form of a JSON array
  • POST /channels/create - create a new channel, payload:
    • name - channel name (unique, required, string, min: 1, max: 65535)
    • clients - number of clients (required, integer, min: 0, max: 2147483647)
  • PUT /channels/update/{id} - update a channel, payload:
    • name - channel name (unique, required, string, min: 1, max: 65535)
    • clients - number of clients (required, integer, min: 0, max: 2147483647)
  • DELETE /channels/delete/{id} - delete a channel

Production build

Build client

  1. Enter the client directory:

    cd client
  2. Build the app for production:

    yarn build

The build will be located in the client/dist directory.
You can run it using a yarn preview command from the client directory.

Prepare server

  1. Enter the server directory:

    cd server
  2. Make sure that database credentials are set properly and that the database is running.

  3. Run the following command:

    composer prod
  4. Run the following command:

    yarn prod
  5. Edit the .env file and set the APP_ENV variable to production and the APP_DEBUG variable to false.

The server is now ready to be deployed.
You can run it using a composer serve command from the server directory.

Tests


As for the v0.1.1 version, the tests do not cover the majority of the code, and most of the existing tests do not pass due to changes in the project structure. This will be fixed in the next patch.


To run the client tests, use the following command in the client directory:

yarn test

Or, to run the server tests, use the following command in the server directory:

composer test

Troubleshooting

If you are using Windows or your git client converts line endings to CRLF, you may encounter the following error when trying to run the client app:

error Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style

This is caused by the fact that the project uses the eslint. To fix this, you can either:

  • change the line endings to LF (recommended)
    • by simply running yarn eslint --fix in the client directory
  • disable (or change) the eslint rule
    • read more about it here

Note that if you change the line endings to LF and decide not to disable the eslint rule, your editor or git client may convert them back to CRLF. Make sure your editor and git config are set up correctly.

Contributing

If you find issues or have suggestions for improvements, feel free to open an issue or submit a pull request. Contributions are welcome!

Contact

If you have any questions, feel free to contact me at jakub@korytko.me.

License

This project is released under the MIT License. See the LICENSE file for details.

TODO / Upcoming features

This is a list of features that lead to the v0.2.0 release:

(This list is not exhaustive and may change at any time. Patch versions may and probably will be released in the meantime. Keep in mind that the order of the items is not necessarily the order in which they will be implemented.)

  • Add more tests and fix the existing ones
  • Add the authentication system
  • Improve the UI
  • Clean up the code
  • Add new technologies (for both the client and the server) and refactor the code accordingly
  • Change Laravel to JavaScript-based backend (probably Node.js)
  • Implement CI/CD
  • Look for and fix potential security issues, vulnerabilities, and bugs

About

Transform raw data into captivating visual stories with this app, effortlessly craft stunning data charts that unveil insights and trends

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published