Avastar

At Avastar, we aim to build the next generation of Internet users. One that has the power to control their digital identity and has the means to decide how their data is used.

Project Infos

You can find all infos concerning the project here. If you're new to the project and want to participate, you can find more infos there.

Development

npm start

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

The page will reload if you make edits.
You will also see any lint errors in the console.

Architecture

• public
• src
  • assets
  • components
  • layouts
  • pages
  • index.tsc

public => Contains index.html file connected to React.js core, favicons, robtos.txt, DON'T ERASE IT ! src => contains App react.js core...

assets => contains media contents like icons, images, ... components => contains single components layouts => contains reusable components as navbar, left side bar,... pages => contains pages components, 1 file per page (Homepage, Overview, Facebook,...)

Documentation

• Typescript tooling - Add TS tools to your environment
• React TypeScript Cheatsheet - Uses and good practices for typing React.js app
• Create-React-App - Used for create this app
• React-Router-Dom v.6 - Used for routing internal links of the app
• Styled-components - Used for creating style directly on components

Extensions

VS Code

• Styled-Components extension - Syntax highlighting for styled-components
• Prettier Extension - Code formatter using prettier
• React ES7 Extension - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

Project color codes

• #2567FF
• #F3C7A9
• #CFC5FB
• #C4E8FA
• #C5E6D2

Common Issues

How to fix JS heap out of memory error ?

Based on issue from : react-plotly.js git repo Documentation : Customizing the plotly.js bundle

The React-plotly example on official documentation seems to have a problem when team wants to try react-plotly component on app. The terminal returns an error when we use npm start to launch development server because of a saturated memory error.

To fix this, we have to :

• add '@types/plotly.js-basic-dist' TS dependency from npm (npm i --save-dev @types/plotly.js-basic-dist)
• change how to create a react-plotly component by this method :

// former documentation example (❌ doesn't work)
import Plot from 'react-plotly.js';

// Updated method (✅ works fine)
import Plotly from 'plotly.js-basic-dist';
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);

For explanate above example, we will calling Plotly from plotly.js basic-dist then we call a method from react-plotly to create a component. On separate these opeartions, we avoid memory errors.