Giter Club home page Giter Club logo

digiort-solid's Introduction

Getting Started

This project was bootstrapped with Create React App and uses some components/utilities from Generator Solid React.

Libraries used:

Available Scripts

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run deploy

This runs publish.js.

This script uses solid-file-client to copy the build folder to a specified folder in a pod to deploy the webapp. It uses solid-auth-cli for authentication. For this the environment variables pod_username and pod_password need to be set. This also automatically runs build before deployment.

publish2.js uses solid-node-client, but doesn't work for now. See comment in file.

Component-Architecture

  • App:
    • entry component
    • uses useSession to check if the user is logged in
    • depending on that renders WelcomeComponent or LoginComponent
  • LoginComponent:
    • shows registration link, provider selection and LoginButton
    • after login redirects to app entry, which then shows WelcomeComponent
  • WelcomeComponent:
    • 'main' component with NavBar
    • show data form and uploads file to pod on submit
    • Overwrite checkbox:
      • if checked creates new file with the data from template
      • if not checked: appends data to existing file (or creates new file)
  • NavBar:
    • Header with {username}
    • Logout button: removes session from storage and refreshes page
  • UserdataFrom:
    • render form for data input
    • takes onSubmit function
  • FileViewer:
    • shows files in app-folder
  • FileUploader:
    • not used: allows selection of file from local filesystem

Hooks

  • useFiles:
    • needs a session and uses solid-file-client to query and return files in app-folder

other info

GENERATE_SOURCEMAP=false in .env prevents the creation of sourcemaps and reduces build size for upload/hosting in pod.

digiort-solid's People

Contributors

hsteinmueller avatar

Watchers

 avatar

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.