Dataswyft API Platform: Developers Docs
WebsiteGitHubSlackLogin
  • About Dataswyft
    • Community & Support
  • Learn about Dataswyft Platform
    • Decentralized Data Servers
    • Personal Data Account
      • HMIC Permissions
      • Namespaces
      • Single Sign-On
    • Data Wallet
      • Data Wallet Canvas and Solutions
      • CheckD Data Wallet: Release Notes
    • Dataswyft One
      • Compute Tools
  • Build on Dataswyft Platform
    • Dataswyft One APIs
      • Data API
        • Filtering, Querying & Transforming Data
        • Data Debit
      • File Storage API
      • Computations API
      • Postman Collection
    • Integrating with Data Wallets
    • Getting Started
      • Quick Start
      • Developers Portal
        • Updating and Submitting an Application
        • Deleting an Application
        • Application Statuses
      • Application Example - React
        • 1. Environment Setup
        • 2. Create Main Structure
        • 3. Main Page & Routing
        • 4. User Authentication
        • 6. CRUD Operations
        • 5. Component Pages
  • Deploy
    • Application Review
    • Rating Assurance & Certification
    • Live Application Ratings
  • Knowledge Base
    • Security Practices
    • FAQ
    • Glossary of Terms
  • Dataswyft
Powered by GitBook
On this page
  • Create the main structure
  • Assets

Was this helpful?

  1. Build on Dataswyft Platform
  2. Getting Started
  3. Application Example - React

2. Create Main Structure

Create the main structure

Let's structure the project as follows:

  • assets/: to keep all the styles and images

  • app/: for the App component and Routing

  • components/: for reusable React components

  • features/: to group React components by feature

  • utils/: to keep the helper functions

Let's create the assets/, app/, components/, utils/ and features/ folders in the src/ folder. And move the App.js, App.css and App.test.js in the src/app/ folder.

The src/ folder structure should now look like this:

├───src/
│   ├───app/
│   │   ├───App.css
│   │   ├───App.js
│   │   └───App.test.js
│   ├───assets/
│   ├───components/
│   ├───features/
│   ├───utils/
│   ├───index.css
│   ├───index.js
│   ├───logo.svg
│   ├───serviceWorker.js
│   └───setupTests.js

Assets

Unzip folder and paste the files into the assets/ folder.

The images/ and the styles/ folder should look like this:

│   ├───assets/
│   │   ├───images/
│   │   │   └───background-image.jpg
│   │   └───styles/
│   │       ├───main.scss
│   │       ├───_base.scss
│   │       ├───_branding.scss
│   │       ├───_buttons.scss
│   │       ├───_flex.scss
│   │       ├───_inputs.scss
│   │       └───_texts.scss

Install the node-sass to use Sass and SCSS:

npm install node-sass

And add this line in the index.js:

// /index.js
import './assets/styles/main.scss';

Also, include the material icons in the index.html file which is located in the public/ folder:

// public/index.html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Previous1. Environment SetupNext3. Main Page & Routing

Last updated 3 years ago

Was this helpful?

You can download the compressed folder with basic assets from . This includes the background image and the basic CSS styles to use across the project.

here