solidata_frontend
solidata_frontend copied to clipboard
first draft for solidata_frontend : vue+nuxt+vuetify+i18n+axios
SOLIDATA
frontend
PRESENTATION
part 2b/3 of the TADATA! sofware suite (ApiViz / Solidata_backend / OpenScraper )
Building a public service for managing, consolidating, and sharing data
GOALS
- an intuitive UX to manage open data projects ;
- support for multilingual (english, french, spanish to begin with) ;
- allow you to consume data from your own csv/xls files or external APIs ;
- consolidate your data : apply your own datamodel, simplify columns, apply metadatas, ... ;
- share the consolidated datas on API endpoints with the level of openness you decide (opendata, commons, collective, private) ;
- manage all your data and your recipes by projects ;
- be able to manage projects by teams and share data/recipes/datamodels...
DEVELOPPERS
Nice to see you around ! For a more complete tour check out :
- our guidelines
- our changelog
- our contribution guide
TECHNICAL POINTS
Tech stack
- Language : Javascript... not my cup of tea but still...
- Framework (js) : Vue.js and Nuxt.js... Universal Vue.js Applications
- Framework (styles) : vuetify... Material Design Component Framework
- Requests : Axios module for nuxt... Secure and Easy Axios integration with Nuxt.js.
- Internationalization : i18n module for nuxt... do you speak french, english, spanish, turkish ?
- Encryption : js-encrypt... RSA encryption when critical data is exchanged between back and front
Features :
- intuitive UX
- multilingual : FR, EN, ESP
- login / register
- import a dataset (dataset input) : from a file (csv, , xlsx) or from an external API
- manage / create datamodel templates (schemas) from datamodel fields
- manage / create datamodel fields
- manage / create open data projects : choose a datamodel, add several datasets and associate each with a datamodel, choose the level of open data for each datamodel field,solidify the compiled data with external API, export the compiled data (csv, or API endopoints)
- asymetrical encryption by RSA (password, email, ...) and JWT authentification (access and refresh tokens)
Features TO DO :
- tutorials (videos)
- RGPD compliance
- dataviz of a project (PRJ) - with Chart.js or D3.js
- map of a geolocalized project - with Leaflet
WHAT'S NEW ?
- check out our our changelog for more details
BUILD SETUP
# install dependencies
npm install # Or yarn install
# serve with hot reload at localhost:3000
npm run dev
# build for dev and launch server
npm run build_dev
npm start_dev
# build for production and launch server
npm run build
npm start
# build for preprod and launch server
npm run build_preprod
npm start_preprod
# generate static project
npm run generate
# or
npm run generate_preprod
# or
npm run generate_dev
For detailed explanation on how things work, check out the Nuxt.js and Vuetify.js documentation.
BENCHMARK ETL (open source or proprietary)
Download the benchmark as a PDF file
DATA MODEL BACKEND
Download the datamodel as a PDF file
GLOBAL ARCHITECTURE & COMPONENTS
Download the global architecture schema as a PDF file
AUTHORIZATION PROCESS (access & refresh tokens)
Download the schema as a PDF file
CREDITS
Solidata's frontend team thanks :
- the SocialConnect project, aka "Carrefour des Innovations Sociales"
- the EIG program by Etalab
- the CGET
- Christophe Ninucci for his help, advices and taste for memes
- the creator and community of Flask RestPlus
Contacts - maintainance :
SCREENSHOTS (UI/UX)
Home page with the side menu
Login page
Main dashboard
Create a new project
Edit a project : add datasets, choose a datamodel, choose the visibiilty of each datamodel field for your project...
Map each of your project's datasets to your datamodel
Overview of all the datamodels shared and created by the community
Overview of all the datamodel fields created and shared by the community
Preview of a datasets uploaded by an user
Edit a datamodel
View of all the settings of a datamodel
Edit a datamodel field
View of all the settings of a datamodel field